Question

我创建了fabricjs画布。添加了一行line，然后使用line克隆fabric.util.object.clone(object)。 Here是小提琴。一切看起来都不错，除了两条线似乎彼此绑定，因为它们都会在任何一个徘徊的同时触发mouse:over事件而我不想发生。此问题仅适用于1.7.7及更高版本。那么，如何解决？

Answer 1

您需要使用object.clone(callback)

<强> 样本

＆＃13;

var canvas = new fabric.Canvas('myCanvas',{
 width:window.innerWidth,
 height:window.innerHeight,
});
canvas.on("mouse:over", function(e) {
  if(e.target)
  e.target.setStroke('orange');
  canvas.renderAll();
});
canvas.on("mouse:out", function(e) {
  if(e.target)
  e.target.setStroke('red');
  canvas.renderAll();
});
var line = new fabric.Line([10, 10, 10, 200], {
  originX: 'center',
  originY: 'center',
  stroke: 'red',
  hasControls: false,
  strokeWidth: 3,
  fill: 'red',
  padding: 10
});
canvas.add(line);
line.clone(function(clonedLine) {
  clonedLine.set({
    x1: 50,
    y1: 10,
    x2: 50,
    y2: 200,
    stroke: 'green',
    fill: 'green'
  });
  canvas.add(clonedLine);
},['padding','hasControls'])

＆＃13;

#myCanvas {
  border: 1px solid black;
}

＆＃13;

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

＆＃13;

当使用fabricjs 1.7.7或更高版本时，克隆的fabricjs对象似乎绑定

1 个答案: