Question

以下代码段相同，但正在使用的FabricJS版本除外。

第一个使用版本1.4.13，第二个使用最新版本（1.7.3）。

在第一个版本上单击放大时，黑色方块保持正好左上角（0,0）。到目前为止，非常好。

当在第二个版本上做同样的事情时，黑色方块＆＃34;漂移＆＃34;在那里你可以看到黑色方块上方和左侧的粉红色背景。

有没有人为什么这种行为发生了变化，是否有解决方法或其他修复方法？

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

Answer 1

作为Fabric 1.5之后的主要区别是在对象边界框中包含了strokeWidth，我想如果你初始化fabric.Rect strokeWidth: 0或者stroke: 'blue'你会看到对象不是漂流，只是从左上角移动。导致漂移的原因是透明边框的尺寸越来越大。

使用最新版本的库缩放问题

1 个答案: