KineticJS箭头图旋转不对齐

Question

我正在制作一个交互式图表网站，我试图在kineticJS中轻松地绘制相对于舞台大小的箭头，我得到了以下内容：http://jsfiddle.net/K5Zhg/17/

但如您所见，旋转箭头与预定的起始点和结束点不匹配。我尝试了偏移，但这会破坏正确的(而不是旋转的)箭头。也不知道为什么jsfiddle是我的箭头--混乱(丢失的底线)，在我自己的机器上，它似乎工作得很好(使用v5.1.0)，请参见这里的http://tomzooi.com/dump/ip/ (使用kineticjs并将引导绑定到它，到目前为止运行得很好)

代码：

var stage = new Kinetic.Stage({
    container: 'container',
    width: 1140,
    height: 500
});

var layer = new Kinetic.Layer();


var border = new Kinetic.Rect( {
    x: 0,
    y: 0,
    width: stage.getWidth(),
    height: stage.getHeight(),
    stroke: ' red',
    strokeWidth: 1
});
layer.add(border);

var dot = new Kinetic.Circle({
    x: 0.1*stage.getWidth(),
    y: 0.1*stage.getHeight(),
    radius: 10,
    fill: 'red'
});
var dot2 = new Kinetic.Circle({
    x: 0.5*stage.getWidth(),
    y: 0.1*stage.getHeight(),
    radius: 10,
    fill: 'red'
});
var dot3 = new Kinetic.Circle({
    x: 0.5*stage.getWidth(),
    y: 0.5*stage.getHeight(),
    radius: 10,
    fill: 'red'
});
layer.add(dot);
layer.add(dot2);
layer.add(dot3);

var arrow1 = arrow(0.1,0.1,0.5,0.1,10);
var arrow2 = arrow(0.1,0.2,0.5,0.5,10);
layer.add(arrow1);
layer.add(arrow2);
// add the layer to the stage
stage.add(layer);

function arrow(psx, psy, pex, pey, pw) {
    var w = stage.getWidth();
    var h = stage.getHeight();

    var sx = psx*w;
    var ex = pex*w;
    var sy = psy*h;
    var ey = pey*h;

    var pr = (Math.atan2(ey-sy, ex-sx)/(Math.PI/180));
    var pl = Math.sqrt(Math.pow((ex-sx),2)+Math.pow((ey-sy),2));

    ex = sx+pl;
    ey = sy;

    var poly = new Kinetic.Line({
        points: [sx,sy+pw,  sx,sy-pw,   ex-3*pw,ey-pw,      ex-3*pw,ey-2*pw,      ex,ey,      ex-3*pw,ey+2*pw,   ex-3*pw, sy+pw],
        fill: '#EDECEB',
        stroke: '#AFACA9',
        strokeWidth: 2,
        closed: true,
        rotation: pr,
        shadowColor: 'black',
        shadowBlur: 10,
        shadowOffset: {x:2,y:2},
        shadowOpacity: 0.5
      });
    return poly;
}

Answer 1

下面是一个解决方案：http://jsfiddle.net/K5Zhg/20/

问题是，当你旋转箭头形状时，它围绕着x=0和y=0旋转。但是，您的观点是基于x=sx和y=sy (在您的示例中是x=60和y=50)。

要修复此问题，请绘制x=0和y=0周围的点(并使用正确的变量转换数组中的其他点)，然后将Kinetic.Line的x和y属性设置为sx和sy，以便将位置设置回预定位置。也就是说。

function arrow(psx, psy, pex, pey, pw) {
        var w = stage.getWidth();
        var h = stage.getHeight();

        var sx = psx*w;
        var ex = pex*w;
        var sy = psy*h;
        var ey = pey*h;

        // console.log(sx);

        var pr = (Math.atan2(ey-sy, ex-sx)/(Math.PI/180));
        var pl = Math.sqrt(Math.pow((ex-sx),2)+Math.pow((ey-sy),2));
        ex = sx+pl;
        ey = sy;

        var poly = new Kinetic.Line({
            points: [0,0+pw,    
                0,0-pw, ex-sx-3*pw,ey-sy-pw,        ex-sx-3*pw,ey-sy-2*pw,    ex-sx,ey-sy,    ex-sx-3*pw,ey-sy+2*pw,   ex-sx-3*pw, 0+pw],
            fill: 'blue',
            stroke: 'black',
            strokeWidth: 2,
            closed: true,
            rotation: pr,
            x: sx,
            y: sy,
            shadowColor: 'black',
            shadowBlur: 10,
            shadowOffset: {x:2,y:2},
            shadowOpacity: 0.5
          });

        return poly;
    }

我还将y值改为0.1，而不是0.2，以便第二个箭头的开始与红点连接。

哦，我把Fiddle更新为使用5.0.1版本。