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

缩小时对象消失

1 个答案: