Question

我正在制作一个互动图表网站，我试图在相对于stageize的kineticJS中轻松绘制箭头，我有以下内容： http://jsfiddle.net/K5Zhg/17/

但是你可以看到旋转的箭头与预期的起点和终点不匹配。我尝试了偏移，但这会弄乱正确的（不是旋转的）箭头。也不知道为什么jsfiddle显示我的箭头这个凌乱（缺少底线），在我自己的机器上似乎工作正常（使用v5.1.0），另见http://tomzooi.com/dump/ip/（使用kineticjs和绑定bootstrap到它，到目前为止工作得很好）

代码：

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属性设置为{ {1}}和sx按顺序将位置设置回预期位置。即。

sy

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

哦，我更新了小提琴，使用v5.0.1。

KineticJS箭头绘图旋转错位

1 个答案: