。

图形拾取技术是之后的高亮图形、拖拽图形、点击触发事件的基础。

canvas

“…图形拾取指的是用户通过鼠标或手指在图形界面上能选中图形的能力。

图形拾取技术是之后的高亮图形、拖拽图形、点击触发事件的基础。

canvas

在画布上绘制形状并不知道它之前画过的图形是什么不会保存它们的坐标、宽高等信息。

canvas

支持将其中的图形进行编辑比如拖拽和放大那就必须自己去维护一棵节点树。

类似这样

document.querySelector(canvas);

const

canvas.getContext(2d);ctx.beginPath();

ctx.rect(30,

如果只是计算可以不绘制出来ctx.isPointInPath(40,

40);

为止性能可能会差一点可以用四叉树碰撞检测减少需要遍历的元素数量但极端情况可能还是会有很多元素另外可通过包围盒减少计算量2.检测点是否在一条

strokeWidth

上绘制同样形状的纯色块并用哈希表记录颜色和对应的图形对象比如红色表示矩形

A绿色表示矩形

的对应像素点的颜色值然后找到它对应的图形对象执行其注册的事件。

Konva

1.能够快速确定点所在的图形2.能够修改碰撞范围比如给一条细的线条进行区域的外扩让用户更好选中这条线条3.适合图形量大、重绘较少的场景。

缺点

canvas

方案一样需要遍历图形检测2.实现复杂简单图形还算简单但如果涉及到贝塞尔曲线等复杂形状实现就会很复杂且性能堪忧可以考虑用

总结一下canvas

得到颜色值然后根据映射关系找到对应图形3.计算机图形学算法自己写点是否在特定形状下的算法本质是

isPointInPath

的底层实现。

但复杂图形碰撞检测实现起来困难。

我是前端西瓜哥欢迎关注我学习更多知识。

整理了一套《前端大厂面试宝典》包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法一共201道面试题并对每个问题作出了回答和解析。

部分文档展示