JS前端使用canvas实现物体的点选示例

class Canvas {
    _initEvents() {
        // 首先肯定要添加事件监听啦
        Util.addListener(this.upperCanvasEl, 'mousemove', this._onMouseMove.bind(this));
    }
    _onMouseMove(e: MouseEvent) {
        // 如果是 hover 事件，我们只需要改变鼠标样式，并不会重新渲染
        const style = this.upperCanvasEl.style;
        // findTarget 的过程就是看鼠标有没有 hover 到某个物体上
        const target = this.findTarget(e);
        // 设置鼠标样式
        if (target) {
            this._setCursorFromEvent(e, target);
        } else {
            style.cursor = this.defaultCursor;
        }
    }
    /** 检测是否有物体在鼠标位置 */
    findTarget(e: MouseEvent): FabricObject {
        let target;
        // 从后往前遍历所有物体，判断鼠标点是否在物体包围盒内
        for (let i = this._objects.length; i--; ) {
            const object = this._objects[i];
            if (object && this.containsPoint(e, object)) {
                target = object;
                break;
            }
        }
        if (target) return target;
    }
}
class FabricObject {
    /**
     * 射线检测法：以鼠标坐标点为参照，水平向右做一条射线，求坐标点与多边形的交点个数
     * 如果和物体相交的个数为偶数点则点在物体外部；如果为奇数点则点在内部
     * 在 fabric 中的点选多边形其实就是点选矩形，所以针对矩形做了一些优化
     */
    _findCrossPoints(ex: number, ey: number, lines): number {
        let b1, // 射线的斜率
            b2, // 边的斜率
            a1,
            a2,
            xi, // 射线与边的交点 x
            // yi, // 射线与边的交点 y
            xcount = 0,
            iLine; // 当前边
        // 遍历包围盒的四条边
        for (let lineKey in lines) {
            iLine = lines[lineKey];
            // 优化1：如果边的两个端点的 y 值都小于鼠标点的 y 值，则跳过
            if (iLine.o.y < ey && iLine.d.y < ey) continue;
            // 优化2：如果边的两个端点的 y 值都大于等于鼠标点的 y 值，则跳过
            if (iLine.o.y >= ey && iLine.d.y >= ey) continue;
            // 优化3：如果边是一条垂线
            if (iLine.o.x === iLine.d.x && iLine.o.x >= ex) {
                xi = iLine.o.x;
                // yi = ey;
            } else {
                // 执行到这里就是一条普通斜线段了
                // 用 y=kx+b 简单算下射线与边的交点即可
                b1 = 0;
                b2 = (iLine.d.y - iLine.o.y) / (iLine.d.x - iLine.o.x);
                a1 = ey - b1 * ex;
                a2 = iLine.o.y - b2 * iLine.o.x;
                xi = -(a1 - a2) / (b1 - b2);
                // yi = a1 + b1 * xi;
            }
            // 只需要计数 xi >= ex 的情况
            if (xi >= ex) {
                xcount += 1;
            }
            // 优化4：因为 fabric 中的点选只需要用到矩形，所以根据矩形的特质，顶多只有两个交点，于是就可以提前结束循环
            if (xcount === 2) {
                break;
            }
        }
        return xcount;
    }
}

export interface Coords {
    /** 左上控制点 */
    tl: Coord;
    /** 右上控制点 */
    tr: Coord;
    /** 右下控制点 */
    br: Coord;
    /** 左下控制点 */
    bl: Coord;
    /** 左中控制点 */
    ml: Coord;
    /** 上中控制点 */
    mt: Coord;
    /** 右中控制点 */
    mr: Coord;
    /** 下中控制点 */
    mb: Coord;
    /** 上中旋转控制点 */
    mtr: Coord;
}
class Canvas {
    _initObject(obj: FabricObject) {
        obj.setCoords(); // 记录控制点位置和大小，其实就是各个矩形的顶点坐标
        obj.canvas = this;
    }
}

class Canvas {
    /**
     * 用缓冲层判断物体是否透明，目前默认都是不透明，可以加一些参数属性，比如允许有几个像素的误差
     * @param {FabricObject} target 物体
     * @param {number} x 鼠标的 x 值
     * @param {number} y 鼠标的 y 值
     * @param {number} tolerance 允许鼠标的误差范围
     * @returns
     */
    _isTargetTransparent(target: FabricObject, x: number, y: number, tolerance: number = 0) {
        // 1、在缓冲层绘制物体
        // 2、通过 getImageData 获取鼠标位置的像素数据信息
        // 3、遍历像素数据，如果找到一个 rgba 中的 a 的值 > 0 就说明至少有一个颜色，亦即不透明，退出循环
        // 4、清空 getImageData 变量，并清除缓冲层画布
        let cacheContext = this.contextCache;
        this._draw(cacheContext, target);
        if (tolerance > 0) { // 如果允许误差
            if (x > tolerance) {
                x -= tolerance;
            } else {
                x = 0;
            }
            if (y > tolerance) {
                y -= tolerance;
            } else {
                y = 0;
            }
        }
        let isTransparent = true;
        let imageData = cacheContext.getImageData(x, y, tolerance * 2 || 1, tolerance * 2 || 1);
        for (let i = 3; i < imageData.data.length; i += 4) { // 只要看第四项透明度即可
            let temp = imageData.data[i];
            isTransparent = temp <= 0;
            if (isTransparent === false) break; // 找到一个颜色就停止
        }
        imageData = null;
        this.clearContext(cacheContext);
        return isTransparent;
    }
}