feat: ✨ 修改文档

docs/guide/Fabric.js/如何实现点选物体.md

@@ -85,11 +85,9 @@
   xi = -(a1 - a2) / (b1 - b2); // 求俩个直接的交点，即求出交点的 x 坐标 即 xi = a1 - a2 / b2;
 ```
 
-
-
 ## 点在多边形内的其他方法
 
-1. 用 canvas 自身的 api isPointInPath
+1. 用 canvas 自身的 api isPointInPath 传送门 👉: https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/isPointInPath
 
 2. 将多边形切割成多个三角形，然后判断点是否在某个三角形内部
 
@@ -101,9 +99,22 @@
 ## 优化
 1 记录最近的这个物体，下次再次判断这个物体。
 2 判断是否是透明区域
+  - 通过 AABB 包围盒判断会有空白区域，因此当我们判断命中包围盒时，可以在通过当前坐标点获取周围的像素，通过 `ctx.getImageData`可以获取当前 ctx Canvas 图层的图像数据，再进而判断是否都是透明度为 0 的像素。如果是则为空白区域、否则命中🎯。
+
+```js
+let isTransparent = false; // 判断是透明度
+const imageData = ctx.getImageData(x, y, width, height);
+
+for (let i = 3; i < imageData.data.length; i += 4) { // 只要看第四项透明度即可
+    let temp = imageData.data[i];
+    isTransparent = temp <= 0;
+    if (isTransparent === false) break; // 找到一个颜色就停止
+}
+```
 
 
 ## 参考
 
 - https://developer.mozilla.org/zh-CN/docs/Games/Techniques/3D_collision_detection
 - https://kenshin.tech/page/2/
+- https://juejin.cn/post/7111245657557434398