如何以编程方式正确移动对象？

Question

我需要将对象移动到鼠标光标之后。如果使用代码，我会遇到很大的性能问题。

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

据我所知，fabric 会创建 2 层，是否可以在顶层放置一个对象以便移动？

这是一个例子 https://jsfiddle.net/Warmor/7bL02sjv/38/

Answer 1

创建所有线路的群组，并删除 perPixelTargetFind 和最重要的呼叫 canvas#requestRenderAll, not 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>

如何以编程方式正确移动对象？

How to correctly move an object programmatically?

javascript

fabricjs