0

2 点あり，この 2 点が結ばれた線の点を取得したいです。これらの 2 点のうちの 1 点からの距離を知っています。

ちょうどこのような

http://jsfiddle.net/icai/2pmk3/

var r = new Raphael(document.getElementById('canvas'), 500, 500),
    π = Math.PI;

function angle(a, b) {
    // ATan2(dy , dx) where dy = y2 - y1 and dx = x2 - x1, 
    // or ATan(dy / dx) 
    return Math.atan2(b.y - a.y, b.x - a.x);
}

function line(opts) {
    var p = r.path([
            "M", opts.x, opts.y,
            "L", opts.x2, opts.y2].join(',')
        ).attr('stroke', opts.color),
        pt = p.getTotalLength(),
        s = p.getPointAtLength(pt - 20),
        e = p.getPointAtLength(pt),
        // perpendicular
        a = π - angle(s, e) + π/2;
        //a = π - ( s.alpha * π / 180 ) + π/2;

    var d = 15,
        x = s.x - d * Math.cos(a),
        y = s.y + d * Math.sin(a),
        x2 = s.x - d * Math.cos(a - π),
        y2 = s.y + d * Math.sin(a - π);

    r.circle(x,y, 2).attr('stroke', '#00F');
    r.circle(x2,y2, 2).attr('stroke', '#0F0');
    var pp = r.path([
            'M', x, y,
            'L', x2, y2,
        ].join(',')).attr('stroke', '#F00');
}

// senkrecht
line({x: 30, y: 30, x2: 30, y2: 200, color: '#000'});
line({x: 60, y: 200, x2: 60, y2: 30, color: '#000'});

// waagerecht
line({x: 150, y: 30, x2: 300, y2: 30, color: '#000'});
line({x: 300, y: 60, x2: 150, y2: 60, color: '#000'});

// diagonal
line({x: 100, y: 100, x2: 200, y2: 200, color: '#000'});
line({x: 200, y: 250, x2: 100, y2: 150, color: '#000'});

// irgendwas
line({x: 300, y: 300, x2: 450, y2: 320, color: '#000'});
line({x: 300, y: 200, x2: 400, y2: 160, color: '#000'});

しかし、私はすべて黒い線上に緑の点を置きたい.

4

1 に答える 1

1

あなたのあいまいなテキストからこれを正しく理解できるかどうかわかりません:

  • あなたはいくつかの線A、Bの2つの「終点」ポイントを知っています
  • あなたが知りたいのは、ある点からd離れ た直線上のC点 (最初からとする) です。ライン

  • それで：

    C=A+d*(B-A)/|B-A|

  • ここで、A、B、C はベクトルです

  • d はスカラーです
  • || は絶対値

  • 2Dで：

    qx=bx-ax
qy=by-ay
qq=d/sqrt(qx*qx+qy*qy)
cx=ax+qx*qq
cy=ay+qy*qq
于 2014-07-06T18:53:28.087 に答える