Question

我正在开发一个自绘图程序，它使用Fabric.js绘制二叉树。到目前为止，我已经添加了绘制节点函数，现在我正在绘制节点之间的链接，但是坐标没有正确计算。任何人都可以帮我指出错误是什么？函数（node1，node2，angle）以传递的角度绘制距离node1 200pixels的node2。我通过遵循我创建圆心的相同方法找到了线的起点，但只是添加了圆的半径，在我的情况下是20而不是200像素。通过从200减去20并且因此使用值180来计算终点。这是我写的代码：

代码：

function addNode(node1,node2,angle)
{
    var intialx=parseInt(node1.get('left'));
    var initialy=parseInt(node1.get('top'));

    if(angle<180)
    {  
        var pointx =Math.abs(Math.cos(angle*Math.PI/180)*200+intialx);
        var pointy=Math.abs(Math.sin(angle*Math.PI/180)*200-initialy);
        var initiallinex=Math.abs(Math.cos(angle*Math.PI/180)*20+intialx);
        var initialliney=Math.abs(Math.sin(angle*Math.PI/180)*20-initialy);
        var finallinex=Math.abs(Math.cos(angle*Math.PI/180)*180+intialx);
        var finalliney=Math.abs(Math.sin(angle*Math.PI/180)*180-initialy);
   }
   else
   {
       var pointx =Math.abs(Math.cos(angle*Math.PI/180)*200+intialx);
       var pointy=Math.abs(Math.sin(angle*Math.PI/180)*200+initialy);
       var initiallinex=Math.abs(Math.cos(angle*Math.PI/180)*20+intialx);
       var initialliney=Math.abs(Math.sin(angle*Math.PI/180)*20+initialy);
       var finallinex=Math.abs(Math.cos(angle*Math.PI/180)*180+intialx);
       var finalliney=Math.abs(Math.sin(angle*Math.PI/180)*180+initialy);
    }

    var x=new fabric.Circle({ radius:20,originX: 'center', originY: 'center',fill:'red'});
    var value1=String(node2);
    var text= new fabric.Text(value1, {fontSize: 10, originX: 'center', originY: 'center'});
    var group = new fabric.Group([ x, text ], {left:pointx, top: pointy, angle:0});
    canvas.add(group);
    canvas.add(new fabric.Line([initiallinex, initialliney, finallinex, finalliney], {   
        stroke: 'red'
    }));
    return group;
}

输出： enter image description here

计算Fabric.js中的线坐标

0 个答案: