javascript - 如何在 fabric js 的 Angular 落启用非均匀缩放

Question

如果您使用中上、中左等控制点，则可以在该轴上缩放对象。但是如果你使用 Angular ，那么对象总是统一缩放的。有没有办法禁用 Angular 控制点上的统一/比例缩放？

Answer 1

解决方案是在 fabric.Canvas 实例上将 uniScaleTransform 设置为 true。这是absolutely not obvious from the Fabric.js documentation并且只在 Introduction, Part 4 中提到过一次在对象转换部分

There's a number of other transformation-related properties available in Fabric since version 1.0. One of them is "uniScaleTransform". It's false by default, and can be used to enable non-uniform scaling of object; in other words, it allows to change object's proportions when dragging by the corners.

您可以在实例化期间设置标志:

var fabric = new fabric.Canvas(canvasEl, {
    // ...
    uniScaleTransform: true
});

或稍后更改:

fabric.uniScaleTransform = true;

带有 lockUniScaling 的对象会忽略该标志 since fabric.js v1.1.9 .

相关源码:

_onScale: function(e, transform, x, y) {
  // rotate object only if shift key is not pressed
  // and if it is not a group we are transforming
  if ((e.shiftKey || this.uniScaleTransform) && !transform.target.get('lockUniScaling')) {
    transform.currentAction = 'scale';
    this._scaleObject(x, y);
  }
  else {
    // Switch from a normal resize to proportional
    if (!transform.reset && transform.currentAction === 'scale') {
      this._resetCurrentTransform(e, transform.target);
    }

    transform.currentAction = 'scaleEqually';
    this._scaleObject(x, y, 'equally');
  }
},