画布免费绘图和添加形状

Question

我正在尝试创建一个免费的绘图工具，其中包含向画布添加形状的选项。用户将在画布底部有带有形状的按钮。如果他点击一个圆圈，那么一个圆圈将添加到画布中，并且可以选择缩放它并在画布上移动。

我的问题是当我添加一个形状而不是尝试单击它来移动它时，画布绘制而不是选择形状。

我正在尝试使用 fabric.js，但我没有在他们的演示中看到如何同时拥有这两者。

Answer 1

我通过在页面上有两个画布区域解决了我的应用程序中的这个问题。就我而言，我将第一个命名为“prep”，将实际绘图区域命名为“stage”

 <div class="col-sm-2"> 
    <canvas id="prep" width="150" height="500" style= "border: 1px solid #d3d3d3;"></canvas>
</div>
  <div class="col-sm-10">
    <canvas id="stage" width="650" height="500" style="border: 1px solid #d3d3d3;"></canvas>
</div>

然后，我在准备区添加了一个 mouse:down 事件。如果在“准备”区域中单击形状，则会将克隆对象添加到“舞台”区域。

prep.on('mouse:down', function(options){
if(options.target) {
    if (fabric.util.getKlass(options.target.type).async) {  
        console.log('entered')
      options.target.clone(function (clone) {
        clone.set({left: 200, top: 100});
        stage.add(clone);
      });
    }
    else {
      stage.add(options.target.clone().set({left: 100, top: 100}));
    }
}

});

当您初始化要放置在准备区域的形状时，您可以将它们设为可选：false。在我的应用程序中，selectable:false 在克隆期间没有被传输（不确定这是否是我的代码中的错误） - 您也可以在克隆期间更改属性。

注意 - 代码的 if(...async) 部分是为了处理我在准备区域中同时具有 SVG 和正常形状的事实。如果您只有标准织物形状，则只需要 else 语句中包含的代码。