java - 如何处理 Canvas 中的多个元素

Question

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

谢谢

Answer 1

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

当您使用 Canvas 绘制时，您向上下文发出类似于用油漆加载画笔的命令。

如果你想画一条红线，然后画一条蓝线，你可以拿起一些红色颜料，画一条线，然后清洁你的画笔，拿起一些蓝色颜料并画那条线。

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

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

然后你画罗盘箭头/针。

然后调用ctx.restore()并继续你的快乐之路。这将阻止箭头后面绘制的物体发生旋转。

上下文的保存和恢复功能会跟踪旧状态，这样您就不会在旋转上下文的针之后绘制所有内容。这有点像洗画笔，只是更好，因为你可以记住它以前是蓝色的，而不必每次都洗干净。

顺便说一句，如果您确实想将 Canvas 上下文完全重置为其默认状态(黑色画笔、默认变换、无阴影等)，您只需执行 canvas.width = canvas.width 它将使上下文完全重置。