快捷導(dǎo)航

利用canvas判斷點與封閉圖形的包含關(guān)系

更新時間：2024年04月28日 08:54:31 作者：小小花生

今天在寫代碼的時候遇到一個場景,在一個封閉圖形頂點已知的情況下判斷點擊時是否點擊在圖形內(nèi)部,本文給大家介紹了如何利用canvas判斷點與封閉圖形的包含關(guān)系,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下

背景

今天在寫代碼的時候遇到一個場景，在一個封閉圖形頂點已知的情況下判斷點擊時是否點擊在圖形內(nèi)部?？赡茉谒惴ǘ擞胁簧俳鉀Q方案，但從一個前端的角度交互實現(xiàn)，第一反應(yīng)沒有很好的手段，于是借鑒封閉圖形的圍成線段與點之間的關(guān)系，通過射線與線段相交的點位數(shù)量來判斷是否點擊的位置是否在圖形內(nèi)。（如果在圖形內(nèi)部，給予高亮反饋）

圖形繪制

由于項目場景和圖片識別相關(guān)，前端獲取的數(shù)據(jù)是二維數(shù)組下的像素點，類似以下結(jié)構(gòu)：

const vertexs = [
    [100, 200],
    [150, 300],
    [240, 300],
    // ...
]

其中數(shù)組中的數(shù)據(jù)表示在x，y軸像素坐標(biāo)。首先利用canvas將其繪制在頁面上, 由于技術(shù)架構(gòu)當(dāng)時選用的React，這邊也先用React的語法糖表述

import React from 'react';
let canvas, ctx;

export default class Index extends React.Component() {
    componentDidMount():void {
        // 初始化畫布信息
        canvas = document.getElementById('containerCanvas');
        ctx = canvas.getContext('2d');
        // 繪制封閉圖形
        this.drawEnclosedGraph();
    }
    drawEnclosedGraph = () => {
        // 這里的vertexs是頂點數(shù)據(jù)的來源
        const { vertexs = [] } = this.props;
        // 封閉圖形最少需要三個頂點坐標(biāo)
        if(Array.isArray(vertexs) && vertexs.length > 2) {
            ctx.beginPath();
            ctx.moveTo(vertexs[0][0], vertexs[0][1]);
            for(let i = 1; i < vertexs.length; i++) {
                ctx.lineTo(vertexs[i][0], vertexs[i][1]);
            }
            ctx.closePath();
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'orange';
            ctx.stroke();
        } else {
            console.error('err');
        }
    }
    render() {
        // 畫布的寬高在我的實際場景下是涉及頂點信息識別地圖的尺寸，需比例尺與底圖的處理轉(zhuǎn)化，與本文想敘述的關(guān)系不大，先設(shè)為1000/800
        return <canvas id="containerCanvas" width={1000} height={800}/>
    }
}

通過上述 drawEnclosedGraph 函數(shù)可以將頂點坐標(biāo) vertexs 下的數(shù)據(jù)渲染在畫布中

事件監(jiān)聽

通過點擊事件的監(jiān)聽，來獲取點擊的坐標(biāo)位置 x，y值，因為我這邊的圖形操作較多，在實現(xiàn)上做了類似事件委托的方式去觸發(fā)這個click事件，方式是在canvas的上層添加了一個蒙層用于觸發(fā)點擊事件，獲取點擊位置后將x，y值向該canvas組件傳遞的方式，代碼如下

