我想做的是最初加载一个保持静态的图像,如果文件输入发生变化,则该图像被加载,放置在画布中,应该位于最初加载的图像后面,并且可以移动,可旋转,可调整大小。
我的第一个问题是
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()
,实际上并没有导致任何更改。你们有什么建议给我吗?第一次使用布料,我被严重困在这里。谢谢,祝你玩得愉快。
编辑:我尝试将 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'>