对象在缩小时消失

Question

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

看看我刚刚创建的以下 JSFiddle -- https://jsfiddle.net/t3jkrmn6/。只需滚动 canvas，您就会明白我在说什么。

<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 宽度，无论用户将 canvas 缩小多少。

Answer 1

在您的 fiddle 中，对象消失了，因为您已将线条的 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

对象在缩小时消失

Objects disappear on zoom-out

javascript

fabricjs