Flex4图片在指定区域内自由拖拽移动，缩放图片大小例子

时间：2022-11-14 23:36:36 编辑：袖梨来源：一聚教程网

如果图片过大，一般我们展示的时候要允许用户通过鼠标滚轮进行缩放，同时点击可以拖拽移动（类似百度地图那样的操作）。下面通过一个样例进行演示：

效果图如下：

代码如下所示

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

<!--?xml version="1.0" encoding="utf-8"?-->
 
<s:application xmlns:fx="
http://ns.adobe.com/mxml/2009
" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" backgroundcolor="0x404040" creationcomplete="init(event)">
 
    <fx:script>
 
        <!--[CDATA[
 
            import mx.events.FlexEvent;
 
            //图片缩放比例
 
            private var _imgScale:Number = 1;
 
            //图片坐标
 
            private var _imgX:Number = 0;
 
            private var _imgY:Number = 0;
 
            /**
 
             * 设置监听
 
             */
 
            protected function init(event:FlexEvent):void
 
            {
 
                img.addEventListener(MouseEvent.MOUSE_DOWN, itemMouseDown);
 
                img.addEventListener(MouseEvent.MOUSE_UP, itemMouseUp);
 
                img.addEventListener(MouseEvent.ROLL_OUT, itemMouseUp);
 
                img.addEventListener(MouseEvent.MOUSE_WHEEL, itemMouseWheel);
 
            }
 
            /**
 
             * 鼠标按下开始拖动
 
             */
 
            private function itemMouseDown(event:MouseEvent = null):void{
 
                var width:int = img.parent.width - img.width*_imgScale;
 
                var height:int = img.parent.height - img.height*_imgScale;
 
                img.startDrag(false, new Rectangle(0, 0 , width, height));
 
            }
 
            /**
 
             * 鼠标弹起停止 拖动
 
             */
 
            private function itemMouseUp(event:MouseEvent):void{
 
                img.stopDrag();
 
            }
 
            /**
 
             * 鼠标滚轮控制缩放
 
             */
 
            private function itemMouseWheel(event:MouseEvent):void{
 
                //计算每次的缩放比例
 
                _imgScale = this.img.scaleX + (Math.abs(event.delta)/event.delta)*0.05;
 
                //设置最大最小的缩放限度
 
                _imgScale = Math.min(1,_imgScale); 
 
                var minScale:Number = Math.min(img.parent.width/img.width,img.parent.height/img.height);
 
                _imgScale = Math.max(minScale,_imgScale);
 
                //计算缩放后图片的坐标（保证缩放中心是鼠标）
 
                var oldScale:Number = this.img.scaleX;             
 
                _imgX = this.img.x-(_imgScale/oldScale-1)*(this.img.parent.mouseX - this.img.x);
 
                _imgY = this.img.y-(_imgScale/oldScale-1)*(this.img.parent.mouseY - this.img.y);
 
                //坐标修正
 
                if(img.width*_imgScale -->= img.parent.width){
 
                    if(_imgX>=0){
 
                        _imgX=0;
 
                    }else if((img.width*_imgScale+_imgX)<img.parent.width){ _imgx="img.parent.width-img.width*_imgScale;" }="" if(img.height*_imgscale="">= img.parent.height){
 
                    if(_imgY>=0){
 
                        _imgY=0;
 
                    }else if((img.height*_imgScale+_imgY)<img.parent.height){ _imgy="img.parent.height-img.height*_imgScale;" }="" 设置图片缩放比例和坐标="" this.img.scalex="_imgScale;" this.img.scaley="_imgScale;" this.img.x="_imgX;" this.img.y="_imgY;" ]]="">
 
    </img.parent.height){></img.parent.width){></fx:script>
 
    <s:group clipandenablescrolling="true" horizontalcenter="0" verticalcenter="0">
 
        <s:rect>
 
            <s:fill>
 
                <s:solidcolor color="0xffffff">
 
            </s:solidcolor></s:fill>
 
        </s:rect>
 
        <s:image id="img" source="img.jpg">
 
    </s:image></s:group>
 
</s:application>

推荐专题

最新下载

热门教程

Flex4图片在指定区域内自由拖拽移动，缩放图片大小例子

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程