drawer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Polygon-Drawer</title>
</head>
<body>
    <div>
        <div>
            <span>
                <h1>Polygon-Drawer</h1>
            </span>
            <span>
                <input type="button" value="Yellow" id="yellow"/>
                <input type="button" value="Blue" id="blue"/>
                <input type="button" value="Black"  id="black"/>
                <input type="button" value="ClearCanvas" id = 'clearbtn'/>
                <input type="button" value="Dashed" id="dsh"/>
                <input type="range" min="1" max="10" id="linewidth" step="1" value="1"/>
            </span>
        </div>
    </div>
    <style type="text/css">
        h1{
            display: inline;
            color :#000000;
            margin-left: 20px;
            font-family: "Adobe 黑体 Std R";
        }
        #clearbtn{
        }
        #yellow{
            background-color: yellow;
            border:1px solid black;
        }
        #blue{
            background-color: blue;
            border:1px solid black;
        }
        #black{
            background-color: white;
            border: 3px dashed red;
        }
        #dsh{
            background-color: white;
            border: 1px solid black;
        }
        #linewidth{
        }
        .section {
            border: 1px solid black;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
        }
        .canv {
            display: flex;
            flex-direction: row;
            align-items: start;
            margin-top: 20px;
        }
        .canv.section{
            margin-left: 50px;
        }
    </style>
    <div class="canv">
        <canvas  width="800px" height ="600px"></canvas>
        <span class="section" id="sec"></span>
    </div>
    <script>
        //清空画布按钮相关设置
        let btn = document.getElementById('clearbtn');
        btn.onclick = function(event) {
            pointscurrent.length=0;
            previewpoint.length=0;
            restartcheckpoint=[0];
            init();
            let sec = document.getElementById("sec");
            sec.children = null;
            setTimeout(function (){alert("canvas cleared!")},100);
            btn.style.backgroundColor= 'yellow';
            btn.style.backgroundColor = '';
            btn.style.border = "3px dashed blue";
        }
        btn.onmouseenter = function(event) {
            btn.style.backgroundColor = 'yellow';
        }

        //画线颜色变动按钮相关设置
        let yellowlinebtn = document.getElementById('yellow');
        yellowlinebtn.onclick = function(event) {
            ctx.strokeStyle = "yellow";
            blacklinebtn.style.border = "1px solid black";
            bluelinebtn.style.border = "1px solid black";
            yellowlinebtn.style.backgroundColor = '';
            yellowlinebtn.style.border = "3px dashed red";
        }

        let bluelinebtn = document.getElementById('blue');
        bluelinebtn.onclick = function(event) {
            ctx.strokeStyle = "blue";
            blacklinebtn.style.border = "1px solid black";
            yellowlinebtn.style.border = "1px solid black";
            bluelinebtn.style.backgroundColor = '';
            bluelinebtn.style.border = "3px dashed red";
        }

        let blacklinebtn = document.getElementById('black');
        blacklinebtn.onclick = function(event) {
            ctx.strokeStyle = "black";
            yellowlinebtn.style.border = "1px solid black";
            bluelinebtn.style.border = "1px solid black";
            blacklinebtn.style.backgroundColor = '';
            blacklinebtn.style.border = "3px dashed red";
        }

        let dshbtn = document.getElementById('dsh');
        dshbtn.onclick = function(event){
            if(dshbtn.getAttribute('value')=='Dashed'){
                ctx.setLineDash([8, 8]);
                dshbtn.setAttribute('value','Normal');
            }
            else{
                ctx.setLineDash([]);
                dshbtn.setAttribute('value','Dashed');
            }
        }

        let widthresult = document.getElementById('linewidth');
        widthresult.onchange = function(event){
            let widthget = widthresult.value;
            ctx.lineWidth = parseInt(widthget);
        }

        let canvas = document.querySelector("canvas");
        pointscurrent = [];//[[x0,y0],[x1,y1]]
        previewpoint = [];
        restartcheckpoint = [0];//记录每个新的多边形的起始点
        let currentlooker=0;
        let stopdraw = false;
        let restartsignal = true;//preview重新有效的signal
        let validdraw = true;//是否是一次正确的绘画（不相交，不在别的多边形里）
        //事件处理程序管理工具
        let EventUtil = {
            addHandler: function(element,type,handler) {
                if (element.addEventListener){
                    element.addEventListener(type, handler, false);
                }else{
                    element["on"+type]=handler;
                }
            },
            removeHandler: function(element,type,handler) {
                if (element.removeEventListener){
                    element.removeEventListener(type, handler, false);
                }else{
                    element["on"+type]=null;
                }
            }
        }
        EventUtil.addHandler(canvas,"mousemove",onMouseMove);
        EventUtil.addHandler(canvas,"mousedown",onMouseDown);
        EventUtil.addHandler(canvas, "contextmenu", (evt) => evt.preventDefault());
        EventUtil.addHandler(canvas,"load",onLoad);

        function onLoad(event) {
            console.log('canvas successfully loaded');
        }


        function init() {//reset
            currentlooker=0;
            stopdraw = false;
            restartsignal = true;
            validdraw=true;
        }
        /**
         * mouseup做一个preview
         * @param event
         */
        function onMouseMove(event) {
            validdraw=true;
            if(pointscurrent.length>=1&&restartsignal) {
                previewpoint[0]=event.offsetX;
                previewpoint[1]=event.offsetY;
                let magneted = magnettofirst(previewpoint[0],previewpoint[1])
                if(magneted){//如果吸附了则preview吸附的情况
                    previewpoint[0]=pointscurrent[currentlooker][0];
                    previewpoint[1]=pointscurrent[currentlooker][1];
                }
                if(pointscurrent.length>=3) {
                    for (let x = currentlooker; x < pointscurrent.length - 2; x++) {
                        if(magneted){
                            if(x==currentlooker){
                                continue;
                            }
                            if (isIntersect(pointscurrent[x], pointscurrent[x + 1], pointscurrent[pointscurrent.length - 1], previewpoint)) {
                                validdraw = false;
                                console.log("scene 2");
                                break;
                            }
                        }
                        else {
                            if ((currentlooker!=pointscurrent.length)&&isIntersect(pointscurrent[x], pointscurrent[x + 1], pointscurrent[pointscurrent.length - 1], previewpoint)) {
                                validdraw = false;
                                console.log("scene 1");
                                console.log(pointscurrent);
                                console.log(previewpoint);
                                break;
                            }
                        }
                    }
                }
                if(previewpoint[0]==pointscurrent[pointscurrent.length-1][0]
                &&previewpoint[1]==pointscurrent[pointscurrent.length-1][1]){
                    validdraw=true;
                }
            }
        }

        function onMouseDown(event) {
            if(event.button == 0) {
                if(stopdraw){
                    stopdraw = false;
                }
                if(pointscurrent.length!=currentlooker&&magnettofirst(event.offsetX,event.offsetY)&&validdraw){
                    pointscurrent.push([pointscurrent[currentlooker][0],pointscurrent[currentlooker][1]]);//push进去终止点（也是初始点）
                    currentlooker = pointscurrent.length;
                    restartcheckpoint.push(currentlooker);
                    stopdraw = true;
                    //在右边的section加button
                    let sec = document.getElementById("sec");
                    let newNode = document.createElement("input");
                             //newNode.nodeName = 'input';
                    newNode.setAttribute('type','button');
                    newNode.setAttribute('value',"Polygon"+(restartcheckpoint.length-1)+"");
                    newNode.onclick = function(event){
                        
                    }
                    sec.appendChild(newNode);
                    //
                }
                else {
                    restartsignal=true;//重新加点，preview继续
                    if(validdraw) {
                        pointscurrent.push([event.offsetX, event.offsetY]);
                    }
                }
            }
            //一旦闭合
            else if(event.button == 2){
                pointscurrent.pop();
                if(pointscurrent.length==currentlooker-1){
                    restartcheckpoint.pop();
                    currentlooker = restartcheckpoint[restartcheckpoint.length-1];//checked ok
                    let sec = document.getElementById("sec");
                    sec.removeChild(sec.lastChild);
                }
                stopdraw = false;//开启preview
                if(pointscurrent.length<=1){
                    pointscurrent = [];//[[x0,y0],[x1,y1]]
                    previewpoint = [];
                    restartcheckpoint = [0];
                    init();
                }
                if(pointscurrent.length==currentlooker) {//如果刚好画完一个多边形，关闭preview
                    stopdraw=true;
                }
            }
        }

        let ctx = canvas.getContext('2d');
        ctx.strokeStyle = "black";
        //ctx.fillStyle="#0000ff";
        //ctx.setLineDash([8, 8]);

        //判断是否能吸附到第一个点上，返回一个boolean值
        function magnettofirst(x,y){
            if(pointscurrent.length>=3){
                if(!pointscurrent[currentlooker]){
                }
                else if((x-pointscurrent[currentlooker][0])**2+(y-pointscurrent[currentlooker][1])**2<30){
                    return true;
                }
            }
            return false;
        }

        //向量叉乘
        function crossproduct(x1,y1,x2,y2){
            return x1*y2-y1*x2;
        }

        //向量叉乘判断是否相交
        function isIntersect(p1,p2,p3,p4){//line1:p1-p2 line2:p3-p4
            let vec_ac = [p3[0]-p1[0],p3[1]-p1[1]];
            let vec_ad = [p4[0]-p1[0],p4[1]-p1[1]];
            let vec_ab = [p2[0]-p1[0],p2[1]-p1[1]];
            let vec_da = [p1[0]-p4[0],p1[1]-p4[1]];
            let vec_db = [p2[0]-p4[0],p2[1]-p4[1]];
            let vec_dc = [p3[0]-p4[0],p3[1]-p4[1]];
            let cross_ac_ab = crossproduct(vec_ac[0],vec_ac[1],vec_ab[0],vec_ab[1]);
            let cross_ad_ab = crossproduct(vec_ad[0],vec_ad[1],vec_ab[0],vec_ab[1]);
            let cross_da_dc = crossproduct(vec_da[0],vec_da[1],vec_dc[0],vec_dc[1]);
            let cross_db_dc = crossproduct(vec_db[0],vec_db[1],vec_dc[0],vec_dc[1]);
            return (cross_ac_ab*cross_ad_ab<=0)&&(cross_da_dc*cross_db_dc<=0);
        }
        /**
         *
         */
        function draw() {
            if(pointscurrent.length<1){
                ctx.clearRect(0,0,800,600);
            }
            else {
                ctx.clearRect(0,0,800,600);
                ctx.beginPath();
                ctx.moveTo(pointscurrent[0][0],pointscurrent[0][1]);
                for(let x = 1; x<pointscurrent.length; x++) {
                    if(restartcheckpoint.indexOf(x)!==-1){
                        ctx.moveTo(pointscurrent[x][0],pointscurrent[x][1]);
                    }
                    else {
                        ctx.lineTo(pointscurrent[x][0], pointscurrent[x][1]);
                    }
                }
                if(!stopdraw) {//画preview点
                    ctx.lineTo(previewpoint[0], previewpoint[1]);
                }
                ctx.stroke();
                ctx.closePath();
            }
        }

        function animate() {
            draw();
            requestAnimationFrame(animate);
        }

        animate();

    </script>
    <style type = "text/css">
        canvas {
            border: 1px solid black;
        }
       </style >
</body>
</html>