在 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 触发：

鼠标：向下
鼠标：移动
mouse:up
鼠标：悬停
鼠标：出

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

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

在 FabricJS 中创建 "Tools"？

Creating "Tools" in FabricJS?

javascript

canvas

fabricjs

paperjs