rect.set область наведения не обновляется - PullRequest
Новая
       7

rect.set область наведения не обновляется

0 голосов
/ 07 сентября 2018

Как я могу использовать 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>

https://codesandbox.io/s/rlo3ojwvp4

1 Ответ

0 голосов
/ 14 сентября 2018

Вам нужно установить координаты после перемещения, отметьте Когда звонить-установитьCoords

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>
...