我如何使用object.set({})然后更新悬停区域。
例如，当我向右移动一个矩形时，直观地移动了矩形，但悬停区域仍然基于前一个左侧位置。
我需要做额外的渲染吗？
我认为canvas.renderAll()就足够了
这是一个演示
const canvas = new fabric.Canvas(document.getElementById("myCanvas"));
var rect = new fabric.Rect({
width: 100,
height: 100,
fill: "red",
left: 25,
top: 25
});
canvas.add(rect);
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
rect.set({ left: 125 });
canvas.renderAll();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.min.js"></script>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="app"></div>
<button id="btn">move left</button>
<canvas id="myCanvas" width="300" height="200" ></canvas>
</body>
</html>你需要在移动后设置坐标，检查When-to-call-setCoords
DEMO
const canvas = new fabric.Canvas(document.getElementById("myCanvas"));
var rect = new fabric.Rect({
width: 100,
height: 100,
fill: "red",
left: 25,
top: 25
});
canvas.add(rect);
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
rect.set({ left: 125 });
rect.setCoords();
canvas.renderAll();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.min.js"></script>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="app"></div>
<button id="btn">move left</button>
<canvas id="myCanvas" width="300" height="200" ></canvas>
</body>
</html>