从中心缩放图像(fabricjs）

Scaling image from the center (fabricjs)

本文关键字：fabricjs 图像 缩放      更新时间：2023-09-26

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

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

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

任何人都知道我做错了什么（主要是#1，#2也将是一个额外的信息）。

不要介意代码的草率=）

尝试将 x 和 y 的

原点设置为居中，并调整图像的初始 x 和 y

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

我见过一个黑客，基本上它在包装器中将点转换为中心和从中心进行缩放/旋转。

小提琴：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)）

可以使用相同的包装机进行旋转。

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

imgInstance.scale(my_value).center().setCoords()
相关文章：