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

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是頂點(diǎn)數(shù)據(jù)的來源
        const { vertexs = [] } = this.props;
        // 封閉圖形最少需要三個(gè)頂點(diǎn)坐標(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() {
        // 畫布的寬高在我的實(shí)際場(chǎng)景下是涉及頂點(diǎn)信息識(shí)別地圖的尺寸，需比例尺與底圖的處理轉(zhuǎn)化，與本文想敘述的關(guān)系不大，先設(shè)為1000/800
        return <canvas id="containerCanvas" width={1000} height={800}/>
    }
}

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;
    // 由于頁面元素排序，或者滾動(dòng)條滾動(dòng)會(huì)對(duì)點(diǎn)擊位置產(chǎn)生影響，這邊通過上述函數(shù)作出補(bǔ)償，保證點(diǎn)擊位置不受滾動(dòng)條影響
    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是畫布高度，如果場(chǎng)景中是變量，也可以通過clientHeight去獲取container高度
    const clickInMapY = 800 - (mouseY - divToTop) - divScrollTop;
    this.isClickGraph({
        x: clickInMapX,
        y: clickInMapY
    });

}

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) {
            // 無交點(diǎn)
        } 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;
    }
}