Клонированные объекты fabricjs, кажется, связываются, когда используется fabricjs 1.7.7 или более поздняя версия - PullRequest
Новая
       14

Клонированные объекты fabricjs, кажется, связываются, когда используется fabricjs 1.7.7 или более поздняя версия

0 голосов
/ 30 мая 2018

Я создал холст ткани.Добавил строку line, затем клонировал line, используя fabric.util.object.clone(object). Здесь - скрипка.Все выглядит хорошо, за исключением того, что обе линии, кажется, связываются друг с другом, потому что обе они вызывают событие mouse:over в то же время, когда какая-либо из них находится под наведением, что я не хочу, чтобы это произошло.Эта проблема только в версии 1.7.7 и позже.Итак, как это можно исправить?

1 Ответ

0 голосов
/ 30 мая 2018

Вам необходимо использовать object.clone (обратный вызов)

DEMO 

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'])
#myCanvas {
  border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.7/fabric.js"></script>
<canvas id="myCanvas" >

</canvas>
...