响应式建网站,外贸网站源码下载,抖音seo关键词优化排名,wordpress产品定制图形拾取#xff0c;指的是用户通过鼠标或手指在图形界面上能选中图形的能力。图形拾取技术是之后的高亮图形、拖拽图形、点击触发事件的基础。
canvas 作为一个过于朴实无华的绘制工具#xff0c;我们想知道如何让 canvas 能像 HTML 一样#xff0c;知道鼠标点中了哪个 “…图形拾取指的是用户通过鼠标或手指在图形界面上能选中图形的能力。图形拾取技术是之后的高亮图形、拖拽图形、点击触发事件的基础。
canvas 作为一个过于朴实无华的绘制工具我们想知道如何让 canvas 能像 HTML 一样知道鼠标点中了哪个 “div”。
维护节点树
canvas 只提供 API 在画布上绘制形状并不知道它之前画过的图形是什么不会保存它们的坐标、宽高等信息。
所以如果你想让 canvas 支持将其中的图形进行编辑比如拖拽和放大那就必须自己去维护一棵节点树。
类似这样
const tree {type: stage,children: [{type: rect,x: 10, y: 10, w: 100, h: 100,fill: red,},{type: circle,x: 0, y: 0, radius: 80,stroke: yellow,}],
}; 然后 canvas 基于此去按层级绘制这些图形。
下面我们看看元素拾取的几种方案。
方案 1isPointInPath
isPointInPath 是 canvas 原生提供的一个检测某个点是否在指定路径内的方法。
const canvas document.querySelector(canvas);
const ctx canvas.getContext(2d);ctx.beginPath(); // 表示路径的开始
ctx.rect(30, 30, 100, 50);
ctx.stroke(); // 如果只是计算可以不绘制出来ctx.isPointInPath(40, 40); // true在路径内
ctx.isPointInPath(10, 10); // false不在路径内 线上 demo
codesandbox.io/s/h7pxsm
优点
1.原生 API 支持方便
缺点
1.判断光标点中哪个元素需要遍历元素去调用方法直到返回 true 为止性能可能会差一点可以用四叉树碰撞检测减少需要遍历的元素数量但极端情况可能还是会有很多元素另外可通过包围盒减少计算量2.检测点是否在一条 strokeWidth 较大的线上可能会有错误因为路径是没有宽度的方案 2缓存 Canvas
根据真正的 canvas 元素额外创建一个大小相同离屏的缓存 canvas 元素。
每次我们在主 canvas 上绘制形状时也在缓存 canvas 上绘制同样形状的纯色块并用哈希表记录颜色和对应的图形对象比如红色表示矩形 A绿色表示矩形 B。 然后当我们在真实 canvas 上点击时我们在 canvas 绑定事件就可以拿到坐标位置 (x, y)再通过 offScreenCtx.getImageData(x, y, 1, 1) 方法得到缓存 canvas 的对应像素点的颜色值然后找到它对应的图形对象执行其注册的事件。
Konva 库使用了该方案。
写了个简单的线上 demo你可以尝试点击上面那个 canvas 下的图形看看控制台输出
codesandbox.io/s/veivt3
优点
1.能够快速确定点所在的图形2.能够修改碰撞范围比如给一条细的线条进行区域的外扩让用户更好选中这条线条3.适合图形量大、重绘较少的场景。缺点
1.渲染开销加倍。每个图形需要调用两次 API页面上的 canvas 和缓存 canvas 各绘制一次2.如果图形频繁变化性能会更低。方案 3图形学算法
可以用计算机图形学的算法去判断一个点是否在某个形状内。
比如
1点是否在矩形内。
function isPointInRect(point, rect) {return (point.x rect.x point.y rect.y point.x rect.x rect.width point.y rect.y rect.height);
} 2点是否在圆形内。
export function isPointInCircle(point, circle) {const dx point.x - circle.x;const dy point.y - circle.y;const dSquare dx * dx dy * dy;return dSquare circle.radius * circle.radius;
} 还有其他的通过 “射线法” 判断点是否在多边形等。
优点
1.某种意义上是 isPointInPath 的底层实现能做到平台无关
缺点
1.和 isPointInPath 方案一样需要遍历图形检测2.实现复杂简单图形还算简单但如果涉及到贝塞尔曲线等复杂形状实现就会很复杂且性能堪忧可以考虑用 isPointInPath3.如果使用了 transform因为要进行矩阵乘法性能会有所下降。结尾
总结一下canvas 的图形拾取有三种方案
1.isPointInPathcanvas 原生提供的 API能够知道点是否在路径内2.缓存 Canvas额外使用一个 canvas每次绘制图形都在这个 canvas 上绘制纯色图形记录映射关系。交互时通过 getImageData 得到颜色值然后根据映射关系找到对应图形3.计算机图形学算法自己写点是否在特定形状下的算法本质是 isPointInPath 的底层实现。但复杂图形碰撞检测实现起来困难。我是前端西瓜哥欢迎关注我学习更多知识。
最后
整理了一套《前端大厂面试宝典》包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法一共201道面试题并对每个问题作出了回答和解析。 有需要的小伙伴可以点击文末卡片领取这份文档无偿分享
部分文档展示
文章篇幅有限后面的内容就不一一展示了
有需要的小伙伴可以点下方卡片免费领取
