如何在结构js的角上启用非均匀缩放

Question

如果使用中间顶部,中间左侧等控制点,则可以缩放该轴中的对象.但是如果你使用角落,那么对象总是统一缩放.有没有办法在角落控制点上禁用均匀/比例缩放？

Answer 1

解决的办法是设置uniScaleTransform于true上fabric.Canvas实例.从Fabric.js文档中可以看出这一点并不明显,只在" 对象转换"部分的" 引言"第4部分中提到过一次

自1.0版以来,Fabric中还有许多其他与转换相关的属性.其中之一是"uniScaleTransform".false默认情况下,它可用于启用对象的非均匀缩放; 换句话说,它允许在通过角落拖动时更改对象的比例.

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

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