を相殺していると私は（おそらく初心者）エラーがあります。は、私はちょうどfabric.jsを始め
私は次のコードでjQueryを使って生地を使用しています：
$(document).ready(function() {
canvas = new fabric.StaticCanvas('scroller');
canvas.add(
new fabric.Rect({ top: 0, left: 0, width: 140, height: 100, fill: '#f55' })
);
});
をこのコードはキャンバス上に140x100の長方形を描画する必要があります。 悲しいことに、四角形の1/4しか現れません。 上の値と左の値を高い数値に変更すると、より多くの長方形がキャンバスに表示されます。
キャンバスの起点は0/0ではなく、sthです。高い。
誰かがこれを修正する方法や私が間違っていることを知っていますか？ここでは、事前に
おかげで、 マクファーレン
は、いくつかの例にjsfiddleリンクですhttp://jsfiddle.net/pukster/sdQ7U/2/
私の推測では、それが正確に四分の一を描いているので、fabric.jsが原点（中点）からすべてを計算していることです矩形の10倍のキャンバスでも矩形の長さを知ることができます。私の推測では、topとleftは実際には仮想の境界ボックスの上辺と左辺ではなく、原点を参照していると考えられます。問題は、fabricjsに関するドキュメントがほとんどないことです。あなたはhttp://jsfiddle.net/pukster/sdQ7U/3/
EDITその OK I午前現在はほぼ絶対確実ここで同じフィドルのですが、代わりに長方形の四角で（それがより明確である）
EDITをeaseljs fabricjsを使用していない何らかの理由がありますfabric.jsは、センターをtop/leftとして使用します。私は彼らのexample off of their siteを裂いて、純粋なキャンバス（青い枠線はキャンバス要素の限界です）でコード化されていたそれらの形に透明なcouterpartを重ねました。
あなたは何を参照してくださいボックスが正確にを半分にオフセットが、円は（私は半円形を描いたそれ以外の場合は、識別可能なされていません）完全に重なっているされていることです。これはHTMLキャンバスのb/cで、円の座標は(x,y)で、左上ではなく原点を表します。私は三角形b/cを気にしなかった。私の三角法は少し錆びている。私は個人的には、xとyがより代表的で短くなっていた場合は、topとleftの用語を誤解していると思います。
ありがとうございました。あなたが正しいです、fabricJS Object Originsはオブジェクトの真ん中にあります。私は現在fabricJSを使用しています。これは、多数の素晴らしい機能（たとえば、後で使用するSVGサポートなど）を備えたオールインワンフレームワークなのでです。多分私はprocessingjsに切り替えるでしょう。私は後で2つを試して比較します。 – McFarlane
@McFarlane：これを進めましたが、結果は何でしたか？私はあなたが言及した比較を含むフォローアップに興味があるでしょう。 –
FWIWでは、今後の1.4リリースで、origin/originがデフォルトでleft/topに切り替える予定です。ユーザーのほとんどは、これがより直感的であると感じています。 – kangax
はい、これは非常に予期せず、文書化されていません。
対処方法：各作成されたオブジェクトのための
設定
originX: "left"
originY: "top"
。
を編集するか、下記のコメントにkangax simpleer solutionを使用してください。
オブジェクトごとに設定する必要はありません。 Fabricは継承を最大限に活用しているので、 'fabric.Object.prototype.originX = true; fabric.Object.prototype.originY = true; ' – kangax
私は自分自身のコメントについてライブラリの作者にニックピッチしたくないですが、' fabric.Object.prototype.originX = "left"; fabric.Object.prototype.originY = "top"; '？ – markerikson
kangax、プロジェクトに対する敬意とヒント。私は別の建設的な暴言を入れてみましょう：描画オブジェクトのような軽量オブジェクトは、パフォーマンス上の理由から継承を使用する最後のものでなければなりません。 – citykid
私はコメントしたいと思いますが、評判が足りません。
fabric.Object.prototype.originX = "left";
fabric.Object.prototype.originY = "top";
形状が微細化されますが、私は、サイズ変更や移動のためにそれを選択すると、それは別の場所にオフセットを取得します：とにかく、ここで私は、次の手順を実行したときに何が起こるかです。最良の方法は、set（）メソッドを使用して、すべてのオブジェクトの座標を個別に設定することです。
こんにちはMcFarlane =）ようこそ。コードを投稿するたびに、jsfiddle.netに完全な（または最小限の例の）コードを投稿するだけで、コードを貼り付けて保存して、ここにリンクを貼り付けると、より速い回答を得ることができます。 – puk
あなたのキャンバス？おそらくそれは '140x100'よりも小さいでしょう。あなたの詳細な答えをありがとうございました – puk