Flex.Zoom Canvas с использованием матрицы

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>

Я использовал 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;
        }

Надеюсь, это поможет:)