二维码
搜索 ×

第六章 图形拾取交互操作

  • 作者：Jackey Hoo
  • 更新时间：2024年06月15日
  • 阅读量：0
  • 收藏数：0
文章标签： 图形交互操作 拾取 内置API法 几何法 取色法 AnyGraph图形开发引擎

本章摘要

在图形系统中，拾取操作是连接用户与图形的关键。本章节深入解析了拾取技术的核心，包括内置API法、几何法和取色法等，并展示了如何通过anyGraph图形开发引擎高效实现。从Canvas底层逻辑出发，揭示了拾取操作如何精准识别用户所选图形对象。通过本章学习，您将掌握拾取技术的精髓，并能灵活应用于实际项目，提升图形开发效率。

图形系统开发实战课程 - 进阶篇 第六章 图形拾取交互操作

第六章 图形拾取交互操作

  在图形系统中，拾取是指从屏幕上选择一个图形对象的过程。这个过程通常是通过鼠标或触摸屏等输入设备来实现的。当用户将鼠标移动到图形对象上时，图形系统会检测到鼠标的位置，然后根据鼠标位置计算该位置上的图形对象，从而实现了拾取操作，这个过程也称之为‘碰撞检测’。

  由于 Canvas 不会保存绘制图形的信息，一旦绘制完成用户在浏览器中得到的是一张图片，用户在图片上点击时时不能直接获取到对应的图形对象，所以在绘图时需要缓存已经绘制的图形对象，碰撞检测有以下几种方案：

  • 内置API法：通过Canvas渲染上下文对象内置的 API，实现拾取图形
  • 几何法：通过几何运算，判断鼠标点击位置附近的对象，实现拾取图形
  • 取色法：通过获取点击位置的颜色值，实现图形拾取

1 内置API法

  Canvas 渲染上下文对象提供了 isPointInPath() 可以判断一个坐标点是否在路径内, 提供了 isPointInStroke() 判断一个坐标点是否在描边的边上。

  我们在 图形系统开发实战课程-基础篇 中曾经讲述了Canvas路径的用法，路径可完成各种常见基本几何图形，和贝塞尔曲线的绘制，下图是 anyGraph内置的一些点的类型。

运行效果

  上面这些点类型均是通过路径绘制出来的，从这张图可以看出通过路径我们不仅仅可以绘制常见的几何图形，如三角形、矩形、圆形、多边形，还可以绘制诸如黑桃、红桃、梅花、花朵等复杂的带有曲线的图形。

  如今 Canvas 渲染上下文对象更是提供了 isPointInPath() 可以判断一个坐标点是否在路径内, 提供了 isPointInStroke() 判断一个坐标点是否在描边的边上。利用这两个API我们可以实现几乎所有类型的图形对象拾取。

  下面这个示例是在上一篇文章 图形交互：图形交互操作:平移和缩放 中的示例基础上做出了一些改变，在 redraw() 方法中增加了 point参数，该参数为鼠标当前的位置。当鼠标移动到某个方块内的时候，即 isPointInPath()返回true，该方块将会显示为红颜色；当鼠标移动到某个方块边缘的时候，即 isPointInStroke()返回true，该方块将会显示为黄颜色。 运行效果如下图所示：

运行效果

  这个示例中采用了 Canvas 渲染上下文对象提供的 isPointInPath() 和 isPointInStroke() 方法判断点是否在路径中或边框之上。其源代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
