如何处理画布中的多个元素

Question

我正在Java中制作一个UI应用程序，我试图绘制一些图形来代表窗口中的指南针。我在画布上处理鼠标拖动事件的旋转，但问题在于画布中的所有内容都在旋转。我想知道是否可以处理我在画布上分别绘制的每个元素，以便只有我的箭头会移动，而不是整个画布。

谢谢

Answer 1

大概你有一个画循环绘制了一堆东西。背景，指南针，指南针的箭头。也许还有其他一些东西

当您使用画布进行绘制时，您会向上下文发出类似于用画笔加载画笔的命令。

如果你想画一条红线，然后一条蓝线，你拿起一些红色的油漆，画一条线，然后清理你的画笔，拿起一些蓝色的油漆并画上那条线。

画布上下文完全相同。你想在这里做的是在正常的画布上下文中绘制一堆东西。然后你想用ctx.save()保存上下文并做你的旋转。

当您翻译或旋转甚至只是在上下文中设置填充时，您并未改变已完成的操作，您只是说“对于此后的所有内容，请应用这些操作。”

那么你画的指南针箭头/针。

然后致电ctx.restore()并继续您的快乐方式。这将阻止旋转发生在箭头之后的事物上。

上下文的保存和恢复功能会跟踪旧状态，以便您不会在旋转的上下文之后绘制所有内容。这有点像清洗画笔，只有更好，因为你可以记住它曾经有蓝色，而不是每次都要清洗干净。顺便说一句，如果你确实想将画布上下文完全重置为默认状态（黑色画笔，默认变换，无阴影等），你可以简单地做canvas.width = canvas.width，它会给上下文一个完整的重置。