キャンバスフリーの図形と図形の追加

Question

キャンバスに図形を追加するオプション付きの無料の描画ツールを作成しようとしています。ユーザーはキャンバスの下部に形状を持つボタンを表示します。円をクリックすると、円がキャンバスに追加され、それを拡大縮小しキャンバスの周りを移動するオプションが追加されます。

私の問題は、シェイプを追加し、それを移動しようとするより、シェイプを選択する代わりにキャンバスを描画することです。

私はfabric.jsで作業しようとしていますが、デモでは両方の方法がわかりません。

Answer 1

私は、この問題をページ上に2つのキャンバス領域を持つことで解決しました。準備区域にダウンイベント：私の場合は、次に

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

最初の「準備」と実際の描画領域1「のステージを」という名前の、私はマウスを追加しました。 'prep'領域で図形をクリックすると、複製されたオブジェクトが 'stage'領域に追加されます。

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は、クローン中に転送されませんでした（私のコードで間違いであったかどうかはわかりません）。クローン中にプロパティを変更することもできます。

注 - コードのif（... async）部分は、私がprep領域にSVGと標準形状の両方を持っているという事実に対処することです。標準的なファブリックシェイプしか持たない場合は、elseステートメントに含まれているコードのみが必要です。