缩小时对象消失

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

小提琴