javascript - 在 FabricJS 中创建 "Tools"？

Question

我正在开发一个简单的编辑器，您可以在其中移动文本、图片和几乎任何内容。这并不是太复杂，但是我在使用 PaperJS 和 FabricJS 之间进行选择时遇到了问题 - 主要原因是能够本地转换项目(旋转、缩放等)。

尽管我喜欢 PaperJS，但我确实正在考虑转向 FabricJS。我为 PaperJS 创建了这样的工具:

function shapeTool(options) {
    this.tool = new Tool();
    var options = $.extend({
        shape: "circle",
    }, options);

    this.tool.onMouseUp = function(event) { ... }

    ...
    ...

    this.tool.activate();
    return tool;
}

这可能是创建它们的最糟糕的方法，但对我来说，很容易将所有这些函数放入文件中并初始化我的工具:var tool = new shapeTool(options);

由于我可能会转向 Fabric，因此制作模块化工具的最简单方法是什么。我可以在其中交换它们吗？ (即我有一个工具栏，当我单击按钮时，我的工具发生了变化，这样我就可以自由绘图、插入图像等)

澄清:当我指的是工具时，我指的是 PaperJS 中的工具。在 Paper 中，我们可以交换 Canvas 的事件工具。该工具将处理 Canvas 当前的 mouseDown、KeyDown 等事件。我可以为诸如插入形状和图像之类的事情编写不同的工具，并为自由绘图编写一个工具。然后我可以将事件工具设置为任一工具。这将允许我在自由绘制和插入形状之间切换。

谢谢， 亨特·M.

Answer 1

在 FabricJS 中，您可以通过事件与鼠标行为进行交互。

Cavas火灾:

• 鼠标:向下
• 鼠标:移动
• 鼠标:向上
• 鼠标:悬停
• 鼠标:退出

您使用ON和OFF注册事件:

canvas.on('mouse:down', handler);

您刚刚处于预定义状态，即 DrawingMode true 或 false

canvas.isDrawingMode = true;

免费绘画开始。

当不向下和向上绘制鼠标或移动时，可以通过添加到canvs的属性来自定义。

canvas.myState = 'addStamps';

然后在你的处理程序中:

handler(e) {
  switch (canvas.myState) {
    case 'deleteItems':
      e.target && canvas.remove(e.target);
    break;
    case 'addStamps':
      canvas.add(new fabric.Image('stamp.jpg'));
    break;
  }
}

如果您需要除点击之外的交互，则必须对 mouse:up 或 mosue:move 执行相同的操作。

这是获得类似效果的多种方法之一。