clickMask = (e) => {
    const getAbsLeft = (obj) => {
        let l = obj.offsetLeft;
        while(obj.offsetParent != null) {
            obj = obj.offsetParent;
            l += obj.offsetLeft;
        }
        return l;
    }
    const getAbsTop = (obj) => {
        let top = obj.offsetTop;
        while(obj.offsetParent != null) {
            obj = obj.offsetParent;
            top += obj.offsetTop;
        }
        return top;
    }
    const getAbsScrollD = (obj) => {
        let scrollToTop = obj.scrollTop;
        let scrollToLeft = obj.scrollLeft;
        while(obj.parentElement != null) {
            obj = obj.parentElement;
            scrollToTop += obj.scrollTop;
            scrollToLeft += obj.scrollLeft;
        }
        return {
            scrollToTop,
            scrollToLeft,
        };
    }
    const maskDiv = e.target;
    // 由于頁面元素排序，或者滾動條滾動會對點擊位置產(chǎn)生影響，這邊通過上述函數(shù)作出補償，保證點擊位置不受滾動條影響
    const scrollD = getAbsScrollD(maskDiv);
    const divToTop = getAbsTop(maskDiv);
    const divToLeft = getAbsLeft(maskDiv);
    const divScrollTop = scrollD['scrollToTop'] || 0;
    const divScrollLeft = scrollD['scrollToLeft'] || 0;
    const mouseX = e.clientX;
    const mouseY = e.clientY;
    const clickInMapX = mouseX - divToLeft + divScrollLeft;
    // 這里的800是畫布高度，如果場景中是變量，也可以通過clientHeight去獲取container高度
    const clickInMapY = 800 - (mouseY - divToTop) - divScrollTop;
    this.isClickGraph({
        x: clickInMapX,
        y: clickInMapY
    });

}

點擊結(jié)果判斷

通過成功獲取點擊的XY值后，我們可以開始判斷點擊位置是否在圖形內(nèi)部，這邊主要用的方式是將相鄰頂點坐標(biāo)轉(zhuǎn)化成一元一次函數(shù)的表述方式，再通過判斷點擊的位置向右延伸的射線與所有線段相交的數(shù)量是否為奇數(shù)來判斷點是否點擊位置在圖形內(nèi)部，代碼如下：

const transVertexs2Lines = () => {
    const { vertexs = [] } = this.props;
    if(Array.isArray(vertexs) && vertexs.length > 2) {
        const lines = vertexs.map((curP, idx) => {
            const nextP = (idx === vertexs.length - 1) ? vertexs[0] : vertexs[idx + 1];
            const x1 = curP[0],
                y1 = curP[1],
                x2 = nextP[0],
                y2 = nextP[1];
            const lineRange = {
                yMax: Math.max(y1, y2),
                xMax: Math.max(x1, x2),
                yMin: Math.min(y1, y2),
                xMin: Math.min(x1, x2),
            };
            if(x1 === x2) {
                return {
                    k: 'empty',
                    b: 'empty',
                    ...lineRange
                }
            } else if(y1 === y2) {
                return {
                    k: 0,
                    b: y1,
                    ...lineRange,
                }
            } else {
                const k =  ((y1 - y2) / (x1 - x2)).toFixed(2);
                const b = y1 - (k * x1);
                return {
                    k,
                    b,
                    ...lineRange,
                }
            }
        })
        this.setState({
            linesInfo: lines
        })
    } else {
        console.error('err');
    }
}
const isClickGraph = (clickLocation = {x: 0, y: 0}) => {
    const { linesInfo = [] } = this.state;
    let interSectionNum = 0;
    Array.isArray(linesInfo) && linesInfo.forEach(eachLine => {
        const {
            k,b,
            xMin,
            xMax,
            yMin,
            yMax,
        } = eachLine;
        if(k === 0) {
            // 無交點
        } else if(k === 'empty') {
            if(x < xMin && y < yMax && y > yMin) {
                interSectionNum++;
            }
        } else {
            if(y > yMin && y < yMax) {
                const secX = ((y - b) / k).toFixed(2);
                if(secX > x) {
                    interSectionNum++;
                }
            }
        }
    })
    if(interSectionNum > 0 && interSectionNum % 2 === 1) {
        return true;
    } else {
        return false;
    }
}

通過上述代碼中的 isClickGraph 函數(shù)可以判斷出點擊位置是否在圖形內(nèi)部，為了方便理解，下圖簡單解釋了該算法的丑陋圖片