3

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

  var fabricCanvas= new fabric.Canvas('mycanvas');

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

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

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

4

4 に答える 4

5

Fabric.jsを使用してキャンバスを作成すると、それがdivでラップされ、2番目が追加<canvas>されます（最初のキャンバスでレンダリングされるオブジェクトを選択するために使用されます）。これは、Fabric.jsのwikiページで説明されています。キャンバスを配置する場合は、クラス「canvas-container」の親div要素にCSSルールを適用します。

于 2012-09-07T14:46:32.327 に答える
0

私の同じスレッドからの回答

申し込み

margin: 0 auto;

クラスへ=canvas-container

canvas-containerはファブリックによって自動的に作成されます。

フィドルを参照してください

于 2013-02-26T14:21:18.087 に答える
0

ある種のcssプリプロセッサ（私にとってはAngular内のscssスタイルシート）を使用している場合、コンポーネントscssファイル内の「canvas-container」クラスをターゲットにすると機能しないことに注意してください。私にとっての回避策は、一般的なプロジェクトのcssファイルでした。

于 2019-02-17T07:48:10.933 に答える
0

次のように、初期化時にcanvas-containerクラスをオーバーライドできます。

new fabric.Canvas('canvasId', {containerClass: 'custom-container-class'});

http://fabricjs.com/docs/fabric.Canvas.html#containerClass

于 2022-02-18T16:37:42.607 に答える