Javascript 从中心缩放图像（fabricjs）

设置图像实例时，我正在尝试使用

centeredScaling:true

选项缩放图像。我有一个圆形物体，它是一个滑块上的，应该是刻度

下面是一个例子：

有几件事： 1.它不从中心缩放 2.圆圈对象的起点没有正确地关联，正确地缩放图像（不过，我猜我必须为这一点调整一些数学）

任何人都能知道我做错了什么（主要是1，#2也能知道）

---

不要介意代码的粗率=）

尝试将x和y的原点设置为中心，并调整图像的初始x和y

imgInstance.set({
        scaleY: imgH / origH,
        scaleX: imgW / origW,
        originX: "center", 
        originY: "center"
    });

---

第一步，我们在调用图像中心后添加比例。 然后比例将以中心为单位：

imgInstance.scale(my_value).center().setCoords()

---

有一个我见过的黑客，基本上它在包装器中转换点到中心，并从中心进行缩放/旋转

小提琴：

用于转换点的函数

fabric.Object.prototype.setOriginToCenter = function () {
    this._originalOriginX = this.originX;
    this._originalOriginY = this.originY;

    var center = this.getCenterPoint();

    this.set({
        originX: 'center',
        originY: 'center',
        left: center.x,
        top: center.y
    });
};

fabric.Object.prototype.setCenterToOrigin = function () {
    var originPoint = this.translateToOriginPoint(
    this.getCenterPoint(),
    this._originalOriginX,
    this._originalOriginY);

    this.set({
        originX: this._originalOriginX,
        originY: this._originalOriginY,
        left: originPoint.x,
        top: originPoint.y
    });
};

画布上的新方法

：

fabric.util.object.extend(fabric.Canvas.prototype, {

  _scale: function(e, target, value) {
    var scale = value,
        needsOriginRestore = false;

    if ((target.originX !== 'center' || target.originY !== 'center') && target.centeredRotation) {
      target.setOriginToCenter(target);
      needsOriginRestore = true;
    }

    target.animate({ scaleX: scale, scaleY: scale }, {
      onChange: canvas.renderAll.bind(canvas),
      easing: fabric.util.ease.easeOutQuad,
      onComplete: function() {
        if (needsOriginRestore) {
          target.setCenterToOrigin(target);
        }

        target.setCoords();

      },
    })

    canvas.renderAll();
  },

});

有关用法，请参见小提琴上的鼠标：向上（基本上是

canvas.\u刻度（e，target，2）

）

---

同样的包装可以用于旋转。

啊，谢谢本。这似乎奏效了。我想我希望我不必重置左/顶坐标，但事实似乎并非如此。我将把这个标记为答案，因为这是我所寻找的主要目标。