Блог

Я создал этот новый тип круга (чтобы я мог использовать анимацию). Пока все хорошо.

 const Circle = fabric.util.createClass(fabric.Circle, {
   objectCaching: false,
   initialize: function(options) {
      this.callSuper('initialize', options);

      this.radius  = 150;
      this.fill    = 'navy';
      this.originX = 'center';
      this.originY = 'center';
      this.left    = 150;
      this.top     = 150;
      this.width   = this.radius * 2;
      this.height  = this.radius * 2;

      // var rotateAngle = 36 * Math.PI / 180;
      this.startAngle = 0;
      this.endAngle = 2 * Math.PI;

   },

   animateWidthHeight: function() {
     //make animation here
   },

   _render: function(ctx) {
     ctx.beginPath();
     ctx.arc(0, 0, this.radius, this.startAngle, this.endAngle, false);
     ctx.fill();
   }
 });
 

А затем я создаю шаблон из изображения и присваиваю его новому объекту

 new fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(img) {
  rotatingCircle.set('fill', new fabric.Pattern({
     source: img.src,
     repeat: 'no-repeat',
     offsetX: 0,
     offsetY: 0
   }));
   canvas.renderAll();
});
 

Но он не соответствует кругу. Поверните правую нижнюю четверть.

Что я делаю не так?

Я обнаружил, что мне нужно установить материал по умолчанию для circle, поэтому я вызвал основные методы объектов в _render:

     _render: function(ctx) {
      ctx.beginPath();
      ctx.arc(0, 0, this.radius, this.startAngle, this.endAngle, false);
      this._renderFill(ctx);
      this._renderStroke(ctx);
    }