使用Fabric.js创建的圆在画布上生成椭圆形状

Question

我是fabric.js的新手，我想使用fabric创建一个圆圈并在画布上渲染它我已经完成了以下代码。但是这段代码生成的椭圆形图形不是一个完美的圆形，请让我知道为什么会这样。

this.canvasIns = new fabric.Canvas('mySampleCanvas');

var myCircle = new fabric.Circle({
      radius:50,
      borderColor: 'black',
      fill:'#fff'
    });

this.canvasIns.add(myCircle);
this.canvasIns.renderAll();

Answer 1

检查html属性和css的高度和宽度是否相同。如果使用CSS设置画布的大小，画布将被拉伸而不会调整为CSS值。

例：
  - 画布尺寸：500：500，你的圆圈：100：100
  - CSS大小：1000：500
  - 屏幕上的画布尺寸：1000：500，您的圆圈：200：100

在我的情况下，我通过在fabric.js生成的画布周围添加<div>来获得所需的宽度和高度值，然后在pageload上使用javascript设置画布大小来解决问题：

HTML：

<div id="drawingArea">
    <canvas id="canvas" class="canvas-layer" height="500" width="500"></canvas>
</div>

Javascript：

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

$(window).on('load', function (e) {
    canvas.setHeight($('#drawingArea').height());
    canvas.setWidth($('#drawingArea').width());
});

Answer 2

我发现了问题，因为我遇到了这个问题。之所以发生这种情况，是因为我使用以下代码动态更改画布的高度和宽度。 由于这个问题正在发生。

var canvasElement = this.myCanvas.nativeElement;
    canvasElement.style.height = canvasElement.nextElementSibling.style.height = this.canvas_css.height;
    canvasElement.style.width = canvasElement.nextElementSibling.style.width = this.canvas_css.width;
    canvasElement.style.left = canvasElement.nextElementSibling.style.left = this.canvas_css.left;
    canvasElement.style.top = canvasElement.nextElementSibling.style.top = this.canvas_css.top;

我删除了这段代码，并为画布提供了静态样式，并且工作正常。