快速检索碰撞图形:四叉树碰撞检测

大家好,我是前端西瓜哥。

在上篇文章我们讨论了使用 脏矩形渲染,通过重渲染局部的图形来提优化 Canvas 的性能,将 GPU 密集转换为 CPU  密集。

看这篇文章

Canvas 性能优化:脏矩形渲染

CPU 密集在哪?

在需要遍历 所有的图形,判断它们是否和脏矩形发生相交(碰撞),保存发生碰抓给你的图形,将它们在局部进行重绘。

有没有办法减少需要遍历的图形,不要遍历全部的图形,而是少量的图形呢?有一个办法是使用 四叉树

阅读更多

Canvas 性能优化:脏矩形渲染

大家好,我是前端西瓜哥。

使用 Canvas 做图形编辑器时,我们需要自己维护自己的图形树,来保存图形的信息,并定义元素之间的关系。

我们改变画布中的某个图形,去更新画布,最简单的是清空画布,然后根据图形树将所有图形再绘制一遍,这在图形较少的情况下是没什么问题的。但如果图形数量很多,那绘制起来可能就出现卡顿了。

那么,有没有什么办法来优化一下?有,脏矩形渲染。

阅读更多

图形编辑器——矩形选区是如何实现选中多个图形的?

大家好,我是曾经的图形编辑器开发者前端西瓜哥,今天继续说说图形编辑器开发需要用到的知识点。

图形编辑器的一个非常基础需求是:可以通过选择工具勾画出一个矩形选区,来选中该区域内的所有图形,以方便之后的批量移动、变形、删除等操作。

那么如何判断这些元素是否在矩形选区,该选择哪种算法,就需要我们好好考虑了。

阅读更多