javascript - 点和线坐标之间的kineticjs关系

Question

点属性和 Line 对象的 x,y 坐标之间的实际关系是什么？

假设我想从 10,10 到 100,10 画一条线:

var line = new Kinetic.Line({
    points: [10,10,100,10],
    stroke: 'black',
    strokeWidth: 3
});

结果在这里:http://jsfiddle.net/4Y6MG/

但是如果我将 x 和 y 坐标添加到 Line 构造函数中，该线就会移动:

var line = new Kinetic.Line({
    points: [10,10,100,10],
    stroke: 'black',
    strokeWidth: 3,
    x: 10,
    y: 10
});

http://jsfiddle.net/qyfD2/1/

为什么会发生这种情况？我将 x 和 y 设置为与点的第一个值相同，也就是说我希望该线精确地从 10,10 开始。为什么会动？

我知道我在这里缺少一些非常基本的东西，但我刚刚开始玩这个 Canvas 东西。

Answer 1

对于 KineticJS，您的点数组通过将当前的 x 或 y 添加到数组中的每个值来内部更改:

points: [ 10+x, 10+y, 100+x ,10+y ],