Question

嗨，我正在寻找一种使用javascript关闭路径的方法。我可以通过单击画布来绘制一系列直线，但是我希望当线条闭合时，创建的对象需要一个灰色背景。就像在example中关闭墙壁时一样，房间出现了

var needFirstPoint = true;

function drawNextLine(ctx, x, y) {
    if (needFirstPoint) {
        ctx.lineWidth = 5;
        ctx.beginPath();
        ctx.moveTo(x, y);
        needFirstPoint = false;
    }
    else {
        ctx.lineTo(x, y);
        ctx.stroke();
    }
}

$(document).ready(function(){
    var canvas = $('#myCanvas').get(0);
    if (!canvas.getContext) { return; }
    var ctx = canvas.getContext('2d');
    
    $('#myCanvas').on('click', function(e){
        var offset = $(this).offset();
        var x = e.pageX - offset.left;
        var y = e.pageY - offset.top;
        drawNextLine(ctx, x, y);
    });
});

canvas {
    border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="600" height="600"></canvas>

我不知道如何检测可能形成物体的闭合路径

Answer 1

编辑：有一个更简单的解决方案。记住第一次点击的位置，并检查附近是否有随后的点击。

https://codepen.io/anon/pen/pQLwGK

var startX = -1, startY = -1; 

function dist(x0,y0,x1,y1)
{
  return Math.sqrt( Math.pow(x1-x0,2) + Math.pow(y1-y0,2));
}

$(document).ready(function()
{
    var canvas = $('#myCanvas').get(0);
    if (!canvas.getContext) { return; }
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = '#f00';
    ctx.beginPath();
    $('#myCanvas').on('click', function(e)
    {
        console.log('click');
        var offset = $(this).offset();
        var x = e.pageX - offset.left;
        var y = e.pageY - offset.top;
        if (startX === -1)
        {
          console.log('start position is set to ',x ,y);
          startX = x;
          startY = y;
          ctx.moveTo(x,y);
        }
        else
        {
          // checking if a click is within 20px of the starting point
          if (dist(startX, startY,x,y ) < 20)
          {
             // assume that polygon is closed
             ctx.lineTo(startX,startY);
             ctx.fill();
             console.log('fill');
          }
          else
          {
             ctx.lineTo(x,y);
          }
          ctx.stroke();
        }
    });
});

Answer 2

将第一个点的值保存到变量中。如果随后的return res .status(200) .cookie('id_token', token, { httpOnly: false, path: '/', secure: false, maxAge: 400000 }) .json({ token: token });在所需的阈值之内，请关闭对角线并应用填充。

检测画布中的闭合路径

2 个答案: