Javascript 在fabricJS中使用相同的左原点缩放时保持相同的对象大小

我已经看到并尝试只使用X缩放来实现我自己的功能

fabric.Object.prototype.transform = function (ctx){
      var m;
      if (this.group && !this.group._transformDone) {
        m = this.calcTransformMatrix();
        ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
        return;
      }
      else {
        m = this.calcOwnMatrix();
        //code I've wrote
        if (this.my && this.my.ignoreZoom != undefined && this.my.ignoreZoom){
            var scaleX = 1.0 / this.canvas.viewportTransform[0];
            ctx.transform(scaleX, 0, 0, 1, m[4] - 0.5, 0);
            ctx.transform(m[0], m[1], m[2], m[3], 1, m[5]);
        }
        //end of custom code
        else{
          ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
        }
      }
}

唯一的问题是对象变换是从中心开始的。这意味着如果我有一个

10*10像素的正方形
left=0
和
top=0
并进行缩放，我将在
zoom=1
上没有问题，但是当我增加缩放时，比如说2。我的对象仍然从0开始，但我的对象显示在我的
20*10
选择的中间


fabric.Object.prototype.transform=函数（ctx）{
var-m；
if（this.group&！this.group.\u完成）{
m=此.CalCtrTransformMatrix（）；
变换（m[0]，m[1]，m[2]，m[3]，m[4]，m[5]）；
返回；
}
否则{
m=this.calcOwnMatrix（）；
if（this.ignoreZoom）{
var zoomX=1.0/this.canvas.viewportTransform[0]；
变换（zoomX，0，0，1，m[4]-0.5，0）；
变换（m[0]，m[1]，m[2]，m[3]，1，m[5]）；
}
else if（this.ignoreZoomHLine）{
var zoomX=1.0/this.canvas.viewportTransform[0]；
变换（zoomX，0，0，1，m[4]，0）；
变换（m[0]，m[1]，m[2]，m[3]，1，m[5]）；
}
否则{
变换（m[0]，m[1]，m[2]，m[3]，m[4]，m[5]）；
}
}
}
var canvas=newfabric.canvas（'c'）；
var line1=新结构线（[0,5,20,15]{
冲程宽度：1，
笔画：“黑色”，
ignoreZoomHLine:对
});
var line2=新的fabric.Line（[0,0,0,50]{
冲程宽度：1，
笔画：“黑色”，
ignoreZoom:对
});
canvas.add（第1行，第2行）；
$（“#缩放”）。单击（函数（）{
var vpt=canvas.viewportTransform；
var scaleX=vpt[0]+1；
setViewportTransform（[scaleX，0，0，1，0，0]）；
}) ;
$（'#zoomOut'）。单击（函数（）{
var vpt=canvas.viewportTransform；
var scaleX=（vpt[0]-1）<1？1:vpt[0]-1；
setViewportTransform（[scaleX，0，0，1，0，0]）；
});

+
-