html - HTML5 キャンバス。線を引いて短くする

Question

左上隅に 0,0 の HTML5 キャンバスがあります。

10,15 から 100,300 までの線を引きます。

同じ勾配を維持します...その線を両端で10単位短くしたい場合、2つの端の座標は何ですか?

Answer 1

これを行う手順は次のとおりです
。1) ラインの単位ベクトルを取得します。
(これは、線と同じ方向を持つ長さ 1 のベクトルです。)
2) 始点/終点に目的の長さ * 単位ベクトルを加算/減算します。
3) ... 線を引く！

フィドル: http://jsbin.com/vajasibe/1/edit?js,output

ステップ 1、オンプレース関数を使用:

function buildUnitVector(p1, p2, uVect) {
     uVect.x = (p2.x - p1.x);
     uVect.y = (p2.y - p1.y );
     var vectorNorm = Math.sqrt( sq(uVect.x)+sq(uVect.y) );
     uVect.x/=vectorNorm;
     uVect.y/=vectorNorm;
}

と

 function sq(x) { return x*x ;}

ステップ 2、現場でも :

function drawShorterLine(ctx, p1, p2, a, b) {
    buildUnitVector(p1, p2, unitVector);
    sp1.x = p1.x + unitVector.x * a;
    sp1.y = p1.y + unitVector.y * a;
    sp2.x = p2.x - unitVector.x * b;
    sp2.y = p2.y - unitVector.y * b;
    ctx.beginPath();
    ctx.moveTo(sp1.x, sp1.y);
    ctx.lineTo(sp2.x, sp2.y);
    ctx.stroke();
}
var unitVector = { x:0, y:0 }, sp1 = {x:0,y:0},
            sp2 = {x:0, y:0 } ; 

 // use with
 var p1 = {x:0, y:0}, p2 = {x:100, y:300} ;
 drawShorterLine(ctx, p1, p2, 10, 10);