javascript - html5キャンバスの線の色を選択して変更しますか?

Question

ランダムなグラフを描画するためにこのコードを書きました。線を選択するときにプリムのアルゴリズムを適用し、それらが最小ツリーを見つけたかどうかを確認できるように、グラフ内の線を選択する方法を見つけようとしても無駄でした。

 function draw(n,rep){
        var cvs=document.getElementsByTagName('canvas')[0];   
        /** 
         * @type CanvasRenderingContext2D 
         **/
        var ctx=cvs.getContext('2d');
        ctx.beginPath();
        var randomX=[];
        var randomY=[];
        ctx.lineWidth=2;
        ctx.font  = '3'+' Arial';
        var weights=[];
        var lastRandomx=Math.random()*200;
        var lastRandomy=Math.random()*200;
        for (var i = 0; i <n ; i++) {
            var cwidth = cvs.width;
    var cheight = cvs.height;                
            randomX[i] = Math.random()*cwidth*2/3;
    randomY[i] = Math.random()*cheight*2/3;
            weights[i]=Math.round(Math.random()*20);                        
            ctx.fillRect(randomX[i],randomY[i],5,5);        
    ctx.moveTo(lastRandomx,lastRandomy);
    ctx.lineTo(randomX[i],randomY[i]);               
            lastRandomx=randomX[i];
            lastRandomy=randomY[i];
        }
        for (var i = 0; i < rep; i++) {
            var rand=Math.round(rep*Math.random());
            ctx.lineTo(randomX[rand],randomY[rand]);
        } 
        ctx.closePath();
        ctx.stroke();
};  

これはstackoverflowで見つけましたが、あまり役に立ちません。HTML5キャンバスに描かれた線を選択するには? . 最初から作成する必要がないように、事前に作成されたコードがあるかどうか疑問に思っていました。

マウスが移動するときにマウスの位置を見つけて、ポイントが線上にあるかどうかを見つけるのように、マウスの位置が線上にあるかどうかを毎回確認できるかどうかを考えていました。私は時間に制限されているため、事前に作成されたコードがあるかどうかを助けて提案してください。前もって感謝します。

Answer 1

ライン配列をループする必要があり、ライン セグメントごとに次のことを行います。

コア原則は、パスに行を追加し、(x,y) がその行にあるかどうかをテストすることです。

ctx.beginPath();
ctx.moveTo(x1, y1);  // start of line
ctx.lineTo(x2, y2);  // end of line

// this will test the point against the line (lineWidth matters)
if (ctx.isPointInStroke(x, y)) {
    // draw line segment in f.ex. different color here
    ctx.strokeStyle = "red";
    ctx.stroke();    // we already have a line segment on the path
}

実際に線を描く必要はなく、パスを再構築するだけです。必要に応じて採用します。

完全な例を次に示します。

var ctx = canvas.getContext("2d"),
    lines = [],  // store line segments for demo
    count = 10,  // max 10 lines for demo
    i = 0;

for(; i < count; i++) {
  var x = Math.random() * canvas.width;  // random point for end points
  var y = Math.random() * canvas.height;
  
  if (i) ctx.lineTo(x, y);  // if not first line, add lineTo
  else ctx.moveTo(x, y);    // start point
  
  lines.push({              // store point to create a poly-line
    x: x,
    y: y
  });
}

ctx.lineWidth = 5;
ctx.lineJoin = "round";
ctx.strokeStyle = "blue";
ctx.stroke();              // ..and draw line

// here we use the principle
canvas.onclick = function(e) {

  var r = canvas.getBoundingClientRect(), // adjust to proper mouse position
      x = e.clientX - r.left,
      y = e.clientY - r.top,
      i = 0
  
  // for each line segment, build segment to path and check
  for(; i < count - 1; i++) {
    ctx.beginPath();                        // new segment
    ctx.moveTo(lines[i].x, lines[i].y);     // start is current point
    ctx.lineTo(lines[i+1].x, lines[i+1].y); // end point is next
    if (ctx.isPointInStroke(x, y)) {        // x,y is on line?
      ctx.strokeStyle = "red";              // stroke red for demo
      ctx.stroke();
      break;
    }
  }
}

<canvas id=canvas width=500 height=500></canvas>

感度を上げるlineWidthには、より大きな値に調整できます (再描画する必要はありません)。

Answer 2

数学を使用して、マウスに最も近い線を特定できます。

サンプルコードとデモは次のとおりです。

// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
ctx.lineWidth=2;

// linear interpolation -- needed in setClosestLine()
var lerp=function(a,b,x){ return(a+x*(b-a)); };

// vars to track which line is closest to the mouse
var closestLineIndex=-1;
var closestX,closestY;

// make some random lines and save them in lines[]
var n=5;
var lines=[];
var randomX=function(){return(Math.random()*cw*.67);}
var randomY=function(){return(Math.random()*ch*.67);}
var lastX=randomX();
var lastY=randomY();
for(var i=0;i<n;i++){
  var x=Math.random()*cw*.67;
  var y=Math.random()*ch*.67;
  var dx=x-lastX;
  var dy=y-lastY;
  var line={
    x0:lastX,
    y0:lastY,
    x1:x,
    y1:y,
    weight:Math.round(Math.random()*20),
    // precalc often used values
    dx:dx,
    dy:dy,
    dx2dy2:dx*dx+dy*dy,
  };
  lines.push(line);
  lastX=x;
  lastY=y;
}


redraw();

$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});


//////////////////////////////


function setClosestLine(mx,my) {

  closestLineIndex=-1;
  var minDistanceSquared=100000000;

  // examine each line & 
  // determine which line is closest to the mouse (mx,my)
  for(var i=0;i<lines.length;i++){
    var line=lines[i];

    var dx=line.x1-line.x0;
    var dy=line.y1-line.y0;
    var t=((mx-line.x0)*line.dx+(my-line.y0)*line.dy)/line.dx2dy2;
    var x=lerp(line.x0, line.x1, t);
    var y=lerp(line.y0, line.y1, t);
    var dx1=mx-x;
    var dy1=my-y;
    var distSquared=dx1*dx1+dy1*dy1;
    if(distSquared<minDistanceSquared){
      minDistanceSquared=distSquared;
      closestLineIndex=i;
      closestX=x;
      closestY=y;
    }
  }

};


function redraw(){

  // clear the canvas
  ctx.clearRect(0,0,cw,ch);

  // draw all lines
  ctx.strokeStyle='black';
  for(var i=0;i<lines.length;i++){   
    var line=lines[i];
    ctx.beginPath();
    ctx.moveTo(line.x0,line.y0);
    ctx.lineTo(line.x1,line.y1);
    ctx.stroke();
  }

  // draw the line closest to the mouse in red
  if(closestLineIndex<0){return;}
  var line=lines[closestLineIndex];
  ctx.strokeStyle='red';
  ctx.beginPath();
  ctx.moveTo(line.x0,line.y0);
  ctx.lineTo(line.x1,line.y1);
  ctx.stroke();
  ctx.fillText("Index:"+closestLineIndex+", weight:"+line.weight,10,15);
}

function handleMouseMove(e){
  e.preventDefault();
  e.stopPropagation();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  setClosestLine(mouseX,mouseY);

  redraw();

}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Closest line is drawn in red<br>Closest line's weight is reported top-left</h4>
<canvas id="canvas" width=300 height=300></canvas>