2点間の中間点を探す

Question

私はキャンバス経由で線で接続したいと思っているたくさんのHTML要素を持っています。ここで私が達成しようとしているもののモックアップだ：現在

、私はテキストのない、ラインを持っています。私は各行の中間にテキストを配置したいが、対角線であるので、どのように行うのか分からない。

現在のコード：

// 'connectors' is an array of points corresponding to 
// the middle of each big blue buttons' x-value 

ctx.clearRect(0,0,canvas.width,canvas.height); 
for(var i=0;i<connectors.length;i++){ 
    var wpoint = connectors[i]; 
    var pos1 = {w: wpoint, h: 0}; 
    var pos2 = {w: canvas.width/2, h: canvas.height}; 
    ctx.beginPath(); 
    ctx.moveTo(pos1.w,pos1.h); 
    ctx.lineTo(pos2.w,pos2.h); 
    ctx.stroke(); 

    // Write Text Halfway 
    ctx.fillStyle = "blue"; 
    ctx.font = "bold 16px Arial"; 
    ctx.fillText("2702", 100, canvas.height/2); 
    // No idea what to put as the x value here 

} 

これを達成するための最良の方法は何ですか？潜在的に線の半分を描き、テキストを書いて、残りの線を描くのですか？

EDIT：おそらく、より良いタイトル/質問は次のようになります。HTMLキャンバス内の任意の2つのポイントの中間点を見つけるにはどうすればよいですか？そこにテキストを描きたい。

Answer 1

はここに方法は次のとおりです。

• を計算し、ラインの中間点
• 垂直いずれかを中心に水平&にその中間点
• 知らせるキャンバスでラインを消去ライン
• を描きます指定された[x、y]の周囲に描画されたテキスト
• ここで中間点

でテキストを描画しますが、コードとデモ注釈を付けています：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 

 
var line={x0:20,y0:20,x1:150,y1:150}; 
 

 
textAtMidLine(line,'2702','verdana',14) 
 

 
function textAtMidLine(line,text,fontface,fontsize){ 
 

 
    // save the unmodified context state 
 
    ctx.save(); 
 

 
    // calc line's midpoint 
 
    var midX=line.x0+(line.x1-line.x0)*0.50; 
 
    var midY=line.y0+(line.y1-line.y0)*0.50; 
 

 
    // calc width of text 
 
    ctx.font=fontsize+'px '+fontface; 
 
    var textwidth=ctx.measureText(text).width; 
 

 
    // draw the line 
 
    ctx.beginPath(); 
 
    ctx.moveTo(line.x0,line.y0); 
 
    ctx.lineTo(line.x1,line.y1); 
 
    ctx.lineWidth=2; 
 
    ctx.strokeStyle='lightgray'; 
 
    ctx.stroke(); 
 

 
    // clear the line at the midpoint 
 
    ctx.globalCompositeOperation='destination-out'; // "erases" 
 
    ctx.fillRect(midX-textwidth/2,midY-fontsize/2,textwidth,fontsize*1.286); 
 
    ctx.globalCompositeOperation='source-over'; // reset to default 
 

 
    // tell canvas to horizontally & vertically center text around an [x,y] 
 
    ctx.textAlign='center'; 
 
    ctx.textBaseline='middle' 
 

 
    // draw text at the midpoint 
 
    ctx.fillText(text,midX,midY); 
 

 
    // restore the unmodified context state 
 
    ctx.restore(); 
 

 
}

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

<canvas id="canvas" width=300 height=300></canvas>