// 绘图
function redraw(point) {
    // 清除已有内容
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制七巧板
    tangram.forEach(shape => {
        // 坐标转换
        let pixel = [];
        shape.coords.forEach(coord => {
            pixel.push(convert(coord, graphExtent, canvasExtent));
        })

        // 定义路径
        ctx.beginPath();
        for (let i = 0, ii = pixel.length; i < ii; i += 1) {
            if (i === 0) {
                ctx.moveTo(pixel[i][0], pixel[i][1]);
            } else {
                ctx.lineTo(pixel[i][0], pixel[i][1]);
            }
        }
        ctx.closePath();

        // 定义渲染颜色值
        let fillColor = shape.style.fillColor;
        let strokeColor = shape.style.color; 

        // 如果Point参数为空，则无需进行碰撞检测
        if (point != null && point.length == 2) {
            // 判断点是否在路径内， 如果在路径内，则将颜色改为红色
            if (ctx.isPointInPath(point[0], point[1])) {
                fillColor = "red";
                strokeColor = "red"
            } 
            // 判断点是否在路径的描边线上， 如果在路径内，则将颜色改为金色
            else {
                if (ctx.isPointInStroke(point[0], point[1])) {
                    fillColor = "gold";
                    strokeColor = "gold";
                }
            }
        }

        // 绘制
        ctx.save();
        ctx.strokeStyle = strokeColor;
        ctx.fillStyle = fillColor;
        ctx.fill();
        ctx.stroke();
        ctx.restore();
    })
}

使用该方法需要注意:

  1. 我们在 第四章 图形基本形状 讲述的图形对象类型包括：点、线、多边形、图像、文本、圆等，其中文本类型和图像类型无法通过该方法判断是否与点碰撞。
  2. 如果点存在大小时，该方法仅能判断其中心是否在路径内，而无法判断点的边缘是否在路境内。
  3. 在使用 isPointInPath(x, y) 和 isPointInStroke(x, y) 方法判断点是否在路径中或边框之上的时候，这个点(x,y)坐标是指画布中的像素坐标。如果 画布在绘制路径之前进行了变形操作，参数依旧需传入画布变形前的像素坐标值。

2 几何法

  几何法是指根据点的位置，采用几何算法判断该位置是否存在图形对象。我们在 第四章 图形基本形状 讲述的图形对象类型包括：点、线、矩形、多边形、图像、文本、圆等等。使用几何法进行判断时，需要分别对这些类型进行判断。

2.1 点与点

判断规则：

  判断点与点是否相交，最简单的判断方法是两个点的坐标是否相等，如果相等则判断这两个点相交，而实际绘图的点是有大小的，而且由于浮点误差方面的原因，不能简单判断点与点是否相等，而因改为计算点与点之间的距离，如果这个距离小于容差值，则判断这两个点相交。

实现代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
 * 判断点与点是否碰撞
 * @param {Point} p1 {x, y}
 * @param {Point} p2 {x, y}
 * @param {float} buffer 
 * @returns boolean
 */
function pointPoint(point1, point2, buffer) {
    if (buffer === undefined) {
        buffer = 0.1;
    }
    if (CoordUtil.dist([point1.x, point1.y], [point2.x, point2.y]) <= buffer) {
        return true;
    }
    return false;
}

运行效果：

运行效果

2.2 点与圆

判断规则：

  判断点与圆是否相交的规则和判断点与点是否相交的规则类似，通过计算点与圆心之间的距离，如果距离小于等于圆的半径，则判断点在圆内，否则判断点不在圆内。

实现代码：

1
2
3
4
5
6
7
8
9
10
11
12
/**
 * 判断点与圆是否碰撞
 * @param {Point} p {x, y}
 * @param {Circle} c {cx, cy, radius}
 * @returns boolean
 */
function pointCircle(point, circle) {
    if (CoordUtil.dist([point.x, point.y], [circle.cx, circle.cy]) <= circle.radius) {
        return true;
    }
    return false;
};

运行效果：

运行效果

2.3 点与线

判断规则：

  判断点与线是否相交的规则： 分别计算点与线的两个端点之间的距离，如果距离之和等于线的长度，则可判定点与线相交。

实现代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/**
 * 判断点与线段是否碰撞
 * @param {*} point {x, y}
 * @param {*} line {x1, y1, x2, y2}
 * @param {*} buffer 容差
 * @returns boolean
 */
function pointLine(point, line, buffer) {
    if (buffer === undefined) {
        buffer = 0.1;
    }

    // 计算点与线段的两个端点之间的距离
    let d1 = Coordinate.dist([point.x, point.y], [line.x1, line.y1]);
    let d2 = Coordinate.dist([point.x, point.y], [line.x2, line.y2]);

    // 计算线段长度
    let lineLen = Coordinate.dist([line.x1, line.y1], [line.x2, line.y2]);

    // 如果点与线段的两个端点之间的距离之和等于线的长度，则可判定点与线相交
    if (d1 + d2 >= lineLen - buffer && d1 + d2 <= lineLen + buffer) {
        return true;
    }
    return false;
}

