從中心縮放圖像（fabricjs）

Question

我正在嘗試在設置Image實例時使用centeredScaling: true選項縮放圖像。 我有一個Circle對象，它是一個“on”滑塊，應該是比例尺。

這是一個例子： http ： //jsfiddle.net/hellatan/tk1qs8ty/

一些事情：1。它不會從中心縮放2.圓形對象的起點與正確縮放圖像無關聯（我猜我必須為這一個調整一些數學，盡管）

任何人都有任何關於我做錯了什么的線索（主要是＃1，＃2也會知道加分）。

不要介意代碼的邋iness =）

Answer 1

嘗試將x和y的原點設置為居中，並調整圖像的初始x和y

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

Answer 2

第一步，我們在調用圖像中心后添加比例。 然后規模將是中心：

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

Answer 3

有一個我見過的黑客，基本上它在一個包裝器中轉換點和從中心轉換為縮放/旋轉。

小提琴： http ： //jsfiddle.net/ywu45fpd/

轉換點的功能

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

canvas上的新方法：

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

});

看mouse:up小提琴使用（基本上是canvas._scale(e, target, 2) ）

可以應用相同的包裝器進行旋轉。