绘图应用缩放概念
我正在画布上构建一个应用程序，它由一个简单的 DOM 组成，每次鼠标移动时都会重绘（是的，这是必要的），出于性能问题，并非每个部分都只重绘需要的部分。
该应用程序运行良好，但我想添加缩放功能，在我看来，它可以通过三种不同的方式完成：
1 - 每次用户放大或缩小时，每个 DOM 元素都会重新计算（位置和大小） out - 它可能存在精度问题，并且不是一个很好的抽象
2 - 画布具有分辨率属性（即当用户缩小分辨率时，分辨率可能从 1 变为 0.75） - 需要进行计算每次重绘
3 - 使用内置的translate()和scale()方法 - 可能是最优雅和最快的解决方案，但是它根本不直观，可能很难理解我或某人后来是如何完成的否则（这些方法适用于整个画布，首先您将在画布上进行平移和缩放，然后您绘制的所有内容都会“神奇地”平移和缩放）
哪个是最好的，或者还有我没有想到的其他可能性吗？
I'm building an application on top of canvas, it consists of a simple DOM that gets redrawn on every mouse move (yes, it is necessary), for performance issues not every part part gets redrawn only what is needed.
The app is working well but I'd like to add the zoom feature, the way I see it, it can be done in three different ways:
1 - Every DOM element gets recalculated (position and size) every time a user zooms in or out - it might have issues with precision and its not a very good abstraction
2 - The canvas has a resolution property (i.e. when the user zooms out resolution might change from 1 to .75) - there will be a need to make the calculations on every redraw
3 - Use the built in translate() and scale() methods - possibly the most elegant and fastest solution, however it is not intuitive at all, it might be difficult to understand how it is being done latter on by me or someone else (these methods work on the full canvas, first you would translate and scale on the canvas and afterwards everything you draw gets 'magicly' translated and scaled)
Which one is best or are there other possibilities I'm not thinking of?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我会使用内置的 translate()/scale() 方法。 如果您担心这些方法中任何一种的性能和质量，您应该尝试以一种可以将其替换为其他选项进行比较的方式来执行此操作（如果结果最终让您有任何担忧）。
I would use the builtin translate()/scale() methods. If you're worried about the performance and quality of any of these methods, you should try to do it in a way that you can swap it out for another of the options to compare, if the results end up giving you any concern.