运行效果：

运行效果

折线通常包含了多个线段，点与折线是否相交的判断规则是以 点与线段是否相交为基础，逐一判断点与每段线的关系。点只要与其中任何一段线相交，即可判段点与折线相交。

2.4 点与矩形

判断规则：

  判断点与矩形是否相交的规则：当点的X坐标大于等于矩形的起点X坐标，小于等于矩形的起点X坐标加上矩形宽度，且点的Y坐标大于等于矩形的起点Y坐标，小于等于矩形的起点Y坐标加上矩形高度时，判断点在矩形内，否则判断点不在矩形内。

实现代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
 * 判断点与矩形是否碰撞
 * @param {*} point {x, y}
 * @param {*} rect {x, y, width, height}
 * @returns boolean
 */
function pointRect(point, rect) {
    if (point.x >= rect.x && point.x <= rect.x + rect.width &&    // X坐标大于等于矩形的起点X坐标，小于等于矩形的起点X坐标加上矩形宽度
        point.y >= rect.y && point.y <= rect.y + rect.height) {   // Y坐标大于等于矩形的起点Y坐标，小于等于矩形的起点Y坐标加上矩形高度
        return true;
    }
    return false;
}

运行效果：

运行效果

2.5 点与文本

判断规则：

  文本绘制的结果是一个矩形区域，因此其判断点与文本是否相交的方法与矩形一样。需要注意的是在绘制文本的时候 水平对齐方式 和 垂直对齐方式 对文本的绘制位置有很大影响。下面的代码可计算绘制文本时的矩形位置和大小：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/**
 * 返回对象边界
 * @param {Boolean} useCoord 为true时返回坐标Bound，为false时返回屏幕像素Bound
 * @returns {Extent} extent
 */
getBBox(useCoord = true) {
    let coord = useCoord === false ? this.getPixel() : this.getCoord();

    // 矢量字体才考虑宽度和高度对BBOX的影响
    let width = this._renderWidth;   // 渲染文本时记录的文本宽度，可通过ctx.measureText(this.text).width获取
    let height = this._renderHeight;  // 通常为字体大小

    // 根据字体水平对齐方式确定文本的bbox
    let left, top;
    if (this.style.textAlign == "center" || this.style.textAlign == "middle") {
        left = coord[0][0] - width / 2;
    } else if (this.style.textAlign == "right") {
        left = coord[0][0] - width;
    } else {
        left = coord[0][0]
    }
    // 属性值有 top(文本块的顶部), hanging(悬挂基线), middle(文本块的中间), alphabetic(标准的字母基线), ideographic(表意字基线), bottom(文本块的底部)
    if (this.style.textBaseline == "middle") {
        top = coord[0][1] - height / 2;
    } else if (this.style.textBaseline == "bottom" || this.style.textBaseline == "ideographic") {
        top = coord[0][1] - height;
    } else if (this.style.textBaseline == "alphabetic") {
        top = coord[0][1] - height;;
    } else {    // top,  "hanging"
        top = coord[0][1];
    }
    return [left, top, left + width, top + height];
}

运行效果：

运行效果

2.6 点与图像

判断规则：

  图像绘制的结果是也一个矩形区域，因此其判断点与文本是否相交的方法与矩形一样，且其Bounding Box的计算较为简单，这里就不展开叙述了。

2.7 点与多边形

  判断点与多边形是否相交的规则是：判断这个点和多边形每条边的位置关系。在一个多条边围成的区域，点在一条边的右侧，这个点可能在多边形内部，也可能在外部。但是如果判断完点和每一条边的左右关系，如果在右边的边是奇数个，那么点就在内部，如果是偶数，那么点就在外部。通过这个规则，就可以判断点是否包含在多边形内。

来源：https://blog.csdn.net/tom_221x/article/details/51861129

  那么，如何判断一个点和一条边的位置关系？ 这里需要用到一个向量叉积公式。比如，点(x, y)，与线 (x1, y1) (x2, y2) 的位置关系。我们先求出两个向量 (x - x1, y - y1) 和 (x2 - x1, y2 - y1)。对这两个向量做叉积的结果是 (x - x1) * (y2 - y1) - (y - y1) * (x2 - x1)， 如果结果是0，那么点在线上。如果结果大于0，点在线的右边。如果结果小于0，点在线的左边。 利用这个公式，我们就能判断点是否在多边形的内部还是外部。

实现代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/**
 * 判断点与多边形是否碰撞
 * @param {*} point {x, y}
 * @param {*} polygon [[x,y],[x,y],[x,y]]
 * @returns 
 */
function pointPoly(point, polygon) {
    let collision = false;

    // 遍历多边形的每一条边
    let next = 0;
    for (let current = 0; current < polygon.length; current++) {

        // 当前顶点
        let vc = polygon[current];
        // 下一个顶点
        next = (current === polygon.length - 1 ? 0 : current + 1);
        let vn = polygon[next]; 

        // 判断一个点和一条边(vc,vn)的位置关系, 如果两个检查都为 true，则切换到其相反的值
        if ((vc[1] >= point.y && vn[1] < point.y) || (vc[1] < point.y && vn[1] >= point.y)) {
            // 求出两个向量(x - x1, y - y1) 和 (x2 - x1, y2 - y1), 
            // 并对两个向量做叉积的 (x - x1) * (y2 - y1) - (y - y1) * (x2 - x1)
            if ((point.x - vc[0]) < (point.y - vc[1]) * (vn[0] - vc[0]) / (vn[1] - vc[1])) {
                // 如果结果为零: 表示点在线上
                // 如果结果为正: 表示点在线的右边
                // 如果结果为负: 表示点在线的左边
                collision = !collision;
            }
        }
    }
    return collision;
}

运行效果：

运行效果

点与多边形是否相交的几何判断方法很重要，2.4节中讲述了点与矩形的判断方法，那种方法在矩形旋转后，就无法判断了。而对于旋转的矩形可将计算矩形旋转后各个角的坐标值，然后将其转换为多边形，采用点与多边形是否相交的办法进行判断。

3. 取色法

  取色法的核心思想是在绘制图像的同时，在另一个Canvas中绘制一份与当前图形中各个对象坐标位置和大小均相同，且使用独一无二颜色绘制的图形（缓存图形），同时还需保存一份图形颜色与图形对象的对照表。利用 Canvas 渲染上下文对象提供的像素操作API，在进行拾取操作时，从缓存图形中根据点的位置获取相应的颜色信息，并从颜色对照表中取出对应的图形对象。

  下图展示了取色法的核心思想，图形的左侧是要绘制的图形，图形的右侧是缓存的图形，这份缓存图形中中的对象位置和大小和原图完全一样，而颜色却是随机产生的独一无二的颜色。使用 Canvas 渲染上下文对象的 ctx.getImageData(x, y, 1, 1) 方法，可取的指定位置那个像素的颜色，最后通过颜色与图形对象对照表即可取得拾取的对象。

运行效果

  ctx.getImageData() 返回的数据中包含了 data 属性，该属性属于Uint8ClampedArray类型，存储了像素数据，每个像素包含了4个byte的值，分别是该像素对应的红，绿，蓝和透明值(r,g,b,a)。下图显示了imageData中data的数组结构，每个像素均占了data数组中的4个元素，第一个像素存储在data数组的0至3个元素，第二个像素存储在data数组的4至7个元素。

效果

  我们这里仅拾取了1个像素值，因此该数组仅包含4个元素。拾取指定位置颜色的代码如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
 * 获取图形中指定位置的颜色值
 * @param {Array} point 
 * @returns color
 */
