Question

我正在尝试使用鼠标点击和移动事件在画布上绘制多边形（比方说4面）。

点击画布moveTo（此点）。
现在将光标移动到lineTo（当前点）但不是中间点。线应该随着鼠标移动一直移动，只有在点击后才能画到画布上。

第四次点击（或任何x）后，多边形应该是shutpath（）;

var pressed = false;

function myfunc1(e){
    context.beginPath();
    context.arc(e.clientX, e.clientY, radius, 0, Math.PI*2);
    context.fill();
    context.beginPath();
    context.moveTo(e.clientX,e.clientY);
    pressed = true; 
}

function myfunc2(e){    
    if(pressed ===true){    
    context.lineTo(e.clientX,e.clientY);
    context.stroke();    
    }
}    
canvas.addEventListener('click',myfunc1);
canvas.addEventListener('mousemove',myfunc2);

我写了这个，但我不想要中间线

Answer 1

你需要的是一个堆栈。不要想到画线。考虑将所有点击存储在一个数组中。当您单击4次时，绘制多边形（假设这是您想要的）。像这样：

var stack = [];

myfunc1(e){

    stack.push(e.clientX, e.clientY);

    if(stack.length == 4)
        actuallyDraw();
}

var actuallyDraw(){
    //take the 4 points in stack and draw the polygon

    //clearing the stack for the next polygon
    stack.length = 0; 
}

canvas.addEventListener('click', myfunc1);

Answer 2

使用以下代码可以帮助您解决问题。

单击以指定多边形顶点

<button id=done>Click when done assigning points</button>
<canvas id="canvas" width=450 height=450></canvas>

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }

context.lineWidth=2;
context.strokeStyle='blue';

var coordinates = [];
var isDone=false;

$('#done').click(function(){
  isDone=true;
});

$("#canvas").mousedown(function(e){handleMouseDown(e);});

function handleMouseDown(e){
  if(isDone || coordinates.length>10){return;}

  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);
  coordinates.push({x:mouseX,y:mouseY});
  drawPolygon();
}

function drawPolygon(){
  context.clearRect(0,0,cw,ch);
  context.beginPath();
  context.moveTo(coordinates[0].x, coordinates[0].y);
  for(index=1; index<coordinates.length;index++) {
    context.lineTo(coordinates[index].x, coordinates[index].y);
  }
  context.closePath();
  context.stroke();
}

Answer 3

我创建了一个数组（cords []），它保存我正在绘制的多边形的坐标，如果当前多边形完成，则将它们推送到另一个数组（polygons []）。然后我可以在需要时清除画布并从polygon []

重绘多边形

        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var img = document.getElementById("myimg");
        ctx.drawImage(img,0,0);
        var canvasOffset = $("#canvas").offset();
        var offsetX = canvasOffset.left;
        var offsetY = canvasOffset.top;
        var polygons = [];
        var cords = [];
        var start = false;
        var control = false;
        var clicks = 0;

        ctx.strokeStyle = "orange";
        ctx.lineWidth = 1;

        $("#canvas").mousedown(function (e) {
            handleMouseDown(e);
        });
        $("#canvas").mousemove(function (e) {
            handleMouseMove(e);
        });


        function handleMouseDown(e) {
            start = false;
            clicks = clicks+1;              


            var mouseX = parseInt(e.clientX - offsetX);
            var mouseY = parseInt(e.clientY - offsetY);            

            cords.push([mouseX,mouseY]);
            console.log(cords);
            clearanddraw();

            if(clicks%4 ===0){
                return;
            }

            start = true;                
        }

        function handleMouseMove(e) {    
            if (!start) {
                return;
            }

            canvasclear();             

            var mouseX = parseInt(e.clientX - offsetX);
            var mouseY = parseInt(e.clientY - offsetY);

            ctx.beginPath();
            ctx.moveTo(cords[clicks-1][0], cords[clicks-1][1]);
            ctx.lineTo(mouseX, mouseY);
            ctx.stroke();
        }
 function canvasclear() {

            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(myimg,0,0);
            drawOtherPol();
            ctx.beginPath();
            ctx.moveTo(cords[0][0],cords[0][1]);

            for(var i = 0; i<clicks-1;i++){
                ctx.lineTo(cords[i+1][0],cords[i+1][1]);
                    //alert("redrwan");
            }
            ctx.stroke();
            return;

        }

        function clearanddraw(){
            if(clicks>1)
                {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    ctx.drawImage(myimg,0,0);
                    drawOtherPol();

                    ctx.beginPath();
                    ctx.moveTo(cords[0][0],cords[0][1]);

                    for(var i = 0; i<clicks-1;i++){
                    ctx.lineTo(cords[i+1][0],cords[i+1][1]);
                    }

                    if(clicks<4)
                        {ctx.stroke();
                        }
                    if(clicks ===4){
                        ctx.closePath();
                        ctx.stroke();
                        savepolygon();
                        cords = [];
                        clicks = 0;

                        return;
                    }
                }
            start = true;
        }

function savepolygon(){
    polygons.push(cords);
    console.log(polygons);
    return
}

function drawOtherPol(){
    if(polygons.length===0){
        return ;
    }
    else{
    for(var i = 0 ; i<polygons.length;i++){
    ctx.beginPath();
    ctx.moveTo(polygons[i][0][0],polygons[i][0][1]);
    ctx.lineTo(polygons[i][1][0],polygons[i][1][1]);
    ctx.lineTo(polygons[i][2][0],polygons[i][2][1]);
    ctx.lineTo(polygons[i][3][0],polygons[i][3][1]);
    ctx.closePath();
    ctx.stroke();
}
return;
    }
}

在画布上用鼠标绘制固定边的多边形

3 个答案: