Question

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

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

据我所知，织物可以创建两层，是否可以在顶层放置一个物体以进行移动？

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

Answer 1

创建一个包含所有行的组，并删除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>

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

1 个答案: