从中心缩放图像（fabricjs）

Question

我试图在设置图像实例时使用 centeredScaling: true 选项缩放图像。我有一个 Circle 对象，它是一个 "on" 应该是比例尺的滑块。

示例如下：http://jsfiddle.net/hellatan/tk1qs8ty/

几件事： 1.它不从中心扩展 2. Circle 对象的起点与正确缩放图像不相关（不过我猜我必须为此调整一些数学）

任何人都知道我做错了什么（主要是#1，#2 也将是一个奖励）。

不要介意代码的草率 =)

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

我见过一个 hack，基本上它在 scaling/rotating.

的包装器中将点转换为中心和从中心转换

Fiddle: 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)）

可以应用相同的包装纸进行旋转。

从中心缩放图像（fabricjs）

Scaling image from the center (fabricjs)

javascript

canvas

fabricjs