Question

我＆＃39;问题。我编写了一个像this这样的编辑器，我也想要一个标尺来添加它（用鼠标滚动更改值（放大和缩小））

但我不能这样做。我在github上尝试了所有的统治者，但他们只运行身体标签。

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

我是HTML5画布的新手，我被卡住了。等待你的帮助。谢谢！

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

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

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

Fabric.js统治者与缩放

1 个答案: