如何在面料js的角落启用非均匀缩放

How to enable non-uniform scaling at corners on fabric js

本文关键字：启用 缩放 角落 js      更新时间：2023-09-26

如果你使用中上、中左等控制点，则可以在该轴上缩放对象。但如果你使用角，那么对象总是均匀缩放的。是否有一种方法可以禁用角落控制点上的均匀/比例缩放?

解决方法是在fabric.Canvas实例上将uniScaleTransform设置为true。它在Fabric.js文档中绝对不明显，只在第4部分的介绍对象转换一节

中提到过一次。
自1.0版以来，Fabric 中还有许多其他与转换相关的属性可用。其中之一是"uniScaleTransform"。默认为false，可用于实现对象的非均匀缩放;换句话说，它允许在拖动边角时改变对象的比例。

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

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

或稍后更改:

fabric.uniScaleTransform = true;

自fabric.js v1.1.9之后的lockUniScaling标记被忽略。

相关源代码:

_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');
  }
},
相关文章：