防止保存狀態懸停在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>