Javascript-仅需要从SVG路径的笔触获取x和y坐标？

Question

我有一个画布，在其中绘制了一个svg元素（例如一个圆圈），用户负责用鼠标通过该图进行绘制，我将用户绘制的点x和y保存在数组中，但是我不知道如何仅从svg笔划获取点。

我的问题是：使用isPointInStroke（）可以查看该点是否在笔划中，但是如果我没有该笔划的总点数数组，则无法知道用户是否绘制了SVG图形的100％。 在以前的方式中，如果用户正确绘制了一半的图纸，则可以100％成功。

function init() {
    canvas = document.getElementById('can');
    ctx = canvas.getContext("2d");
    w = canvas.width;
    h = canvas.height;

    var svgPathCirculo=" M125,200a75,75 0 1,0 150,0a75,75 0 1,0 -150,0";
    var circulo = new Path2D(svgPathCirculo);
    ctx.lineWidth = 5;
    ctx.setLineDash([5, 15]);
    ctx.stroke(circulo);

    // Just example to check if it works
    if(ctx.isPointInStroke(circulo, 125, 200)){
      ctx.arc(200,200,3,0,2*Math.PI);
      ctx.fill();
    };

    canvas.addEventListener("mousemove", function (e) {
        findxy('move', e)
    }, false);
    canvas.addEventListener("mousedown", function (e) {
        findxy('down', e)
    }, false);
    canvas.addEventListener("mouseup", function (e) {
        findxy('up', e)
    }, false);
    canvas.addEventListener("mouseout", function (e) {
        findxy('out', e)
    }, false);
}

我使用画布在其上绘画，并使用svg显示预定义的形状，以供用户在绘画时作为模板使用（例如，为幼儿绘制的小册子）。

 function draw() {
    ctx.beginPath();
    ctx.moveTo(prevX, prevY);
    ctx.lineTo(currX, currY);
    ctx.strokeStyle = x;
    ctx.lineWidth = y;
    ctx.stroke();
    ctx.closePath();
}
function findxy(res, e) {
    if (res == 'down') {
        prevX = currX;
        prevY = currY;
        currX = e.clientX - canvas.offsetLeft;
        currY = e.clientY - canvas.offsetTop;

        if(!arrayCoordenadas.includes({x:currX,y:currY})){
          arrayCoordenadas.push({x:currX,y:currY});
        }


        flag = true;
        dot_flag = true;
        if (dot_flag) {
            ctx.beginPath();
            ctx.fillStyle = x;
            ctx.fillRect(currX, currY, 2, 2);
            ctx.closePath();
            dot_flag = false;
        }
    }
    if (res == 'up' || res == "out") {
        flag = false;
    }
    if (res == 'move') {
        if (flag) {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;
            if(!arrayCoordenadas.includes({x:currX,y:currY})){
              arrayCoordenadas.push({x:currX,y:currY});
            }
            draw();
        }
    }
}

我需要知道svg笔触路径的每个x和y坐标。

示例： 我的意思示例

Answer 1

我添加了一个功能来检测鼠标在画布中的位置，现在currX变成curr.x ...等

如果使用的是Path2D这就是检测点{x，y}是否在笔触中的方法：

ctx.isPointInStroke(the_path, x, y)

接下来是我的代码。 用户只能在笔划内部绘制。

现在代码可以正常工作了，但我认为您可能不知道用户是否绘制了SVG图形的100％ 。 您可以将点推入点数组中，然后计算路径的长度，并将其与圆的长度进行比较，但是我认为这样做不会。

 let prev = {}, curr = {}; let flag = false; let circulo; function init() { canvas = document.getElementById("can"); ctx = canvas.getContext("2d"); w = canvas.width = 400; h = canvas.height = 400; var svgPathCirculo = "M125,200a75,75 0 1,0 150,0a75,75 0 1,0 -150,0"; circulo = new Path2D(svgPathCirculo); ctx.lineWidth =10; ctx.setLineDash([5, 15]); ctx.stroke(circulo); canvas.addEventListener("mousemove", move, false); canvas.addEventListener("mousedown", down, false); canvas.addEventListener("mouseup", up, false); canvas.addEventListener("mouseout", up, false); } function draw(prev, curr, trazado) { ctx.setLineDash([]); //unset linedash ctx.lineCap = "round"; ctx.strokeStyle = "gold" ctx.lineWidth =5; if ( ctx.isPointInStroke(trazado, curr.x, curr.y) && ctx.isPointInStroke(trazado, prev.x, prev.y) ) { ctx.beginPath(); ctx.moveTo(prev.x, prev.y); ctx.lineTo(curr.x, curr.y); ctx.stroke(); } } function down(e) { prev = oMousePos(canvas, e); curr = oMousePos(canvas, e); flag = true; } function up(e) { flag = false; } function move(e) { if (flag) { curr = oMousePos(canvas, e); draw(prev, curr, circulo); prev = { x: curr.x, y: curr.y }; } } function oMousePos(canvas, evt) { var ClientRect = canvas.getBoundingClientRect(); return { //objeto x: Math.round(evt.clientX - ClientRect.left), y: Math.round(evt.clientY - ClientRect.top) }; } init(); 

 canvas{border:1px solid} 

 <canvas id="can"></canvas>