一个flex相册 基于 ImageSnowGallery
不能贴图 很郁闷....
大概就是随机生成任意位置....双击放大
代码如下
ExtendedImage类
package imagesnow
{
import flash.display.DisplayObject;
import flash.display.Graphics;
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import mx.containers.Canvas;
import mx.controls.Image;
import mx.core.Application;
import mx.core.DragSource;
import mx.core.FlexGlobals;
import mx.events.DragEvent;
import mx.managers.DragManager;
import spark.components.Label;
public class ExtendedImage extends Canvas
{
/**
* @private
* Tells us if the image is Selected or not
*/
public var selected:Boolean;
/**
* @private
* Current Scalling in X
*.
*/
public var xScaling:Number;
/**
* @private
* Current Scalling in Y
*.
*/
public var yScaling:Number;
/**
* @private
* Current Scalling in rotation
*.
*/
public var rotationNum:Number;
/**
* @private
* last Y
*/
public var lastY:Number;
/**
* @Private
* Last X
*/
public var lastX:Number;
/**
* 图片资源
*/
public var source:Object;
/**
* 图片外框的大小
*/
public var EImageWidth:Number = 150;
public var EImageHeight:Number = 200;
/**
* 图片大不设置百分比
*/
public var imageWidth:Number = 100;
public var imageHeight:Number = 100;
public var description:String;
public function ExtendedImage()
{
super();
this.setStyle("backgroundColor","#FFFFFF");
this.width = EImageWidth;
this.height = EImageHeight;
this.addEventListener(MouseEvent.MOUSE_DOWN,startDragging);
this.addEventListener(MouseEvent.MOUSE_UP,stopDragging);
this.doubleClickEnabled = true;
}
private function startDragging(event:MouseEvent):void
{
event.currentTarget.startDrag();
this.parent.setChildIndex(event.currentTarget as DisplayObject,this.parent.numChildren - 1);
}
private function stopDragging(event:MouseEvent):void
{
event.currentTarget.stopDrag();
}
/**
* @private
* Add the border tho the image so we can draw it
*/
protected override function createChildren():void
{
super.createChildren();
var image:Image = new Image();
image.source = source;
image.percentHeight = imageWidth;
image.percentWidth = imageHeight;
image.horizontalCenter = 0;
image.verticalCenter = 0;
image.scaleContent = true;
addChild(image);
if(description){
var descriptionLb:Label = new Label();
descriptionLb.text = description;
descriptionLb.horizontalCenter = 0;
descriptionLb.bottom = 5;
addChild(descriptionLb);
}
}
/**
* @private
* Draw a Frame around the image so it looks like a frame
*
*/
protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth,unscaledHeight);
//get the graphics to draw the border
// var g:Graphics = border.graphics;
// g.clear();
g.lineStyle(5,0xCCCCCC,1);
// g.lineStyle(5,0xFFFFFF,1);
// g.drawRect(0,0,unscaledWidth,unscaledHeight);
}
}
}
ImageGallery 类
package imagesnow
{
import flash.display.DisplayObject;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.utils.Dictionary;
import mx.containers.Canvas;
import mx.controls.Alert;
import mx.core.Application;
import mx.core.FlexGlobals;
import mx.core.FlexLoader;
import mx.core.UIComponent;
import mx.effects.AnimateProperty;
import mx.effects.Move;
import mx.effects.easing.Linear;
import mx.events.FlexEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.rpc.http.HTTPService;
/**
* @Private Exclude these properties
*/
[Exclude(name="verticalScrollPolicy",kind="property")]
[Exclude(name="horizontalScrollPolicy",kind="property")]
public class ImageGallery extends Canvas
{
/**
* @private
* The XML Url that will be used to load up the gallery of
* images
*/
// public var XML_URL:String;
/**
* @private
* This Will be used as Dictionary key so we can set the image property
* to what we want. Difference between this and an object is an object uses
* == to check for similiarity while a dictionary uses ===. In other, an object
* uses toString() while the dictionary looks at the object itself. so
* if we have two images then if you do image1==image2 you will get true
* but image1===image2 you will get false which is what we want
*
*/
private var imageDict:Dictionary = new Dictionary();
/**
* 最大倾斜度
*/
private var maxRotation:Number = 45;
/**
* 放大的倍数
*/
public var zoomNum:Number = 3;
/**
* 图片外框的大小
*/
public var EImageWidth:Number = 150;
public var EImageHeight:Number = 200;
/**
* 图片大不设置百分比
*/
public var imageWidth:Number = 100;
public var imageHeight:Number = 100;
public function ImageGallery()
{
//TODO: implement function
super();
this.addEventListener(FlexEvent.CREATION_COMPLETE,CREATION_COMPLETE)
}
private function CREATION_COMPLETE(event:FlexEvent):void{
trace('ddddd');
}
/**
* @private
* WE will override the createChildren() method to add our images to the stage
*/
protected override function createChildren():void
{
super.createChildren();
//call the function to load the data
for(var i:int=0;i<5;i++)
{
//create the key that will be used as a marker
var object:Object = new Object();
object.title = 'aa';
object.path= 'userimages/0308_1607.jpg';
object.description = ".......美女....";
addImages(object);
}
}
/**
* @private
* Adds the Image onto the Display
*/
private function addImages(object:Object):void
{
var displayObject:ExtendedImage = new ExtendedImage();
displayObject.rotation = Math.random() * maxRotation;
if(Math.random()>0.5)displayObject.rotation = 360 - displayObject.rotation;//更改最大旋转不超过70度
displayObject.x = Math.random() * (FlexGlobals.topLevelApplication.width - displayObject.width);
displayObject.y = Math.random() * (FlexGlobals.topLevelApplication.height - displayObject.height);
displayObject.source=object.path;
displayObject.description=object.description;
displayObject.EImageHeight = EImageHeight;
displayObject.EImageWidth = EImageWidth;
displayObject.imageHeight = imageHeight;
displayObject.imageWidth = imageWidth;
displayObject.cacheAsBitmap=true;
imageDict[displayObject]=displayObject;
addChild(displayObject);
systemManager.addEventListener(MouseEvent.DOUBLE_CLICK,expandResizeImage);
}
/**
* @Private
* the Current Maximized image if there is any
*/
private var currentMaximizedImage:ExtendedImage;
/**
* @private
* Tells us if there is an image maxmized and is used to maximize the images
*/
private function expandResizeImage(event:MouseEvent):void
{
if(event.target is FlexLoader)
{
if(event.target.parent.parent.className=="ExtendedImage")
{
if(currentMaximizedImage != event.target.parent.parent && currentMaximizedImage !=null)
{
currentMaximizedImage.selected=false;
animateImageResizing(currentMaximizedImage);
currentMaximizedImage=event.target.parent.parent;
currentMaximizedImage.selected=true;
animateImageResizing(currentMaximizedImage);
}
else
{
currentMaximizedImage =event.target.parent.parent;
if(!(currentMaximizedImage.selected))
{
currentMaximizedImage.selected=true;
}
else
{
currentMaximizedImage.selected=false;
}
animateImageResizing(currentMaximizedImage);
}
}
}
else
{
if(currentMaximizedImage !=null)
{
//we know the user hit outsize so we return it to a normal state
currentMaximizedImage.selected=false;
animateImageResizing(currentMaximizedImage);
currentMaximizedImage=null;
}
}
}
private function animateImageResizing(image:ExtendedImage):void
{
var xScaleEffect:AnimateProperty= new AnimateProperty(image);
var yScaleEffect:AnimateProperty= new AnimateProperty(image);
var rotationEffect:AnimateProperty= new AnimateProperty(image);
var moveEffect:Move = new Move(image);
if(image.selected)
{
//get it up to the highest index
setChildIndex(image,numChildren-1);
//save all the values for later use
image.rotationNum=image.rotation;
image.xScaling = image.scaleX;
image.yScaling = image.scaleY;
image.lastX = image.x;
image.lastY=image.y;
xScaleEffect.property="scaleX";
xScaleEffect.fromValue=image.scaleX;
xScaleEffect.toValue=zoomNum;
yScaleEffect.property="scaleY";
yScaleEffect.fromValue=image.scaleY;
yScaleEffect.toValue=zoomNum;
rotationEffect.property="rotation";
rotationEffect.fromValue=image.rotation;
rotationEffect.toValue=0;
//should try and figure out the correct values
//but to lazy, i am just guesstmating based on a 680 * 480
//also we can't use a move or any of the effects to move it
//for some reason since it shifts everything so this is the best
//we can do
// moveEffect.xTo=60;
// moveEffect.yTo=40;
//更改显示位置屏幕正中央 放大四倍
moveEffect.xTo=this.parentApplication.width/2-image.width*zoomNum/2;
moveEffect.yTo=this.parentApplication.height/2-image.height*zoomNum/2;
}
else
{
xScaleEffect.property="scaleX";
xScaleEffect.fromValue=image.scaleX;
xScaleEffect.toValue=image.xScaling;
yScaleEffect.property="scaleY";
yScaleEffect.fromValue=image.scaleY;
yScaleEffect.toValue=image.yScaling;
rotationEffect.property="rotation";
rotationEffect.fromValue=image.rotation;
rotationEffect.toValue=image.rotationNum;
moveEffect.xTo = image.lastX;
moveEffect.yTo = image.lastY;
}
xScaleEffect.easingFunction= Linear.easeIn;
yScaleEffect.easingFunction=Linear.easeIn;
rotationEffect.easingFunction=Linear.easeIn;
moveEffect.easingFunction = Linear.easeIn;
xScaleEffect.duration=500;
yScaleEffect.duration=500;
rotationEffect.duration=500;
xScaleEffect.play();
yScaleEffect.play();
rotationEffect.play();
moveEffect.play();
}
/**
* @private
* All we are doing here is looping through the images and sizing them
* we divide them by 10 since i am using 1076*785 size images, that is
* way too big
*/
protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth,unscaledHeight);
for(var i:int=0;i<numChildren;i++)
{
var image:ExtendedImage=ExtendedImage(imageDict[this.getChildAt(i)]);
// var h:Number = image.getExplicitOrMeasuredHeight()/10;
// var w:Number = image.getExplicitOrMeasuredWidth()/10;
var h:Number = image.getExplicitOrMeasuredHeight();
var w:Number = image.getExplicitOrMeasuredWidth();
image.setActualSize(w,h);
}
}
}
}
测试app
<?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" width="100%" height="100%" xmlns:exhdLib="imagesnow.*" backgroundColor="#CCCCCC"> <s:layout> <s:BasicLayout/> </s:layout> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> <exhdLib:ImageGallery width="100%" height="100%" backgroundColor="green" imageHeight="95" imageWidth="95"/> <!--<mx:Image source="userimages/0308_1607.jpg"/>--> </s:Application>
将as 的包名调整一下. 就即以运行了
扫一扫
115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
