防止保存状态悬停在fabricjs

Question

我有一个应用程序，与fabricjs。它与鼠标滚轮的缩放一起工作，当我做鼠标滚轮时，我的画布保存状态，就像我做鼠标滚轮一样。

我在画布上有一个状态，当我把鼠标放在一个对象上时。 当您悬停一个对象并进行放大和缩小时，画布的状态将与悬停状态一起保存。我不希望发生这种情况。我如何防止这种情况发生？

//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); 

您可以查看小提琴： https://jsfiddle.net/samael205/xtcmokuy/9/

Answer 1

没有办法忽略悬停状态。您可以将颜色保存在其他字段中，并将该字段传递给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>