CODEWITHSUNDEEP
canvashtml5-canvasfabricjs
Tudor-Radu Barbu
Tudor-Radu Barbu

Reputation: 494

How can I add a pattern to fit a circle in fabricjs?

I have created this new type of circle (so I can use animations). So far, so good.

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();
   }
 });

And then, I create a pattern from an image and assign it to the new object

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();
});

But it doesn't fit the circle. Ont the right down quarter.

What am I doing wrong?

Upvotes: 1

Views: 169

Answers (1)

Tudor-Radu Barbu
Tudor-Radu Barbu

Reputation: 494

I found out that I have to set the default stuff for circle so I called the objects's main methods in _render:

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

Upvotes: 1

Related Questions