Fabric JS如何在选定对象的边界框上设置边框半径

Question

是否可以更改所选项目的边界框的边框半径？我已经阅读了可以归因于对象的可能属性的文档，但没有找到任何指定对象边界框的边界半径更改的内容。是否有可能通过 CSS 解决这个问题？

Answer 1

这里是处理选择边框绘制的fabric.Object.prototype.drawBorders 方法的直接替换。我已经扩展它以使用属性selectionRadius 来确定要在选择框中使用的边框半径量。

var canvas = new fabric.Canvas("canvas");

canvas.add(new fabric.Rect({
  width: 150,
  height: 100,
  left: 25,
  top: 25,
  fill: 'lightgreen',
  strokeWidth: 0,
  padding: 20,
  selectionRadius: 20,
  borderColor: 'red'
}));

fabric.Object.prototype.drawBorders = function(ctx, styleOverride) {
  styleOverride = styleOverride || {};
  var wh = this._calculateCurrentDimensions(),
    strokeWidth = this.borderScaleFactor,
    width = wh.x + strokeWidth,
    height = wh.y + strokeWidth,
    hasControls = typeof styleOverride.hasControls !== 'undefined' ?
    styleOverride.hasControls : this.hasControls,
    shouldStroke = false;

  ctx.save();
  ctx.strokeStyle = styleOverride.borderColor || this.borderColor;
  this._setLineDash(ctx, styleOverride.borderDashArray || this.borderDashArray, null);

  //start custom draw method with rounded corners
  var rx = this.selectionRadius ? Math.min(this.selectionRadius, width / 2) : 0,
    ry = this.selectionRadius ? Math.min(this.selectionRadius, height / 2) : 0,
    w = width,
    h = height,
    x = -width / 2,
    y = -height / 2,
    isRounded = rx !== 0 || ry !== 0,
    /* "magic number" for bezier approximations of arcs */
    k = 1 - 0.5522847498;
  ctx.beginPath();

  ctx.moveTo(x + rx, y);

  ctx.lineTo(x + w - rx, y);
  isRounded && ctx.bezierCurveTo(x + w - k * rx, y, x + w, y + k * ry, x + w, y + ry);

  ctx.lineTo(x + w, y + h - ry);
  isRounded && ctx.bezierCurveTo(x + w, y + h - k * ry, x + w - k * rx, y + h, x + w - rx, y + h);

  ctx.lineTo(x + rx, y + h);
  isRounded && ctx.bezierCurveTo(x + k * rx, y + h, x, y + h - k * ry, x, y + h - ry);

  ctx.lineTo(x, y + ry);
  isRounded && ctx.bezierCurveTo(x, y + k * ry, x + k * rx, y, x + rx, y);

  ctx.closePath();
  ctx.stroke();
  //end custom draw method with rounded corners


  if (hasControls) {
    ctx.beginPath();
    this.forEachControl(function(control, key, fabricObject) {
      // in this moment, the ctx is centered on the object.
      // width and height of the above function are the size of the bbox.
      if (control.withConnection && control.getVisibility(fabricObject, key)) {
        // reset movement for each control
        shouldStroke = true;
        ctx.moveTo(control.x * width, control.y * height);
        ctx.lineTo(
          control.x * width + control.offsetX,
          control.y * height + control.offsetY
        );
      }
    });
    if (shouldStroke) {
      ctx.stroke();
    }
  }
  ctx.restore();
  return this;
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.4.0/fabric.min.js"></script>
<canvas id="canvas" height="300" width="400"></canvas>