为什么设置保留对象堆叠后图像不可移动

Question

im试图做的是最初加载一个保持静态的图像，如果文件输入发生变化，该图像被加载，放置在画布中，应该在最初加载的图像后面，并且可以移动，可旋转，可调整大小。 我的第一个问题是 image.sendToBack(( 没有做任何事情 - 我通过将初始选项保留对象堆叠设置为 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 帖子尝试了什么 - 我在 sendToBack-Call 之后添加了 image.setCoords((，这实际上没有导致任何更改。 你们对我有什么建议吗？ 第一次使用织物工作，我严重卡在这里。 谢谢，祝你好。

编辑：我尝试将 Selected： true 添加到 image.set 中，但这并没有改变任何东西。

其他信息：使用 FabricJS 版本 ^2.4.2-B 的 IM

Answer 1

使用 object#evented，它将通过它传播所有事件。

演示

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'>