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

Question

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

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

很遗憾，没有可以放大或缩小的文档。

我是 HTML5 canvas 的新手，但我被卡住了。等待您的帮助。谢谢!

Answer 1

一种方法是拥有三个独立的 Canvas ，一个作为主 Canvas ，另一个作为顶部/左侧标尺。

放大/缩小时，您在主 Canvas 上设置缩放级别，但您需要手动重新绘制标尺，这是一个非常简单的示例:

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 中添加以下代码，这会将鼠标滚动事件与 Canvas 绑定(bind)，因此当您使用鼠标滚轮时会发生放大和缩小。

$(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