web-dev-qa-db-ja.com

Fabric.js：キャンバス上の1つまたは複数のオブジェクトを選択解除する方法は？

たとえば、キャンバスに複数のオブジェクトがあります[〜＃〜] a [〜＃〜]、*[〜＃〜] b [〜＃〜]*および[〜＃〜] c [〜＃〜]。これらのオブジェクトのうち3つがアクティブとして選択されます。 Fabric.jsを使用することで、オブジェクトを1つのみを破棄/非アクティブ化できますか？

たとえば、3つのオブジェクトが選択されている場合、キャンバスの外側のボタンをクリックすると、オブジェクトBは破棄/非アクティブ化されます。

FabricJSの公式Webサイトでドキュメントファイルを調べましたが、canvas.deactivateAll（）、canvas.discardActiveObject（）しか見つかりませんでした。これらの機能は、特定のアクティブオブジェクトではなく、すべてのアクティブオブジェクトのみを非アクティブにできます。

誰かが私にこれに関するガイドを教えてもらえますか？ありがとう！

javascriptcanvasfabricjs
24
PaulLing

私はこれに答えるのが遅れるかもしれませんが、最新のfabricjs (1.4.3)では、以下を使用して、キャンバス上の選択されたすべてのオブジェクトを選択解除できます。

canvas.deactivateAll().renderAll();

そのキャンバスの画像を作成する前にこれを使用しています。それが誰かを助けることを願っています。

50
Shantanu Wagh

3つのオブジェクトobjectA、ObjectB、ObjectCがあり、オブジェクトが選択されているとします。オブジェクト（たとえば、ObjectB）の選択を解除する場合。この場合、次のコードを試すことができます。

var activeGroup = canvas.getActiveGroup();
activeGroup.removeWithUpdate(ObjectB);
canvas.renderAll();

アクティブなノードが1つだけの場合は、実行できます。

canvas.discardActiveObject();
canvas.renderAll();
13
MANISH KUMAR SINGH

アクティブなグループをすべて破棄するには、以下の関数を使用できます。現在アクティブなグループを破棄し、イベントを発生させます。イベントがマウスイベントの結果としてファブリックによって呼び出された場合、イベントはパラメーターとして渡され、カスタムイベントの発生関数に送信されます。メソッドとして使用する場合、eパラメータにはアプリケーションはありません。

canvas.discardActiveGroup();

単一オブジェクトを破棄するには、次のように使用できます。現在アクティブなオブジェクトを破棄し、イベントを発生させます。関数がマウスイベントの結果としてファブリックによって呼び出された場合、イベントはパラメーターとして渡され、カスタムイベントの起動関数に送信されます。メソッドとして使用する場合、eパラメータにはアプリケーションはありません。

canvas.discardActiveObject();

そして最後に、最終的にトップキャンバスとセカンダリコンテナキャンバスの両方をこのようにレンダリングします。

canvas.renderAll();
12
Shyam Shingadiya

私はそうする方法を見つけました：

複数のオブジェクトがアクティブ化されると、それらは実際にグループを形成しました。その後、実際には「removeWithUpdate」というfabric.groupのメソッドを使用するだけで、その後は実行されます。

例：

var activeGroup = canvas.getActiveGroup();
activeGroup.removeWithUpdate(theObject);
canvas.renderAll();
1
PaulLing