Canvas 无画布绘制和添加形状

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

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

---

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

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

}))

当您初始化要放置在准备区域上的形状时，可以将其设置为可选：false。在我的应用程序中，可选择的：false在克隆过程中未被传输（不确定这是否是我的代码中的错误）-您还可以在克隆过程中更改属性

---

注意-代码的if（…async）部分是为了处理这样一个事实，即我在prep区域中同时拥有SVG和普通形状。如果您只有标准的织物形状，您只需要

else

语句中包含的代码。

谢谢。虽然我对面料还不熟悉，但我还是会试试。没有面料的话，它能用吗？我已经在Canvast中编写了免费绘图的代码。一般的方法在没有织物的情况下可以工作，但我不知道您需要什么代码的细节。我采取的方法的总结是a）有两个画布，b）使用鼠标：向下连接到画布1，从一个克隆到另一个。通过附加到画布1，在画布2中单击复制的形状将不会执行复制。我强烈推荐使用Fabric来制作你的免费画图工具，尽管它可以让你做很多事情变得非常简单。

 <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>

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}));
    }
}