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

Question

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

我的问题是:使用 isPointInStroke() 我可以查看该点是否在笔划中，但是如果我没有笔划的总点数数组，则不可能知道用户是否绘制了 100% 的 SVG 图形。在之前的方法中，如果用户正确地绘制了一半的图形，那么我将获得 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);
}

我使用 Canvas 在其上绘图，并使用 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 坐标。

示例:Example of what I mean

Answer 1

我添加了一个函数来检测 Canvas 中的鼠标位置，现在 currX 变成了 curr.x ... 等等

如果您使用的是 Path2D，这就是检测点 {x,y} 是否位于笔划中的方法:

ctx.isPointInStroke(the_path, x, y)

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

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

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>