我有一个使用 fabricjs 的应用程序。它与鼠标滚轮的缩放配合使用,当我向上移动鼠标滚轮时,我的 Canvas 会保存状态,就像我向下滚动鼠标滚轮一样。
当我将鼠标放在一个对象上时,我在 Canvas 上有一个状态。 当您悬停对象并进行放大和缩小时, Canvas 的状态将与悬停状态一起保存。我不希望这发生。我该如何防止这种情况?
//click on the rect to see that the color red is saved in the json
//shown in the console log, but i want the original State, the red fill
canvas.on("mouse:over", function(event){
if("target" in event){
color = event.target.fill;
event.target.fill="red";
canvas.renderAll();
}
});
canvas.on("mouse:out", function(event){
if("target" in event){
event.target.fill=color;
canvas.renderAll();
}
});
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'blue',
width: 20,
height: 20,
angle: 45
});
canvas.add(rect);
您可以在以下位置查看 fiddle : https://jsfiddle.net/samael205/xtcmokuy/9/
最佳答案
没有办法只忽略悬停状态。您可以将颜色保存在其他字段中并将该字段传递给 toObject()
调用并在导出后重置它。
var canvas = new fabric.Canvas('canvas', {
perPixelTargetFind: true
});
canvas.on("mouse:down", function(event) {
var state = canvas.toObject(['trueColor']);
state.objects.forEach(o => {
if (o.trueColor) {
o.fill = o.trueColor;
}
})
console.log(state);
});
//click on the rect to see that the color red is saved in the json
//shown in the console log, but i want the original State, the red fill
canvas.on("mouse:over", function(event) {
if (event.target) {
event.target.trueColor = event.target.fill;
event.target.fill = "red";
canvas.renderAll();
}
});
canvas.on("mouse:out", function(event) {
if (event.target) {
event.target.fill = event.target.trueColor;
canvas.renderAll();
}
});
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'blue',
width: 20,
height: 20,
angle: 45
});
canvas.add(rect);
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.6/fabric.min.js"></script>
<canvas id="canvas"></canvas>
关于javascript - 防止在 fabricjs 中保存状态悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40081096/