Question

我是画布的新手。如何使用fabricjs在画布中创建椭圆形状？

(function() {
  var canvas = this.__canvas = new fabric.StaticCanvas('canvas');

  canvas.add(
    new fabric.Rect({
      top: 100,
      left: 100,
      width: 50,
      height: 50,
      fill: '#f55'
    }),
    new fabric.Circle({
      top: 140,
      left: 230,
      radius: 75,
      fill: 'green',
      angle: 0
    }),
    //new fabric.Ellipse({ originX: 140, originY: 230, angle: 20, fill: 'green' }),
    new fabric.Triangle({
      top: 300,
      left: 210,
      width: 100,
      height: 100,
      fill: 'blue'
    })
  );

  fabric.Image.fromURL('../lib/pug.jpg', function(img) {
    canvas.add(img.set({
      left: 400,
      top: 350,
      angle: 30
    }).scale(0.25));
  });
})();

Answer 1

这可以通过使用Fabric Ellipse class。

来实现

见下面的例子：

＆＃13;

ellip = new fabric.Ellipse({
  left: 50,
  top: 50,
  strokeWidth: 1,
  stroke: 'black',
  fill: 'white',
  selectable: true,
  originX: 'center', 
  originY: 'center',
  rx: 5,
  ry: 1
});

canvas.add(ellip);

＆＃13;

Answer 2

您需要创建一个fabric.Ellipse的对象，并使用属性rx:作为水平半径，使用ry:作为椭圆的垂直半径。

<强> 样本

var canvas = new fabric.Canvas('c');
var ellipse = new fabric.Ellipse({
  left: 20,
  top: 20,
  rx: 150,
  ry: 50,
  fill: 'yellow'
});
canvas.add(ellipse);

canvas{
 border : 2px solid #000;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="400" height="400"></canvas>

如何在画布中创建椭圆形状？

2 个答案: