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

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，而不是canvas#renderAll。const canvas = new fabric.Canvas("canvas", {&nbsp; width: 500,&nbsp; height: 500,&nbsp; selection: false,&nbsp; centeredScaling: true,});const createLine = (index) => {&nbsp; return new fabric.Line([index * 5, 0, 500 - index * 5, 500], {&nbsp; &nbsp; stroke: "#000",&nbsp; &nbsp; strokeWidth: 1,&nbsp; &nbsp; fill: "#000"&nbsp; });};const lines = [];for (i = 0; i < 100; i++) {&nbsp; lines.push(createLine(i));}const group = new fabric.Group(lines, {&nbsp; selectable: false});canvas.add(group);const cursor = new fabric.Rect({&nbsp; stroke: "#000",&nbsp; strokeWidth: 1,&nbsp; fill: "red",&nbsp; width: 50,&nbsp; height: 50,&nbsp; top: 0,&nbsp; left: 0,&nbsp; selectable: false});canvas.add(cursor);canvas.on('mouse:move', (event) => {&nbsp; const pointer = canvas.getPointer(event);&nbsp; cursor.set({&nbsp; &nbsp; top: pointer.y,&nbsp; &nbsp; left: pointer.x,&nbsp; });&nbsp; canvas.requestRenderAll();}).canvas {&nbsp; width: 1000px;&nbsp; height: 1000px;&nbsp; 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>