Почему изображение не перемещается после установки preserveObjectStacking

Question

Почему изображение не перемещается после установки preserveObjectStacking

1

то, что я пытаюсь сделать, изначально загружает изображение, которое остается статическим, и если входные данные файла изменяются, то изображение загружается, помещается в холст, должно быть за первоначально загруженным изображением и быть подвижным, вращающимся, изменяемым по размеру. моя первая проблема заключалась в том, что image.sendToBack() не делал ничего - я исправил это с установкой начального параметра preserveObjectStacking на true - он работал, но теперь изображение можно изменять, поворачивать, но не перемещать.

import { fabric } from "fabric";

(function($) {
    var imageLoader = document.getElementById('imageLoader');
    var canvas = document.getElementById('imageCanvas');

    imageLoader.addEventListener('change', handleImage, false);
    function handleImage(e) {
        var reader = new FileReader();
        reader.onload = function (event){
            var imgObj = new Image();
            imgObj.src = event.target.result;
            imgObj.onload = function () {
                var image = new fabric.Image(imgObj);
                image.set({
                    angle: 0,
                    padding: 10,
                    cornersize:10,
                    height:110,
                    width:110,
                });
                // canvas.centerObject(image);
                canvas.add(image);
                canvas.sendToBack(image);
                image.setCoords();
                canvas.renderAll();

            }
        }
        reader.readAsDataURL(e.target.files[0]);
    }



    var canvas = new fabric.Canvas('imageCanvas', {
        preserveObjectStacking: true
    });
    canvas.setWidth(300);

    // overlayImage

    fabric.Image.fromURL('/../img/meinbild_leer_300x600.png', function(oImg) {
        oImg.scaleToWidth(300);
        canvas.add(oImg);
    }, {hasControls: false, selectable: false});



})(jQuery);

что я пытался на основе документации и других сообщений stackoverflow - я добавил image.setCoords() после sendToBack-Call, который фактически не привел к каким-либо изменениям. у вас, ребята, есть какие-то советы для меня? работая в первый раз с тканью и им серьезно застряла прямо здесь. спасибо и хорошо.

edit: я попытался добавить выбранный: true к image.set, но это ничего не изменило.

Дополнительная информация: im using fabricjs version ^ 2.4.2-b

netzding 16 окт. 2018, в 17:11

Источник

Теги:

javascript

canvas

fabricjs

1 ответ

Ещё вопросы

Durga · Accepted Answer · 2018-10-18T06-15-00.000Z

Используйте объект # evented, который будет распространять все события через него.

DEMO

var imageLoader = document.getElementById('imageLoader');
var canvas = document.getElementById('imageCanvas');

imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {
  var reader = new FileReader();
  reader.onload = function(event) {
    var imgObj = new Image();
    imgObj.src = event.target.result;
    imgObj.onload = function() {
      var image = new fabric.Image(imgObj);
      image.set({
        angle: 0,
        padding: 10,
        cornersize: 10,
        height: 110,
        width: 110,
      });
      // canvas.centerObject(image);
      canvas.add(image);
      canvas.sendToBack(image);
      image.setCoords();
      canvas.renderAll();
    }
  }
  reader.readAsDataURL(e.target.files[0]);
}

var canvas = new fabric.Canvas('imageCanvas', {
  preserveObjectStacking: true
});
canvas.setWidth(300);

// overlayImage

fabric.Image.fromURL('https://raw.githubusercontent.com/fabricjs/fabricjs.com/gh-pages/assets/dragon2.jpg', function(oImg) {
  oImg.scaleToWidth(300);
  canvas.add(oImg);
}, {
  hasControls: false,
  evented: false,
  opacity: 0.3
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.1/fabric.js"></script>
<canvas id='imageCanvas'></canvas>
<input id='imageLoader' type='file'>