开发学院图形图像Flash 积少成多Flash(6) - ActionScript 3.0 绘图之图形... 阅读

积少成多Flash(6) - ActionScript 3.0 绘图之图形和转换

 2009-11-05 00:00:00 来源:WEB开发网   
核心提示: 2、转换在 UI 上放置 3 个 Silder分别名为:sliderScaleX, sliderScaleY, sliderRotate分别用于演示 X 轴方向上的缩放,Y 轴方向上的缩放,积少成多Flash(6) - ActionScript 3.0 绘图之图形和转换(2),旋转再放置 2 个

2、转换

在 UI 上放置 3 个 Silder

分别名为:sliderScaleX, sliderScaleY, sliderRotate

分别用于演示 X 轴方向上的缩放,Y 轴方向上的缩放,旋转

再放置 2 个 Button

分别名为:btnMatrix, btnClearMatrix

分别用于演示仿射矩阵在图形转换上的应用,还原为对象的初始仿射矩阵转换

Main.as

package 
{
    import flash.display.MovieClip;
    import fl.events.ComponentEvent;
    import fl.events.SliderEvent;
    import flash.display.Shape;
    import flash.geom.Matrix;
    import flash.display.GradientType;
    import flash.display.SpreadMethod;
    
    public class Main extends MovieClip
    {
        var originalMatrix:Matrix;
        
        public function Main():void
        {
            sliderScaleX.addEventListener(SliderEvent.THUMB_DRAG, scaleXHandler);
            sliderScaleY.addEventListener(SliderEvent.THUMB_DRAG, scaleYHandler);
            sliderRotate.addEventListener(SliderEvent.THUMB_DRAG, rotateHandler);
            btnMatrix.addEventListener(ComponentEvent.BUTTON_DOWN, matrixHandler);
            btnClearMatrix.addEventListener(ComponentEvent.BUTTON_DOWN, clearMatrixHandler);
            
            // 保存 canvas 的初始仿射矩阵转换
            originalMatrix = canvas.transform.matrix;
        }
        
        
        // 在 x 轴方向上做缩放
        function scaleXHandler(e:SliderEvent):void
        {
            // scaleX - x轴方向上的缩放比例
            canvas.scaleX = e.value;
        }
        
        // 在 y 轴方向上做缩放
        function scaleYHandler(e:SliderEvent):void
        {
            // scaleY - y轴方向上的缩放比例
            canvas.scaleY = e.value;
        }
        
        // 旋转
        function rotateHandler(e:SliderEvent):void
        {
            // rotation - 旋转的度数
            canvas.rotation = e.value;
        }
        
        
        // 仿射矩阵在图形转换上的应用
        function matrixHandler(e:ComponentEvent):void
        {
            var matrix:Matrix = new Matrix();
            // rotate() - 旋转的角度
            matrix.rotate(10);
            
            // translate() - 平移的距离
            matrix.translate(200, 200);
            
            // scale() - 缩放的比例
            matrix.scale(1.2, 1.2);
            
            var skewMatrix:Matrix = new Matrix();
            // 调整 b 属性将矩阵垂直倾斜
            // 调整 c 属性将矩阵水平倾斜
            skewMatrix.b = Math.tan(0.78); 
            
            // concat() - 组合两个仿射矩阵
            matrix.concat(skewMatrix);
            // 在对象上应用仿射矩阵转换
            canvas.transform.matrix = matrix;
        }
        
        // 还原为初始的仿射矩阵转换
        function clearMatrixHandler(e:ComponentEvent):void
        {
            // 设置 canvas 的仿射矩阵转换为初始的仿射矩阵
            canvas.transform.matrix = originalMatrix;
        }
    }
}

OK

本文示例源代码或素材下载

上一页  1 2 

Tags:积少成多 Flash ActionScript

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接