0

ブラウザウィンドウのサイズに合わせてキャンバスを中央に配置しようとしています。私は常にキャンバスを中央に配置するためにこの css コードを実装してきましたが、fabric.js では機能しません。

ここに私のcssコードがあります

 canvas 
 {   
   /* Código para centrar el canvas*/
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width:200px;

   /*Borde y  color de fondo */
    border-radius:10px;
    background-color:rgb(170, 107, 53);
  }

htmlコード

<canvas id="micanvas" width="200" height="200"></canvas>

JavaScriptコード

var canvas = new fabric.Canvas('micanvas');

デモはこちら

4

2 に答える 2

2

FabricJS がページの DOM を変更しているように見えるため、結果の HTML ソースは次のようになります (Firebug で表示):

<div class="canvas-container" style="width: 200px; height: 200px; position: relative; -moz-user-select: none;">
   <canvas id="micanvas" class="lower-canvas" height="200" width="200" style="position: absolute; width: 200px; height: 200px; left: 0px; top: 0px; -moz-user-select: none;"></canvas>
   <canvas class="upper-canvas " style="position: absolute; width: 200px; height: 200px; left: 0px; top: 0px; -moz-user-select: none; cursor: default;" width="200" height="200"></canvas>
</div>

したがって、キャンバス自体ではなく、.canvas-containerdivを中央に配置する必要があります。

.canvas-container {    
    margin-left: auto;
    margin-right: auto;
}

フィドル

于 2013-07-14T00:44:14.723 に答える
2

生地がcanvas中に入る<div class="canvas-container">ので追加

.canvas-container
{   
    margin-left: auto;
    margin-right: auto;
    width: 200px;
}

jsフィドル

于 2013-07-14T00:45:10.997 に答える