Question

我遇到了对象大小的问题。这是一个简单的例子：

<!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用于测试。我也创建了rect对象来绘制大小为512px。

请参阅screenshot

Fabric使用半尺寸绘制rect。你能否以错误的方式告诉我为什么或做什么？

Answer 1

矩形实际上是512,512。您遇到的问题是对象的来源。

矩形的中间位置，因此仅显示矩形的四分之一。

尝试将顶部和左侧更改为256，您将看到差异。

Fabric.js对象大小

1 个答案: