Question

嗨，我想知道如何使用矩阵来增加画布的组件！如果可能，请显示研究代码

Answer 1

然后您可以尝试以下代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="absolute" minHeight="600" minWidth="955" xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
    <![CDATA[
        /**
         * Stores the button size multiplier on roll over.
         */
        public static const SIZE_MULTIPLIER:Number = 2.5;

        /**
         * Stores initial button's transfrom matrix.
         */
        private var buttonMatrix:Matrix;

        protected function zoomedButton_rollOverHandler(event:MouseEvent):void
        {
            var zoomedButton:Button = event.currentTarget as Button;
            // Get initial button transform matrix
            var matrix:Matrix = zoomedButton.transform.matrix;
            buttonMatrix = matrix.clone();
            // Modify matrix to move button's center to the Canvas (0, 0) point. 
            matrix.translate(-zoomedButton.width / 2 - zoomedButton.x,
                -zoomedButton.height / 2 - zoomedButton.y);
            // Modify matrix to scale using multiplier value
            matrix.scale(SIZE_MULTIPLIER, SIZE_MULTIPLIER);
            // Modify matrix to return button back
            matrix.translate(zoomedButton.width / 2 + zoomedButton.x,
                zoomedButton.height / 2 + zoomedButton.y);
            // Apply resulting matrix
            zoomedButton.transform.matrix = matrix;
        }

        protected function zoomedButton_rollOutHandler(event:MouseEvent):void
        {
            var zoomedButton:Button = event.currentTarget as Button;
            // Restore buttons position
            zoomedButton.transform.matrix = buttonMatrix;
        }
    ]]>
    </mx:Script>

    <mx:Panel height="50%" horizontalCenter="0" verticalCenter="0" width="50%" layout="absolute">
        <mx:Button label="Test" rollOut="zoomedButton_rollOutHandler(event)"
            rollOver="zoomedButton_rollOverHandler(event)" x="100" y="50" />
    </mx:Panel>
</mx:Application>

为了说明的目的，我使用了layout =“absolute”的Panel，但它与Canvas相同（所以你可以毫无问题地使用Canvas）。

当然你可以使用concat（）方法来形成矩阵，并将scale（）和translate（）方法视为快捷方式：

        protected function zoomedButton_rollOverHandler(event:MouseEvent):void
        {
            var zoomedButton:Button = event.currentTarget as Button;
            var matrix:Matrix = zoomedButton.transform.matrix;
            buttonMatrix = matrix.clone();
            matrix.
                concat(new Matrix(1, 0, 0, 1, -zoomedButton.width / 2 - zoomedButton.x,
                                  -zoomedButton.height / 2 - zoomedButton.y));
            matrix.concat(new Matrix(SIZE_MULTIPLIER, 0, 0, SIZE_MULTIPLIER));
            matrix.
                concat(new Matrix(1, 0, 0, 1, zoomedButton.width / 2 + zoomedButton.x,
                                  zoomedButton.height / 2 + zoomedButton.y));
            zoomedButton.transform.matrix = matrix;
        }

希望这会有所帮助：）

柔性。使用矩阵缩放画布

1 个答案: