Fabric.js统治者与缩放

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

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

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

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

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

小提琴

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

  // 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绑定鼠标滚动事件，因此当您使用鼠标滚轮时将进行放大和缩小。

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

更新了鼠标滚动小提琴