javascript - 具有缩放功能的Fabric.js标尺

我有问题。
我正在编写一个类似于this的编辑器，我还想添加一个标尺（它可以通过鼠标滚动（放大和缩小）来更改值）
但我做不到。我试过github上的所有标尺，但它们只运行body标记。
不幸的是，没有用于放大或缩小的文档。
我是HTML5画布新手，我被卡住了。等待你的帮助。谢谢！

最佳答案

一种方法是有三个独立的画布，一个作为主画布，一个用于上/左标尺。
放大/缩小时，在主画布上设置缩放级别，但需要手动重新绘制标尺，下面是一个非常简单的示例：

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

Fiddle
更新：对于标尺，这里有一些非常简单的代码来绘制顶部标尺上的图形（fiddle也更新了）：

  // 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中添加下面的代码这将把鼠标滚动事件与画布绑定起来，因此当您使用mouseweel时将进行放大和缩小。

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

Updated Fiddle For Mouse Scroll

关于javascript - 具有缩放功能的Fabric.js标尺，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41042440/