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 执行相同的操作。

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