Как правильно перемещать объект программно? - PullRequest
Новая
       6

Как правильно перемещать объект программно?

1 голос
/ 12 октября 2019

Мне нужно переместить объект после курсора мыши. При использовании кода у меня большие проблемы с производительностью. 

canvas.on('mouse:move', (event) => {
    const pointer = canvas.getPointer(event);
    cursor.set({
        top: pointer.y,
        left: pointer.x,
    });
    canvas.renderAll();
})

Насколько я знаю, ткань создает 2 слоя, возможно ли поместить объект на верхний слой для перемещения?

Вот пример https://jsfiddle.net/Warmor/7bL02sjv/38/

1 Ответ

1 голос
/ 12 октября 2019

Создайте группу из всех строк и удалите perPixelTargetFind, а самый важный вызов canvas # requestRenderAll , а не canvas # renderAll .

ДЕМО 

const canvas = new fabric.Canvas("canvas", {
  width: 500,
  height: 500,
  selection: false,
  centeredScaling: true,
});

const createLine = (index) => {
  return new fabric.Line([index * 5, 0, 500 - index * 5, 500], {
    stroke: "#000",
    strokeWidth: 1,
    fill: "#000"
  });
};
const lines = [];
for (i = 0; i < 100; i++) {
  lines.push(createLine(i));
}
const group = new fabric.Group(lines, {
  selectable: false
});
canvas.add(group);

const cursor = new fabric.Rect({
  stroke: "#000",
  strokeWidth: 1,
  fill: "red",
  width: 50,
  height: 50,
  top: 0,
  left: 0,
  selectable: false
});
canvas.add(cursor);

canvas.on('mouse:move', (event) => {
  const pointer = canvas.getPointer(event);
  cursor.set({
    top: pointer.y,
    left: pointer.x,
  });
  canvas.requestRenderAll();
})
.canvas {
  width: 1000px;
  height: 1000px;
  border: 1px solid Black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
<canvas id="canvas" class="canvas" ></canvas>
...