對象在縮小時消失

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