使用 Ext JS 创建精美图形 - 第 3 部分

精灵变换

在上一篇文章中，我们学习了如何使用动画修饰符来为精灵制作动画。在本节中，我们将讨论精灵变换。可以应用于精灵的标准变换有三种类型

• 缩放。

• 旋转。

• 平移。

注意： 标准变换始终按该顺序应用。

让我们看一下这三种变换。

缩放

首先，让我们检查缩放变换。有四个精灵属性来控制它

• scalingX - 精灵水平缩放的因子

• scalingY - 精灵垂直缩放的因子

• scalingCenterX - 变换中心的 x 坐标

• scalingCenterY - 变换中心的 y 坐标

三个变换配置中的每一个都有一个变换别名，可以在配置初始变换时使用。对于缩放，配置简写伪配置或别名称为 scaling。

注意： 当设置精灵属性时，它们通常会经历一个规范化过程，其中特定精灵类型的已知别名会扩展为实际属性。在 sprite.attr 对象内部查找精灵属性时，请注意这一点。您在那里找不到别名。这也意味着如果精灵的 bypassNormalization 参数为 true，则伪属性不能与精灵的 setAttributes 方法一起使用。最后，别名对于清晰度很好 - 例如，在视图中声明精灵时 - 但在性能关键代码中，最好使用原始属性。

scaling: {    
    x: {Number},    
    y: {Number},    
    centerX: {Number},    
    centerY: {Number}    
}

与旋转变换一样，缩放中心默认为精灵边界框的中心。

假设我们想要缩放我们的 'rect' 精灵，使其看起来像一个矩形而不是一个正方形。为此，我们可以简单地对水平和垂直缩放使用不同的比例因子，如下所示

scaling: {    
    x: 2,    
    y: 1.25    
}

在 Fiddle 中打开

如果我们想要统一缩放，我们可以直接说

scaling: 2

在 Fiddle 中打开

假设我们想要将缩放中心更改为精灵的左上角，同时保持之前的比例因子。

{    
    type: 'rect',    
    x: 100,    
    y: 100,    

    //...

    scaling: {    
        x: 2,    
        y: 1.25,    
        centerX: 100,    
        centerY: 100    
    }    
}

这是上述代码的结果

在 Fiddle 中打开

精灵只是向底部/右侧增长，而不是在两个方向上均匀增长。

旋转

我们将要看的第二个变换是旋转。有三个精灵属性允许我们控制它

• rotationRads - 精灵的旋转角度（以弧度为单位），其中正值表示顺时针旋转

• Ext.draw.sprite.Sprite#cfg-rotationCenterX - 旋转中心的 x 坐标

• Ext.draw.sprite.Sprite#cfg-rotationCenterY - 旋转中心的 y 坐标

让我们将精灵顺时针旋转 45 度，即 \(\frac{\pi}{4}\) 弧度。您始终可以使用 Ext.draw.Draw.rad 方法将度数转换为弧度，例如：Ext.draw.Draw.rad(45)。

{
    type: 'rect',

    //...

    rotationRads: Math.PI / 4
}

默认情况下，旋转中心是精灵边界框的中心。在下面的图像中，它用黑点表示。

在 Fiddle 中打开

假设我们想要围绕左上角旋转我们的精灵。为此，我们可以简单地使用 rotationCenterX 和 rotationCenterY 属性将旋转中心移动到精灵的左上角

{    
    type: 'rect',    
    x: 100,    
    y: 100,    

    //...    

    rotationRads: Math.PI / 4,    
    rotationCenterX: 100,    
    rotationCenterY: 100    
}

在 Fiddle 中打开

还有一个名为 rotation 的特殊伪属性。它可以是数字或对象。如果它是数字，则指定精灵的旋转角度（以度为单位），而不是弧度。如果它是一个对象，则应采用以下形式（其中所有属性都是可选的）

rotation: {    
    rads | degrees: {Number},    
    centerX: {Number},    
    centerY: {Number}    
}

我们可以像这样重写之前的示例

{    
    type: 'rect',    
    x: 100,    
    y: 100,    

    //...    

    rotation: {    
        degrees: 45,    
        centerX: 100,    
        centerY: 100    
    }    
}

在 Fiddle 中打开

平移

每个精灵都有两个属性来控制平移

• translationX - 水平移动精灵的距离

• translationY - 垂直移动精灵的距离

我们将继续使用本系列第 1 部分中的 rect 精灵，并将所有变换应用于它。

{    
    type: 'rect',    
    x: 100,    
    y: 100,    
    width: 100,    
    height: 100,    

    //...    

    translationX: -50,    
    translationY: -50    
}

平移后的精灵将如下图所示，其中虚线表示原始未平移的位置。

在 Fiddle 中打开

或者，您可以使用以下语法指定相同的变换

translation: {    
    x: 100,    
    y: -50    
}

在 Fiddle 中打开

与之前的变换一样，translation 是伪属性或别名 [^alias]。

组合变换

现在我们已经分别了解了每个变换，让我们通过同时缩放和旋转精灵来组合它们。

