0

オブジェクトのサイズに問題があります。簡単な例を次に示します。

<!doctype html>
<html>
<head>
    <script src="js/fabric-0.9.15.min.js"></script>
</head>
<body>
    <canvas id="test" width="512" height="512" style="border: 1px solid black;"></canvas>

    <div style="width: 512px; background: blue;">&nbsp;</div>

    <script>
      var canvas = new fabric.Canvas('test');

      var rect = new fabric.Rect({
        left: 0,
        top: 0,
        fill: 'red',
        width: 512,
        height: 512
      });

      canvas.add(rect);
    </script>
</body>
</html>

ご覧のとおり、サイズが512pxのキャンバスがあり、テスト用に幅が512pxのdivがあります。また、512pxのサイズで描画するrectオブジェクトを作成しました。

スクリーンショットを見る

生地は半分のサイズで長方形を描きます。なぜ、または私が間違った方法で何をしているのか教えていただけますか？

4

1 に答える 1

2

Rectangle は実際には 512, 512 です。問題はオブジェクトの原点です。

これは長方形の真ん中なので、長方形の 4 分の 1 しか表示されません。

上と左を 256 に変更してみてください。違いがわかります。

于 2012-12-13T13:28:30.770 に答える