通过垂直点在拉斐尔动态地为三角形写标签

时间:2018-08-07 05:12:10

标签: javascript raphael

我给定了三个边时绘制了一个三角形,并将标签放置在p1和p3点上。当我更改边R1,R2,R3时,标签文本放置不正确。我正在使用公式计算垂直点。

var paper = Raphael('svg_paper');      
    var R1=150, R2=120, R3=90;
    var Ax=0, Ay=0;
    var Bx=R3, By=0;
    var Cx=(R2*R1+R3*R3-R1*R1)/(2*R3);
    var Cy=Math.sqrt(R2*R2-Cx*Cx);

    var Ox = 200;
    var Oy = 200;

    var st = "M" + (Ox+Ax) + " "+(Oy-Ay);
    st = st + "L" + (Ox+Bx) + " " + (Oy-By);
    st = st + " L " + (Ox+Cx) + " " + (Oy-Cy) + "Z";
    var point1 = new Point(Ox+Ax,Oy-Ay);
    var point2 = new Point(Ox+Bx,Oy-By);
    var point3 = new Point(Ox+Cx,Oy-Cy);
    var angle1 = findAngle(point3,point2);
    var angle2 = findAngle(point1,point3);
    paper.path(st);
    var group = paper.set();
    var d = 30;
    var p1 = new Point((-Math.sin(angle2) * d + getMidPoint(point1,point3).x), (Math.cos(angle2) * d + getMidPoint(point1,point3).y));
    var p3 = new Point((Math.sin(angle1) * d + getMidPoint(point2,point3).x), (-Math.cos(angle1) * d + getMidPoint(point2,point3).y));
    group.push(paper.text(p1.x,p1.y , "a = " + +R1 + " ").rotate(angle2));
    group.push(paper.text(p3.x,p3.y , "c = " + +R2 + " ").rotate(angle1));
    function Point(x,y){
    return {
      x:x,y:y
    }
  }

  function getMidPoint(point1, point2) {
    var x = (point1.x + point2.x) / 2,
      y = (point1.y + point2.y) / 2;
    return new Point(x, y);
  }
  function findAngle(p1, p2) {
    return Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
  };
.paper {
            margin: 5px auto;
            width: 800px;
            height: 600px;
            position: absolute;
            border: outset 1px #000;
            cursor: crosshair;
            z-index: -1;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <div class="paper" id="svg_paper" />

0 个答案:

没有答案