Question

如何使用object.set({})，然后更新悬停区域。

例如，当我将一个rect移到左侧时，该rect在外观上已经移动，但是悬停区域仍基于先前的左侧位置。

我需要做其他渲染吗？

我认为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>

https://codesandbox.io/s/rlo3ojwvp4

Answer 1

您需要在移动后设置坐标，请选中When-to-call-setCoords

演示

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>

rect.set悬停区域未更新

1 个答案: