从中心缩放图像（fabricjs）

Question

我正在尝试使用centeredScaling: true选项来设置Image实例时对图像进行缩放。我有一个圆形对象，该对象位于“滑块”上，应该是比例尺。

这是一个示例：http://jsfiddle.net/hellatan/tk1qs8ty/ 有几件事情： 1.它不从中心缩放 2. Circle对象的起点不正确地与适当缩放图像相关联（我猜我需要调整一些数学内容来解决这个问题）

有人知道我做错了什么吗（主要是问题＃1，知道问题＃2将是一个额外的奖励）。

请忽略代码的松散性 =)

- hellatan

Answer 1

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

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

- Ben Martin

---

啊，谢谢Ben。看起来这个方法解决了问题。我本来希望不必重置左/上坐标，但似乎不行。既然这是我寻找的主要目标，我会将其标记为答案。 - hellatan

Answer 2

我看过一种常见的技巧，它可以在缩放/旋转的包装器中将点从中心翻译出来或翻译回中心。

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

});

请参考fiddle上mouse:up的使用方法（主要是使用canvas._scale(e, target, 2)）。同样的包装器也适用于旋转。

- BrunoLM

Answer 3

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

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

- ilgam