Fabricjs -单边圆角

Question

我正在使用fabricjs，我需要创建一些相互连接的Rect。

第一个和最后一个矩形只需要在朝外的一侧有一个圆角。

我知道我可以在fabricjs上创建自定义类，但我对所有的画布东西都是新手。

有人能给我指点一下吗？

Answer 1

是的，创建自定义类是您可以做的最好的事情，也是最不那么麻烦的事情。您必须扩展rect并覆盖render函数：

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

请考虑这门课的草稿，但应该能让你明白。

然后执行var rect = fabric.rectAsymmetric({width:200，height:100，side:'left'})；并尝试。将类的名称更改为不那么难看的名称。