Javascript Fabric.js标尺，带缩放功能

我有一个问题。 我正在编写一个编辑器，比如，我还需要一个标尺来添加它（可以通过鼠标滚动（放大和缩小）来更改值）

但我做不到。我尝试了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);
  }}

---

我不知道如何重新绘制标尺。你能帮助我吗？如何在标尺上打印数字（1厘米、2厘米等）？谢谢你的帮助。最后，如何在不缩放的情况下保存画布（即使是否使用了缩放），我对canvas和jQuery是新手。非常感谢。答案更新了。你应该有足够的钱让你现在就走。就保存画布而言，您可以将画布导出到图像，或者按照使用Adobe Flash Player制作链接的内容中所述序列化结构对象。

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

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