带缩放功能的 Fabric.js 标尺

Question

我有疑问。我正在编写这样的编辑器，我还想要一个标尺来添加它（通过鼠标滚动（放大和缩小）更改值）

但我做不到。我尝试了 github 上的所有标尺，但它们只运行 body 标签。

不幸的是，没有用于放大或缩小的文档。

我是 HTML5 canvas 的新手，但我陷入了困境。等待您的帮助。谢谢！

Answer 1

一种方法是使用三个独立的画布，一个作为主画布，一个用于顶部/左侧标尺。

放大/缩小时，您可以在主画布上设置缩放级别，但您需要手动重绘标尺，这是一个非常简单的示例：

function redrawRulers() {
  topRuler.clear();
  leftRuler.clear();
  topRuler.setBackgroundColor('#aaa');
  leftRuler.setBackgroundColor('#aaa');

  zoomLevel = mainCanvas.getZoom();

  for (i = 0; i < 600; i += (10 * zoomLevel)) {
    var topLine = new fabric.Line([i, 25, i, 50], {
      stroke: 'black',
      strokeWidth: 1
    });
    topRuler.add(topLine);
    var leftLine = new fabric.Line([25, i, 50, i], {
      stroke: 'black',
      strokeWidth: 1
    });
    leftRuler.add(leftLine);
  }}

小提琴

更新：对于标尺，这里有一些非常简单的代码，可以在顶部标尺上绘制图形（小提琴也更新了）：

  // Numbers
for (i = 0; i < 600;  i += (100 * zoomLevel)) {
  var text = new fabric.Text((Math.round(i / zoomLevel)).toString(), {
    left: i,
    top: 10,
    fontSize: 8
  });
  topRuler.add(text);
}

现在，您当然希望将这些数字转换为适合您的应用程序的任何单位。此外，您可能需要考虑在放大时以更频繁的间隔绘制数字，并在缩小时将它们间隔得更远。但我想我已经给了你足够的东西让你来到这里。

添加以下代码document.ready将鼠标滚动事件与画布绑定，因此当您使用鼠标滚轮时会发生放大和缩小。

$(mainCanvas.wrapperEl).on('mousewheel', function(e) {
    var dir = e.originalEvent.wheelDelta;
    if (dir > 0){
      var ZoomValue = mainCanvas.getZoom() * 1.2;           

    } else {
        var ZoomValue = mainCanvas.getZoom() * .83333333333333333;
    }

    redrawRulers();
    mainCanvas.setZoom(ZoomValue, e);
    e.originalEvent.returnValue = false;
});

更新了鼠标滚动的 Fiddle