kineticjs relation between points and coordinates of a line

Question

What is the actual relation between points attribute and x,y coordinates of a Line object?

Say I want to draw a line from 10,10 to 100,10:

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

Result is here: http://jsfiddle.net/4Y6MG/

But if I add x and y coordinates to the Line constructor the line is shifted:

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

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

Why does it happen? I set x and y to be the same as the first values of points, that is I want the line to start at 10,10 precisely. Why does it move?

I know I'm missing something very basic here but I've just started playing with this canvas stuff.

Answer 1

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

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