Fabric.js行移动和缩放分别对应另一个对象

Question

我尝试使用程序化方式移动和缩放线，使用按钮同时第一次单击按钮（不改变参考对象位置），按照我的预期发生，但是当我被移动时第二次按下它并没有按照我的预期发生。

代码如下：

HTML

<div>
   <canvas id="canvas" width="400" height="400" style="border:1px solid red"/>
</div>
<input type="button" onclick="changePosition()" value="Change Possition"/> 

脚本

var canvas=new fabric.Canvas('canvas');

var points=[100,100,300,100],
    points1=[300,200,400,200],line,line1;
    line=new fabric.Line(points,{
                    stroke: 'black',
                    strokeWidth: 3,                    
                    selectable: true
                });
    canvas.add(line);

    line1=new fabric.Line(points1,{
                    stroke: 'black',
                    strokeWidth: 3,                    
                    selectable: true});
    canvas.add(line1);


function changePosition()
{
   //canvas.setActiveObject(canvas.item(0));
    line.set(line1);
    canvas.renderAll();
    canvas.calcOffset();
    line.setCoords();
}

Jsfiddle

如何移动放置line1的位置？