Question

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

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

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

Answer 1

我在我的应用中通过在页面上有两个Canvas区域解决了这个问题。在我的情况下，我将第一个命名为“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>

然后，我在准备区域添加了一个鼠标：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语句中包含的代码。

帆布免费绘图和添加形状

1 个答案: