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()调用并在导出后重置它。

＆＃13;

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

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.6/fabric.min.js"></script>
<canvas id="canvas"></canvas>

＆＃13;

防止在fabricjs中保存状态悬停

1 个答案: