6

私は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の長方形を描画する必要があります。悲しいことに、長方形の4分の1しか表示されません。上と左の値をより大きな数値に変更すると、より多くの長方形がキャンバスに表示されます。

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

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

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

4

3 に答える 3

9

これは、いくつかの例を含むjsfiddleリンクですhttp://jsfiddle.net/pukster/sdQ7U/2/

私の推測では、fabric.jsは、長方形の10倍のサイズのキャンバスでも、長方形のちょうど1/4を描画しているため、原点（中間点）からすべてを計算します。私の推測ではtop、left実際には、架空のバウンディングボックスの上部と左側ではなく、原点を参照しています。問題は、fabricjsに関するドキュメントがほとんどないことです。easeljsではなくfabricjsを使用している理由はありますか？

編集これは同じフィドルですが、長方形の代わりに正方形が使用されています（より明確です）http://jsfiddle.net/pukster/sdQ7U/3/

EDIT OKこれで、fabric.jsが中心をtop/として使用することはほぼ確実ですleft。私は彼らの例を彼らのサイトから取り除いて、それらが純粋なキャンバスhttp://jsfiddle.net/pukster/uathZ/2/でコーディングされていれば、それらの形状に透明なcouterpartでオーバーレイしました（青い境界線はキャンバス要素の限界です） 。

オーバーレイされた純粋なキャンバス画像

表示されているのは、ボックスが正確に半分オフセットされているが、円（半円を描いただけで、そうでなければ識別できなかった）が完全に重なっていることです。これはHTMLCanvasのb/cであり、円の座標(x,y)は左上ではなく原点を参照します。私は三角形を気にしませんでしたb/c私の三角法は少し錆びています。個人的には、 「と」という用語topを使用するのは誤解を招くと思います。leftxy

于 2012-01-11T00:05:13.137 に答える
5

はい、これは非常に予想外であり、さらに文書化されていません。

回避策：

セットする

originX: "left"
originY: "top"

作成されたオブジェクトごとに。

編集：または、以下のコメントでkangaxのより単純なソリューションを使用してください。

于 2013-03-19T11:20:21.303 に答える
2

コメントしたいのですが、評判が足りません。とにかく、これが私が次のことをしたときに何が起こるかです：

fabric.Object.prototype.originX = "left";
fabric.Object.prototype.originY = "top";

形状は細かくレンダリングされますが、サイズ変更または移動のために選択すると、別の場所にオフセットされます。最善のアプローチは、set（）メソッドを使用してすべてのオブジェクトの座標を個別に設定することです。

于 2014-01-17T20:47:12.653 に答える