我试图做的是最初加载一个保持静态的图像,如果文件输入发生变化,该图像被加载,放置在 Canvas 中,应该在最初加载的图像后面并且是可移动的,可旋转的,可调整大小的。我的第一个问题是 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 帖子尝试过的内容 - 我在 sendToBack-Call 之后添加了 image.setCoords(),但实际上并没有导致任何更改。你们对我有什么建议吗?第一次使用 fabric,我真的被困在这里了。谢谢,祝你玩得愉快。
编辑:我尝试将 selected: true 添加到 image.set 中,但这并没有改变任何东西。
附加信息:我使用的是 fabricjs 版本 ^2.4.2-b
最佳答案
使用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'>
关于javascript - 为什么图像在设置 preserveObjectStacking 后不能移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52838540/