Fabricjs - 一侧的圆角

Question

I'm working with fabricjs and I need to create few Rects that attached each other..
The first and the last rect need to have a rounded corner only on the side facing outwards..

I know that I can create custom class on fabricjs but I really new in all the canvas stuff..

Is someone can give me a guidance?

Answer 1

Yes creating a custom class is the best and less hackish thing you can do. You have to extend rect and override the render function:

fabric.RectAsymmetric = fabric.util.createClass(fabric.Rect, /** @lends fabric.Rect.prototype */ {

/**
 * Side of rounding corners
 * @type String
 * @default
 */
side: 'left',

_render: function(ctx, noTransform) {

  if (this.width === 1 && this.height === 1) {
    ctx.fillRect(0, 0, 1, 1);
    return;
  }

  var rx = this.rx ? Math.min(this.rx, this.width / 2) : 0,
      ry = this.ry ? Math.min(this.ry, this.height / 2) : 0,
      w = this.width,
      h = this.height,
      x = noTransform ? this.left : -this.width / 2,
      y = noTransform ? this.top : -this.height / 2,
      isRoundedLeft = (rx !== 0 || ry !== 0) && side === 'left',
      isRoundedRight = (rx !== 0 || ry !== 0) && side === 'right',
      k = 1 - 0.5522847498 

  ctx.beginPath();

  ctx.moveTo(x + (isRoundedLeft ? rx : 0), y);
  ctx.lineTo(x + w - (isRoundedRight ? rx : 0), y);
  isRoundedRight && ctx.bezierCurveTo(x + w - k * rx, y, x + w, y + k * ry, x + w, y + ry);
  ctx.lineTo(x + w, y + h - (isRoundedRight ? ry : 0));
  isRoundedRight && ctx.bezierCurveTo(x + w, y + h - k * ry, x + w - k * rx, y + h, x + w - rx, y + h);
  ctx.lineTo(x + (isRoundedLeft ? rx : 0), y + h);
  isRoundedLeft && ctx.bezierCurveTo(x + k * rx, y + h, x, y + h - k * ry, x, y + h - ry);
  ctx.lineTo(x, y + (isRoundedLeft ? ry : 0));
  isRoundedLeft && ctx.bezierCurveTo(x, y + k * ry, x + k * rx, y, x + rx, y);

  ctx.closePath();

  this._renderFill(ctx);
  this._renderStroke(ctx);
},
}

Please consider a draft of the class, but should get you the idea.

Then just do var rect = fabric.rectAsymmetric({width:200, height:100, side:'left'}); and try. Change the name of the class to something less ugly.