type: 'rect',    
x: 100,    
y: 100,    
width: 100,    
height: 100,    

//... 

rotation: {    
    degrees: 45,    
    centerX: 100,    
    centerY: 100    
},

scaling: {    
    x: 2,    
    y: 1.25,    
    centerX: 100,    
    centerY: 100    
}

在 Fiddle 中打开

在此示例中，缩放和旋转的变换中心是相同的。变换后的精灵看起来好像原始精灵先被缩放，然后被旋转。

最后，让我们将平移变换添加到混合中

translation: {    
    x: 50,    
    y: -50    
},

rotation: {    
    degrees: 45,    
    centerX: 100,    
    centerY: 100    
},

scaling: {    
    x: 2,    
    y: 1.25,    
    centerX: 100,    
    centerY: 100    
}

在 Fiddle 中打开

请注意平移是如何在缩放和旋转之后应用的。此顺序始终相同

scale -> rotate -> translate 

注意： Ext JS 6.0.1+ 中变换的默认顺序已从 rotate->scale->translate 更改为 scale->rotate->translate。这样做是为了与其他库更兼容，并防止在应用变换时发生剪切。此更改不会影响图表，但可能会影响您的自定义绘图代码。升级到 Ext JS 6.0.1+ 时请记住这一点。如果您宁愿保留以前的变换顺序，也可以使用 覆盖。

现有精灵上的变换

我们刚刚介绍了始终以相同顺序应用的所有标准变换。但是，如果我们想要更改此顺序，一次应用三个以上的变换，或者可能完全使用另一种类型的变换（如剪切）怎么办？这就是变换矩阵派上用场的地方。

每个精灵都默认设置了一个变换矩阵，未应用任何变换。此矩阵将表面的坐标系传达给精灵应如何在坐标平面内变形和/或定位。setTransform 方法将使用给定的矩阵覆盖精灵的当前变换矩阵。或者，您可以使用精灵的 transform 方法，该方法会将给定的矩阵与当前变换矩阵相乘。换句话说，它将添加到当前变换而不是替换它。

由于手动乘法矩阵可能相当乏味，因此 Ext.draw.Matrix 类旨在帮助我们减轻任务。例如，这是我们如何创建一个 单位矩阵，然后将其与比例矩阵相乘，然后再与平移矩阵相乘

var m = new Ext.draw.Matrix().scale(sx, sy).translate(tx, ty);

矩阵 m 表示一个复合变换，我们可以将其传递给精灵的 transform 和 setTransform 方法，而不是矩阵元素数组。

让我们检查一个关于如何使用变换矩阵的具体示例。假设我们有一个像这样的“rect”精灵

{    
    type: 'rect',    
    x: 0,    
    y: 0,    
    width: 100,    
    height: 100    
}

我们想要围绕右下角逆时针旋转 180 度

由于我们想要围绕右下角旋转精灵，因此我们不能只应用旋转变换

rectSprite.transform(new Ext.draw.Matrix().rotate(Math.PI));

这将使我们的精灵围绕原点旋转，使其超出屏幕

因此，首先我们需要将原点平移到精灵的右下角或 (100, 100) 坐标

然后将坐标空间旋转 180°

然后我们必须将原点平移回 (-100, -100)。但是现在我们旋转了坐标网格，这意味着向后（负坐标）是向前

现在我们的精灵在变换后的坐标空间中以 (0, 0) 作为左上角坐标，以 (100, 100) 作为右下角坐标（其正常坐标）渲染。

这正是我们想要的变换类型。它的代码如下所示

var M = new Ext.draw.Matrix().translate(100,100).rotate(Math.PI).translate(-100, -100);                             

rectSprite.setTransform(M);

我们仅以这种方式执行上述变换，以举例说明如何组合多个简单变换来创建具有可预测结果的复合变换。实际上，您可以通过将两个额外的参数传递给 rotate 方法 - 旋转中心的坐标来围绕某个点旋转精灵

var M = new Ext.draw.Matrix().rotate(Math.PI, 100, 100);               

rectSprite.setTransform(M);

变换矩阵详细信息

有时，您需要应用的变换无法使用精灵的便捷变换方法轻松完成。或者，您可能希望直接将矩阵传递给精灵以设置变换。setTransform 方法也允许这种高级用法。下表显示了将变换应用于精灵时使用的每个变换矩阵。

通过按照所需的顺序多次乘以用于平移、旋转、缩放和剪切的矩阵，您将得到一个用于复合变换的单个矩阵。然后，此矩阵可以用作精灵的 setTransform 方法的值，如下所示

mySprite.setTransform([a, b, c, d, e, f]);

在这种情况下，a、b、c、d、e、f 是对应于以下变换矩阵分量的数值

结论

Draw 包使您能够在需要时创建简单的变换方法，并在您想掌控一切时让您轻松自如。Draw API 通过其便捷的变换方法简化了变换精灵形状的工作。它还将把控制权交给需要使用预定义的变换矩阵来清晰表达精灵的高级用户。

尽情为您的应用程序创建您自己的自定义绘图，并且一如既往，如果您有任何问题，请在论坛上与我们联系！