Question

我想用纯Javascript语言通过鼠标处理程序在画布上绘制很多多边形。我的项目是here。在我的项目中：

我想完成绘制并在双击时创建一个多边形。（我可以）。通过一次单击事件开始绘制以创建新多边形。（我不能）。

当我开始新绘制时，在制作前向多边形添加新点。谢谢。

我的html文件在这里：

<html>
<head>
    <title>Orhan ALTIN</title>
    <meta charset="utf-8">
    <style>
        canvas{
border: 5px solid;
border-color: rgb(255,173,50);
    }
    </style> 
</head>
 <body>
    <canvas id="tuval" width="500" height="500"></canvas>
    <script>
        var tuval  = document.getElementById("tuval");
        var kaynak = tuval.getContext("2d");
        var simdiX=[];
        var simdiY=[];
        var sonraX=[];
        var sonraY=[];
        var cizgiler=[];
        var cizgi={
            x1:0,
            y1:0
        };
        var bas=0;
        var fare={
            xx:0,
            yy:0
        };
        var cevre=tuval.getBoundingClientRect();
        var cizimyap=false;
        var yeni=0;

    tuval.addEventListener("click",function temizle(olay){

            cizimyap=true; 

            fare={
            xx:olay.clientX-cevre.left,
            yy:olay.clientY-cevre.top
            };
            cizgi.x1=fare.xx;
            cizgi.y1=fare.yy;
            bas=bas+1;
            kaynak.moveTo(fare.xx,fare.yy);

            bas++;
            if(bas>1){
                cizgiler.push({
                    xx1:cizgi.x1,
                    yy1:cizgi.y1,
                    xx2:cizgi.x2,
                    yy2:cizgi.y2
                    });
            } 

            tuval.addEventListener("mousemove", function oynat(olay){                
                    if (cizimyap) {
                        kaynak.clearRect(0,0,tuval.width,tuval.height);
                        kaynak.beginPath();
                        for (var i = 0, max = cizgiler.length; i < max; i++) {
                                var dizi=cizgiler[i];
                                kaynak.moveTo(dizi.xx2,dizi.yy2);
                                kaynak.lineTo(dizi.xx1,dizi.yy1);
                                kaynak.stroke();
                                simdiX.push(dizi.xx1);
                                simdiY.push(dizi.yy1);
                                }
                        kaynak.moveTo(fare.xx,fare.yy);
                        kaynak.lineTo(olay.clientX-cevre.left,olay.clientY-cevre.top);
                        kaynak.stroke();                            
                    }
            });  

            tuval.addEventListener("dblclick", function(){

                cizimyap=false;

                 poligonYap(olay);                    

            });

    });       



    function poligonYap(olay){ 

            simdiX.splice(simdiX.length-1,1,simdiX[0]);
            simdiY.splice(simdiY.length-1,1,simdiY[0]);
            kaynak.clearRect(0,0,tuval.width,tuval.height);

    for (var i = 0, max = cizgiler.length; i < max; i++) {
        //var dizi=cizgiler[i];
                kaynak.strokeStyle="green";
                kaynak.lineWidth="1";
                kaynak.lineCap="round";
                sonraX[i]=simdiX[i];                    
                sonraY[i]=simdiY[i]; 
                kaynak.lineTo(sonraX[i],sonraY[i]);
                kaynak.stroke();

            }

            for (var i = 0, max = cizgiler.length-1; i < max; i++) {
                kaynak.fillStyle="blue";
                kaynak.fillRect(cizgiler[i].xx1-5/2,cizgiler[i].yy1-5/2,5,5);
                kaynak.font="12px Tahoma";
                kaynak.fillStyle="red";
                kaynak.fillText(i+1,cizgiler[i].xx1,cizgiler[i].yy1-5);

            }
    }

    </script>


</body>

javascript绘制一个多边形

0 个答案: