Изменение цвета линии с помощью isPointInStroke

Question

Я нарисовал две линии с помощью canvas, и у меня есть событие мыши, слушающее холст, При нажатии на линию цвет этой линии должен измениться. Я реализовал этот подход с методом isPointInStroke canvas, но проблема в том, что все нарисованные линии выделены.

Я не знаю, где я был не прав. Может кто-нибудь решить эту проблему? Ссылка на рабочий демо Вот что я попробовал,

const c = document.getElementById('c');
var ctx = c.getContext("2d");
var onLine = false;                                // state (for demo)
ctx.moveTo(10, 10);                               // store a line on path
ctx.lineTo(220, 0);
ctx.moveTo(50, 20);                               // store a line on path
ctx.lineTo(200, 100);
ctx.lineWidth = 16;   
// line width
render();                                          // initial render

function render() {
  ctx.clearRect(0,0,300,150);
  ctx.strokeStyle = onLine ? "red" : "green";      // color based on state
  ctx.stroke();                                // stroke path
}

c.onmousedown = function(e) {
  const rect = c.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  onLine = ctx.isPointInStroke(x, y);
  render();
};

Answer 1

Вот решение, которое использует два объекта Path2D для представления нарисованных линий.Это облегчает обнаружение кликов в данной строке, используя ctx.isPointInStroke(path, x, y) вместо ctx.isPointInStroke(x, y)

Обратите внимание, что это решение НЕ предполагает, что клики являются взаимоисключающими.Таким образом, если линии перекрываются (в данном случае - нет), цвет обеих линий изменится, если щелкнуть перекрывающуюся область.

Также обратите внимание, что цвета переключаются только при нажатии линии.Цвет линии остается прежним, если на нее не нажать.

const c = document.getElementById('c');
const START_COLOR = "green";
var ctx = c.getContext("2d");

/*Path2D objects representing the two lines */
var pathA = new Path2D();
var pathB = new Path2D();

/*Build the paths */
pathA.moveTo(10, 10);                               // store a line on path A
pathA.lineTo(220, 0);

pathB.moveTo(50, 20);                               // store a line on path B
pathB.lineTo(200, 100);

ctx.strokeStyle = START_COLOR;  

/*Booleans tracking the click state of each line */
var clickedA = false;
var clickedB = false;

/*Both lines initially set to the start color */
var colorA = START_COLOR;
var colorB = START_COLOR;

ctx.lineWidth = 16;                                 // line width


render();                                          // initial render





function render() {

  ctx.clearRect(0,0, 150, 300);

  /*Check if A was clicked, and toggle its color by setting context strokeStyle*/
  if (clickedA === true)
  {
        colorA = (colorA == "red" ? "green" : "red");  
  }

  /*Set correct color for A and draw it to canvas */
  ctx.strokeStyle = colorA;         
  ctx.stroke(pathA);


  /*Check if B was clicked, and toggle its color */
  if (clickedB === true)
  {
    colorB = (colorB == "red" ? "green" : "red");  
  }     

  /*Set correct color for B and draw it to canvas */      
  ctx.strokeStyle = colorB;   
  ctx.stroke(pathB);

  /*Reset values of clickedA and clickedB to false */
  clickedA = false;
  clickedB = false;
}

c.onmousedown = function(e) {
  const rect = c.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  /*Here we use the other version of isPointInStroke which has path2D 
    as first param to detect click within either stroke */
  clickedA = ctx.isPointInStroke(pathA, x, y);           

  /*Check for click within path B for a click in pathB */
  clickedB = ctx.isPointInStroke(pathB, x, y);


  render();
}

См. JS fiddle: https://jsfiddle.net/OCBiermann/orc7qdys/