Fabric Js - 改变控制角的位置

Question

我有一个 fabric js 矩形，我想在矩形内移动控制方块。

我不知道这在我使用的版本中是否可行，我没有找到如何做到这一点。

注意我使用的是fabric.js版本：2.4.6

这是我试过的方法：

      this._cropRect = new window.fabric.Rect({
        top: 0,
        left: 0,
        width: this.options.canvasWidth,
        height: this.options.canvasHeight,
        fill: 'red',
        strokeWidth: 0,
        lockRotation: true,
        lockScalingFlip: true,
        lockUniScaling: true,
        hasBorders: false,
        hasRotatingPoint: false,
        padding: -12,
        cornerColor: 'red',
        borderColor: 'red',
        cornerStroke: 10,
        borderScaleFactor: 2,
        cornerSize: CROP_CORNER_SIZE,
        borderOpacityWhenMoving: 1,
      })

      this._cropRect.set('globalCompositeOperation', 'destination-out')

      this._fabricCanvas.add(this._cropRect)
      this._fabricCanvas.setActiveObject(this._cropRect)
      this._fabricCanvas.requestRenderAll()

这是我现在所拥有的以及我想要实现的目标的图像：

更新：

我创建了一个 jsfiddle：https://jsfiddle.net/t94ksgeq/

Answer 1

您可以扩展裁剪矩形的绘制功能。


cropRect.drawControls = function(t, e) {
    e = e || {};
    var i = this._calculateCurrentDimensions(),
        // Modified variable r and n
        r = i.x - this.cornerSize,
        n = i.y - this.cornerSize,
        s = e.cornerSize || this.cornerSize,
        o = -(r + s) / 2,
        a = -(n + s) / 2,
        h = void 0 !== e.transparentCorners ? e.transparentCorners : this.transparentCorners,
        c = void 0 !== e.hasRotatingPoint ? e.hasRotatingPoint : this.hasRotatingPoint,
        l = h ? "stroke" : "fill";
    return t.save(), t.strokeStyle = t.fillStyle = e.cornerColor || this.cornerColor, this.transparentCorners || (t.strokeStyle = e.cornerStrokeColor || this.cornerStrokeColor), this._setLineDash(t, e.cornerDashArray || this.cornerDashArray, null), this._drawControl("tl", t, l, o, a, e), this._drawControl("tr", t, l, o + r, a, e), this._drawControl("bl", t, l, o, a + n, e), this._drawControl("br", t, l, o + r, a + n, e), this.get("lockUniScaling") || (this._drawControl("mt", t, l, o + r / 2, a, e), this._drawControl("mb", t, l, o + r / 2, a + n, e), this._drawControl("mr", t, l, o + r, a + n / 2, e), this._drawControl("ml", t, l, o, a + n / 2, e)), c && this._drawControl("mtr", t, l, o + r / 2, a - this.rotatingPointOffset, e), t.restore(), this
}

在此代码中，r 和 n 表示 x 和 y 值，我发现如果减去角尺寸。矩形被绘制在图像内部。现在矩形正好在边缘的矩形内部，当然你可以根据需要修改它。

编辑：

经过进一步检查，我发现您可以在 _setCornerCoords 函数中调整调整大小控件的位置。

function degrees_to_radians(degrees) {
  var pi = Math.PI;
  return degrees * (pi/180);
}

cropRect._setCornerCoords = function () { 
    var t,
    e,
    i = this.oCoords,
    r = degrees_to_radians(45 - this.angle),
    n = .707106 * this.cornerSize,
    s = n * fabric.util.cos(r),
    o = n * fabric.util.sin(r);

    // Again this is setup to be the cornerSize, but this can be any number
    var p = this.cornerSize;
    var q = p / 2;

    for (var a in i) {
      t = i[a].x;
      e = i[a].y;
      
      // Check which kind of corner it is and translate it accordingly
      switch(a) {
        case "tl":
            t += q;
          e += q;
          break;
        case "tr":
          t -= q;
          e += q;
          break;
        case "br":
          t -= q;
          e -= q;
          break;
        case "bl":
          t += q;
          e -= q;
          break;
      }      
      
      i[a].corner = { 
        tl: { x: t - o,  y: e - s },
        tr: { x: t + s, y: e - o },
        bl: { x: t - s,  y: e + o },
        br: { x: t + o, y: e + s } 
      } 
    }
}

这使用户能够在先前绘制的角内调整大小。调整大小似乎与鼠标位置不一致（在使用中几乎看不出来）。

这是因为您不是从角落开始调整大小的。并且调整大小功能遵循鼠标位置的差异。并使用了一些不同的坐标，但我无法找到它们。

Fabric Js - 改变控制角的位置

Fabric Js - change position of control corners

javascript

fabricjs

更新：