0

have two point,I want to get the point in the line which these two point linked. I know the distance form one of these two point.

just like this

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'});

but I want to the green points all on the black line.

Terry
  • 127
  • 1
  • 11

1 Answers1

1

not sure I get this right from your vague text:

  • you know 2 'endpoints' points of some line A,B
  • you want to know C point on a line which is d-far from one (let it be from first) point line
  • so:

    C=A+d*(B-A)/|B-A|
    
  • where A,B,C are vectors

  • d is scalar
  • || is absolute value
  • so in 2D:

    qx=bx-ax
    qy=by-ay
    qq=d/sqrt(qx*qx+qy*qy)
    cx=ax+qx*qq
    cy=ay+qy*qq
    
Spektre
  • 49,595
  • 11
  • 110
  • 380
  • I think that maybe can use cartesian coordinate system expression to do this. – Terry Jul 07 '14 at 09:30
  • 1
    @caizZZz this is cartessian parametric equation of line d-is parameter, and (B-A)/|B-A| is the same as (x,y)=(cos(ang),sin(ang)) but much faster – Spektre Jul 07 '14 at 09:33
  • if I don't know the B point or A point, but I know the degree(0,360) and the d-far how to calculate the C point. – Terry Jul 13 '14 at 09:38
  • Oh,I know.var radian = angle * Math.PI / 180; var p1.x = raduis * Math.cos(radian) + p0.x; var p1.y = raduis * Math.sin(radian) + p0.y; – Terry Jul 13 '14 at 11:26