我需要在鼠标光标后移动对象。如果使用代码，我会遇到很大的性能问题。
canvas.on('mouse:move', (event) => {
const pointer = canvas.getPointer(event);
cursor.set({
top: pointer.y,
left: pointer.x,
});
canvas.renderAll();
})
据我所知，织物可以创建两层，是否可以在顶层放置一个物体进行移动？
创建一个包含所有行的组，然后删除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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句