gpt4 book ai didi

javascript - rect.set 悬停区域不更新

转载 作者:行者123 更新时间:2023-12-03 01:10:35 24 4
gpt4 key购买 nike

如何使用 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

最佳答案

移动后需要设置坐标,查看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>

关于javascript - rect.set 悬停区域不更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52225036/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com