最新版本库的缩放问题

Question

除了所使用的 FabricJS 版本不同，以下代码片段是相同的。

第一个使用1.4.13版本，第二个使用最新的(1.7.3)。

在第一个版本上单击放大时，黑色方块正好保持在左上角 (0, 0)。到目前为止，还不错。

在第二个版本上执行相同操作时，黑色方块 "drifts" 可以看到黑色方块上方和左侧的粉红色背景。

有人知道这种行为发生变化的原因吗？是否有解决方法或其他修复方法？

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

canvas.setBackgroundImage('http://placehold.it/640x480/dd0055/?text=FabricJS Demo', canvas.renderAll.bind(canvas), {
    backgroundImageOpacity: 0.5,
    backgroundImageStretch: false
});

canvas.add( new fabric.Rect({
    left: 0,
    top: 0,
    width:100,
    height:100,
    fill:"rgb(0,0,0)"
}) );

canvas.renderAll();

$("#btnZoomIn").click(function(){
    canvas.setZoom(canvas.getZoom()*1.3);
});

$("#btnZoomOut").click(function(){
    canvas.setZoom(canvas.getZoom()/1.3);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.13/fabric.min.js"></script>
<button id="btnZoomIn">ZoomIn</button>
<button id="btnZoomOut">ZoomOut</button>
<br/>
<canvas id="c" width="640" height="480"></canvas>

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

canvas.setBackgroundImage('http://placehold.it/640x480/dd0055/?text=FabricJS Demo', canvas.renderAll.bind(canvas), {
    backgroundImageOpacity: 0.5,
    backgroundImageStretch: false
});

canvas.add( new fabric.Rect({
    left: 0,
    top: 0,
    width:100,
    height:100,
    fill:"rgb(0,0,0)"
}) );

canvas.renderAll();

$("#btnZoomIn").click(function(){
    canvas.setZoom(canvas.getZoom()*1.3);
});

$("#btnZoomOut").click(function(){
    canvas.setZoom(canvas.getZoom()/1.3);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.3/fabric.min.js"></script>
<button id="btnZoomIn">ZoomIn</button>
<button id="btnZoomOut">ZoomOut</button>
<br/>
<canvas id="c" width="640" height="480"></canvas>

Answer 1

作为 fabric 1.5 之后的主要区别，在对象边界框中包含了 strokeWidth，我想如果你用 strokeWidth: 0 或 stroke: 'blue' 初始化 fabric.Rect，你会确保物体没有漂移，只是从左上角移动。导致漂移的原因是透明边框越来越大。

最新版本库的缩放问题

Zoom issue with latest version of library

fabricjs