diff --git "a/docs/guide/Fabric.js/\345\246\202\344\275\225\345\256\236\347\216\260\347\202\271\351\200\211\347\211\251\344\275\223.md" "b/docs/guide/Fabric.js/\345\246\202\344\275\225\345\256\236\347\216\260\347\202\271\351\200\211\347\211\251\344\275\223.md" index 6919248f..2e09d4f1 100644 --- "a/docs/guide/Fabric.js/\345\246\202\344\275\225\345\256\236\347\216\260\347\202\271\351\200\211\347\211\251\344\275\223.md" +++ "b/docs/guide/Fabric.js/\345\246\202\344\275\225\345\256\236\347\216\260\347\202\271\351\200\211\347\211\251\344\275\223.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