有一些关于缩放图像的帖子（例如HTML5 Canvas Image Scaling Issue）; 但是，我需要了解如何在平滑的方式下快速缩放数百个简单的绘制元素（正方形、线条、弧等）。 我希望它看起来像动画，现在使用鼠标滚轮缩放（每次缩小 0.05）时转换不连贯。
优化 Canvas 中有一个有趣的见解，建议在非屏幕画布上预渲染，但这可能会在浏览器中引起内存问题（我们已经推到极限了）。
以下是具有数百个绘制元素的工程原理示意图的示例：
谢谢！
HTML5画布：使用绘制元素而不是图像进行平滑快速缩放的方法是什么？
6
- user2782
5
这个答案是否对您有所帮助？(https://dev59.com/M2435IYBdhLWcg3w0Tvc#5526721) - agrm
缩放和定位图像并不是主要任务。基本问题在于，所有元素（有时数千个）在每个比例点重新绘制，结果会很粗糙。业务所有者希望获得平滑的缩放体验，就像他们缩放图像一样（因此等待鼠标滚轮停止不是一个选项）。一种可能性是创建画布的png图像叠加层，使用鼠标滚轮缩放该图像，然后在鼠标滚轮停止时进行重绘。 - user2782
一个可能的解决方案是创建一个画布的png图像叠加层，用鼠标滚轮缩放该图像，然后在鼠标滚轮停止时进行重绘。这就是我要建议的。每次重新绘制时，创建一个新的叠加层，以便在滚动事件发生时准备好并等待。如果您发布一个简化的示例，并且我有时间，我可能会尝试玩一下。 - thingEvery
你能展示一下你是如何绘制这个模式的吗？你应该能够在每帧中多次绘制它，没有重度过滤，也许最慢的部分是文本，但我感觉你做错了什么（也许是逐个描边每条线？）而且这个错误有一个简单的解决方案（批处理所有路径命令，并尽可能少地调用描边和填充）。 - Kaiido
滚动去抖在这种情况下很有帮助。另外，如果我们计算出缩放后哪些对象/形状将可见，然后只在画布上绘制那些对象/形状呢？你尝试过使用此处建议的离屏画布吗？（https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas） - lifetimeLearner007
2个回答
0
问题在于每一帧都要重新绘制所有元素。一个简单的方法是将整个图像绘制到画布上。然后，每次想要在图像上绘制图片时，将画布绘制到另一个画布上。
当您进行缩放时重新绘制：
const imgCanvas = document.createElement('canvas');
const imgCtx = imgCanvas.getContext('2d');
// Draw the each elements to imgCtx
// ...
当您进行缩放时重新绘制：
// Scale the canvas
ctx.scale(x, y);
// Draw the pre-drew image onto screen
ctx.drawImage(imgCanvas);
- Hao-Cher Hong
0
有几种技术可以提高性能，但最终它都取决于您在画布中放置的元素数量，因此在重构代码时，请考虑如何：
绘制更少的元素，例如在缩小图片中不需要绘制那些微小的标签
分组/聚类，这样您就可以绘制组中所有元素的表示形式，Google Maps做得非常好：https://cloud.google.com/blog/products/maps-platform/how-cluster-map-markers
使用JavaScript游戏引擎，性能是游戏引擎非常关注的问题，您可以利用其中之一：https://github.com/collections/javascript-game-engines
...请记住，在Web上提高性能并没有一种万无一失的解决方案；如果性能对您的应用程序至关重要，也许它不应该在浏览器上运行。
- Helder Sepulveda
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接