function getColor(point) {
    if (this._hitContext) {
        let imageData = this._hitContext.getImageData(point[0], point[1], 1, 1);
        if (imageData.data[0] === 0 && imageData.data[1] === 0 && imageData.data[2] === 0 && imageData.data[3] === 0) {
            return null;
        } else {
            return new Color(imageData.data[0], imageData.data[1], imageData.data[2], imageData.data[3]).toHex();
        }
    } else {
        return null;
    }
}

  对于常见的几何图形，使用这个思路直接在缓存的图形中绘制即可。对于文本和图像，则需要将其转换为矩形，通过矩形的方式绘制在缓存的图形中。下图演示了使用 取色法 从一张包含了各类图形对象的图形中拾取对象的效果。

效果

4. 方案比较

4.1 内置API法

优点：

  • 开发简单；
  • 识别率高；

缺点：

  • 拾取效率低，拾取的时候定义路径导致拾取效率低；
  • 无法拾取非路径绘制的图形，例如文本和图像；
  • 无法实现根据矩形或多边形进行拾取；

4.2 几何法

优点：

  • 扩展性强；
  • 识别率高；

缺点：

  • 开发复杂，需针对各种类型的图形分别实现其算法；
  • 拾取效率一般；

4.3 取色法

优点：

  • 开发简单；
  • 拾取效率高；

缺点：

  • 渲染开销加倍，每次图形渲染时间为内置API法或几何法的两倍；
  • 当图形重叠时，仅能识别到最上层的图形对象；
  • 无法实现根据矩形或多边形进行拾取；

5. anyGraph 的实现

anyGraph 实现了 几何法 和 取色法 两种图形对象的拾取方案。

5.1 取色法

Graph 对象在初始化时可通过 hitGetColor 选项，指定是否启用‘取色法拾取方案’。 该参数的缺省值为 false。

下面这段代码启用了‘取色法拾取方案’。

1
2
3
4
5
// graph对象
let graph = new Graph({
    "target": "graphWrapper",
    "hitGetColor": true
});

下面这段代码演示了取色法的碰撞检测：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 取色法进行碰撞检测
function _collideCheck(coord) {
    // 显示颜色值
    let hitColor = graph.getRenderer().getColor(coord);
    if (hitColor) {
        if (graph.viewGeomList.has(hitColor)) {
            let clone = graph.viewGeomList.get(hitColor).clone();

            // 在浮动层突出显示拾取的对象
            clone.setStyle({ "fillColor": "gold", "color": "gold" });
            overLayer.getSource().add(clone);
            return true;
        }
    }
    return false;
}

5.2 几何法

  anyGraph 图形基本形状类 Geometry对象提供了 contain(point)方法，各子类均已实现了该方法，通过该方法可判断图形对象与点的位置关系。

  下面这段代码演示了几何法的碰撞检测：

1
2
3
4
5
6
7
8
9
10
11
12
13
// 逐一与数据层中的对象进行碰撞检测
function _collideCheck(coord) {
    let datas = layer.getSource().getData();
    for (let i = 0, len = datas.length; i < len; i++) {
        if (datas[i].contain([coord[0], coord[1]])) {
            let clone = datas[i].clone();
            clone.setStyle({ "fillColor": "#FF2020", "color": "#FF2020", "lineWidth":4 });
            overLayer.getSource().add(clone);
            return true;
        }
    }
    return false;
}

  “图形系统实战开发-进阶篇 第六章 图形拾取交互操作” 的内容讲解到这里就结束了，如果觉得对你有帮助有收获，可以关注我们的官方账号，持续关注更多精彩内容。

本文为“图形开发学院”（www.graphanywhere.com）网站原创文章，遵循CC BY-NC-ND 4.0版权协议，商业转载请联系作者获得授权，非商业转载请附上原文出处链接及本声明。

历史发布版本

第1版发布时间：2024-02-01
第2版发布时间：2024-06-15

社交媒体频道

知识分享频道：CSDN-图形开发学院

图形系统开发实战课程：进阶篇（上）——6.图形交互操作：拾取-CSDN博客

发布时间：2024-02-27

问答咨询频道：知乎-图形开发学院

图形系统开发实战课程：进阶篇（上）——6.图形交互操作：拾取-知乎

发布时间：2024-02-23

推荐教程