对象在缩小时消失

Question

有没有什么办法可以防止Fabric.js对象在缩小时消失？

看看我刚​​刚创建的以下JSFiddle：https://jsfiddle.net/t3jkrmn6/。只要滚动一个画布，你会看到我在说什么。

<div id="canvas-wrapper"> 
    <canvas id="c" class="canvas"></canvas> 
</div> 

.canvas { 
    border: 1px solid #999; 
} 

var canvas = new fabric.Canvas('c'); 
var line = new fabric.Line([100, 50, 100, 100], { 
    stroke: 'black', 
    strokeWidth: 1 
}); 
canvas.add(line); 

$('#canvas-wrapper').mousewheel(function(e) { 
    if (e.originalEvent.deltaY < 0) { 
    canvas.setZoom(canvas.getZoom() * 1.1); 
    } else { 
    canvas.setZoom(canvas.getZoom()/1.1); 
    } 
    console.log(canvas.getZoom()); 
}); 

我想让我的一些对象保持1宽度，无论用户缩小了多少画布。

Answer 1

在您的小提琴中，物体消失，因为您已将线条的strokeWidth设置为1.在小于1的任何缩放比例下，它的宽度将变为< 1像素，因此它是不可见的。

如果你想线宽保持不变，你需要做这样的事情：

$('#canvas-wrapper').mousewheel(function(e) { 
    if (e.originalEvent.deltaY < 0) { 
    canvas.setZoom(canvas.getZoom() * 1.1); 
    line.setStrokeWidth(1.1/canvas.getZoom()); 
    } else { 
    canvas.setZoom(canvas.getZoom()/1.1); 
    line.setStrokeWidth(1.1/canvas.getZoom()); 
    } 
    console.log(canvas.getZoom()); 
    canvas.renderAll(); 
}); 

Fiddle