Javascript - нужно получить координаты X и Y только от обводки пути SVG? - PullRequest
Новая
       43

Javascript - нужно получить координаты X и Y только от обводки пути SVG?

0 голосов
/ 10 марта 2019

У меня есть холст, на котором, нарисован элемент 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);
}

Я использую холст для рисования на нем и 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();
        }
    }
}

Мне нужно знать каждую из координат x и y пути обводки svg.

Пример: Пример того, что я имею в виду

1 Ответ

1 голос
/ 11 марта 2019

Я добавил функцию для определения положения мыши на холсте, и теперь currX стал curr.x ... etc

Если вы используете 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>
...