Fabric.js统治者与缩放 [英] Fabric.js ruler with zoom

问题描述

我有疑问。
我正在编写像这个的编辑器，我也是想要一个标尺来添加它（用鼠标滚动改变值（放大和缩小））

I' ve question. I'm coding an editor like this, and I also want a ruler to add it (which change values with mouse-scroll (zoom in and out) )

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

But I can't do it. I tried all rulers on github but they are running only body tag.

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

Unfortunately, there are no documents for zoom in or zoom out.

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

I'm new with HTML5 canvas and I'm stuck. Waiting for your helps. Thanks!

推荐答案

一种方法是拥有三个独立的画布，一个作为主画布，一个作为顶部/左侧统治者。

One approach would be to have three separate canvases, one as the main canvas and one each for the top/left rulers.

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

When zooming in/out, you set the zoom level on the main canvas, but you will need to redraw the rulers manually, here is a really simple example:

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

小提琴

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

UPDATE: For the rulers, here's some very simple code to draw figures on the top ruler (fiddle also updated):

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

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

Now, of course you will want to convert those numbers into whatever units are appropriate for your application. Also, you may want to consider drawing the numbers at more frequent intervals when you're zoomed in, and to space them out more when you're zoomed out. But I think I've given you enough to get you going here.

在 document.ready 这将使用画布绑定鼠标滚动事件，因此当您使用鼠标滚轮时会发生放大和缩小。

Add the below code in document.ready this will bind a mouse scroll event with the canvas and hence the zoom in and out will happen when you use mousewheel.

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

鼠标滚动更新小提琴

这篇关于Fabric.js统治者与缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！