如何在画布中绘制矩形后更新rect的属性？

Question

这是我的功能步骤

1. 当mousedown事件发生时，我将在画布中绘制一个大小（mousedown.x，mousedown.y，0,0）的矩形

2. 然后开始mousemove，矩形的大小将改变，跟随鼠标位置

3. 当mouseup发生时，draw将完成

现在，我可以在画布上绘制矩形，但我不知道如何在mousemove时更新矩形的大小

Answer 1

您可能希望在mousedown.x事件期间将初始mousedown.y和mouseDown存储在全局变量中。

在mouseMove事件期间，您要检查当前鼠标X是否大于初始鼠标X.如果是，请将rect的宽度设为当前X - 初始X.否则，您可能想要将rect的Y设置为当前X，将宽度设置为初始X - 当前X.

y可以做同样的事情。

您想检查当前鼠标Y是否大于初始鼠标Y.如果是，请将rect的高度设为当前Y - 初始Y.否则，您可能需要设置矩形的Y.为当前Y和宽度为初始Y - 当前Y.

确保在mouseMove事件开头的画布上清除画布或至少上一个绘图。

要清除整个画布，只需制作一个矩形，其中x和y为0，宽度和高度与画布的宽度和高度相同。确保此rect使用与画布背景颜色相同的颜色。在此之后，将您使用的颜色更改回rect应该的颜色。

要仅清除上一个图形，您需要存储最新mouseMove事件的x和y，并在mouseMove的开头检查并使用相同的逻辑创建一个矩形你之前用来创建矩形。使用与画布背景颜色相同的颜色。请务必将颜色更改为rect之后的颜色。

如果您预计要绘制多个形状，则可以在对象数组中存储每个形状的x和y，宽度和高度，然后在{{1}的开头使用rect清除画布后1}}事件，你可以遍历它们并重绘它们然后再做任何mouseMove逻辑。