問題タブ [fabricjs]

私はcanvas要素とProcessing.jsがそれを素晴らしいAPIにカプセル化する方法が大好きです。また、通常の処理構文にも精通しています。Processing.jsには、Processing.js内で通常のProcessingスクリプトを実行できるようにするインタープリターが含まれています。ただし、通常のJava構文よりもProcessing.jsのプレーンなJavascript構文を使用することを好みます。インタプリタを含む縮小版のサイズは229kbで、インタプリタを除いたものはまだ193kbです。

サイズが小さい、たとえば50 kbのキャンバスの別の抽象化を誰かが推奨できますか？個人的には、200kbまでは本番環境で使用するには重すぎると思います。

前もって感謝します！

よろしく、マーティン

キャンバスのオブジェクトを保存して JSON に配置したいのですが、グループでそれを行うと、次のエラーが発生します。

Rect-Object で _calcBound() 関数を実行すると、o.setCoords は all.js の関数ではありません (Zeile 10403)。

ここに私のテストコード：

http://tacticboards.xaga.de/test.htmlで、オンライン デモを見つけることができます。お役に立てれば幸いです。

いくつかの入力をキャプチャするためにHTML5キャンバスを作成する必要があります。線画（白地に黒の線）をレンダリングして、ユーザーがのセクションに色を付けられるようにしたいと思います。

次に、このデータを最後に取得してサーバー側で処理し、後日再度レンダリングできるようにしたいと思います。

画像をレンダリングするためのデータをデータベースに保存して、潜在的に任意の画像を描画できるようにしたいと思います。

HTML5とcanvasタグを調べました。Kineticjsライブラリにもあります。必要なものの簡単なデモを作成することができました。

http://jsfiddle.net/6qskx/

私がデモしたところから、このアプローチは、イベントを追加できるように各セクションを作成して描画する必要があるため、最初から画像を維持するのもセットアップするのも非常に困難です。

私の質問は-このようなものや、提案する多くのフレームワークのいずれかを使った経験はありますか？

• どのフレームワークが最適か
• どのアプローチが最も柔軟で管理しやすいでしょう。

私はfabric.jsを使い始めたばかりで、（おそらく初心者の）エラーがあります：

私は次のコードでjqueryでファブリックを使用しています：

このコードは、キャンバス上に140x100の長方形を描画する必要があります。悲しいことに、長方形の4分の1しか表示されません。上と左の値をより大きな数値に変更すると、より多くの長方形がキャンバスに表示されます。

したがって、キャンバスの原点は0/0ではなく、sthにあるようです。より高い。

誰かがこれを修正する方法や私が間違っていることを知っていますか？

よろしくお願いします、マクファーレン

ビデオ要素でfabric.jsを使用して図形を描画したいと思います。私はJavaScrpit、jQuery、fabric.jsを初めて使用します。

これが可能かどうか誰かが私にいくつかの援助を与えることができれば私はありがたいです。いくつかのサンプル行は非常に役立ちます。

画像（png）での描画は、fabric.jsがすぐに使用できるため、問題ありません。しかし、ビデオ要素では、期待した結果が見つかりません。

Fabric.jsでオーバーレイ画像を使用すると、次のように追加されます。

私の問題は、キャンバスからそれを削除する方法が見つからないことです。remove(object)クラスから使用できるオブジェクトを削除するにはfabric.StaticCanvas、このメソッドのオブジェクトとしてオーバーレイ画像を提供する方法が見つかりません。オーバーレイ画像を次のように設定しようとしましたnull：

しかし、それは役に立ちませんでした。

イメージとテキストの組み合わせを含み、1 つのグループとして動作するグループを作成したいのですが、それを行うと、次のようになります。

https://gist.github.com/1682293

そのグループを移動できません。それを機能させるには、最初に画像とテキストをキャンバスに追加し、次にこれらの画像とテキストでグループを作成してから、個別に追加された画像とテキストを削除する必要があります。

私はそこで何が間違っていますか？

ユーザーがキャンバスに描画し、png画像に保存できる1つのプロジェクトでfabric.jsを使用しています(canvas.toDataURL()関数を使用)。ただし、ユーザーがオブジェクトを移動して [保存] ボタンをクリックすると、以前に移動したオブジェクトの境界線と角が保存されることに気付きました (オブジェクトを移動またはサイズ変更すると、境界線は常に表示されます)。では、保存する前にオブジェクトの境界線を削除する方法が必要なのですが、それは可能でしょうか?

以前のJavaScript関数で定義されたtop属性とleft属性を持つCanvasオブジェクトがありますが、ファブリックCanvasオブジェクトを作成すると

私のHTMLCanvasでは、topとleftの属性が0に設定されています。

スクリプトを使用してファブリックCanvasオブジェクトを作成した後、top属性とleft属性を設定しようとしましたが、これを行うと、キャンバスの位置は変わりますが、ファブリック関数（選択および移動関数）は、キャンバスが以前に配置されていた場所（ファブリックキャンバスには配置）！

この競合を解決するにはどうすればよいですか？キャンバスを等しく保つ方法はありますか？