`

flex图片裁剪

    博客分类:
  • Flex
阅读更多

//构造函数
public function testSprite()
		{
			this.loadImg();
			this.createSmallCanvas();
		}


//装载图片
public function loadImg(): void{
			var loader: Loader = new Loader();
			var url: String = "http://localhost/1.gif";
			var urlRequest: URLRequest = new URLRequest(url);
			loader.load(urlRequest);
			this.addChild(loader);
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
		}

//图片装载成功后,创建一个sprite显示图片
private function loadComplete(e: Event): void{
			var loader: Loader = Loader(e.target.loader);
			imgmap = loader.content as Bitmap;
//下两行为图片缩放比例,但缩放后不能裁剪正确的图像位置
//			imgmap.scaleX = .3;   
//			imgmap.scaleY = 0.35;
			var imgCanvas: Sprite = new Sprite();
			imgCanvas.x = 20;
			imgCanvas.y = 20;
			this.addChild(imgCanvas);
			imgCanvas.graphics.lineStyle(1, 0x000000);
			imgCanvas.graphics.beginFill(0xcccccc, 0.5);
			imgCanvas.graphics.drawRoundRect(0,0,200,200,10,10);
			imgCanvas.graphics.endFill();
			imgCanvas.addChild(imgmap);
//蒙版,超出此imgCanvas的区域不显示
			imgmap.mask = this.imgMask();
			
			this.createCut();
		}

private function imgMask(): Shape{
			var mask: Shape = new Shape();
			mask.x = 20;
			mask.y = 20;
			this.addChild(mask);
			mask.graphics.beginFill(0xffffff,0.5);
			mask.graphics.drawRect(0,0,200,200);
			mask.graphics.endFill();
			return mask;
		}

//创建要裁剪的框
private function createCut(): void{
			cutCanvas.x = 70;
			cutCanvas.y = 70;
			this.addChild(cutCanvas);
			cutCanvas.graphics.lineStyle(1, 0xffffff);
			cutCanvas.graphics.beginFill(0xffffff,0);
			cutCanvas.graphics.drawRect(20,20,40,40);
			cutCanvas.graphics.endFill();
			cutCanvas.addEventListener(MouseEvent.MOUSE_DOWN, startDragHandler);
			cutCanvas.addEventListener(MouseEvent.MOUSE_UP, endDragHandler);
		}

		private function startDragHandler(e: MouseEvent): void{
			offsetx = e.stageX - cutCanvas.x;
			offsety = e.stageY - cutCanvas.y;
			cutCanvas.addEventListener(MouseEvent.MOUSE_MOVE, draggingHandler);
		}
		
		private function draggingHandler(e: MouseEvent): void{
			cutCanvas.x = e.stageX - offsetx;
			cutCanvas.y = e.stageY - offsety;
			e.updateAfterEvent();
		}
		
		private function endDragHandler(e: MouseEvent): void{
			this.showCutImg();
			cutCanvas.removeEventListener(MouseEvent.MOUSE_MOVE, draggingHandler);
		}

//创建显示裁剪后的图片的Sprite
		private function createSmallCanvas(): void{
			smallImgCanvas.x = 280;
			smallImgCanvas.y = 20;
			this.addChild(smallImgCanvas);
			smallImgCanvas.graphics.lineStyle(1,0xfffeee);
			smallImgCanvas.graphics.beginFill(0x000000,0.5);
			smallImgCanvas.graphics.drawRect(0,0,40,40);
			smallImgCanvas.graphics.endFill();
		}

//显示裁剪后的图片
private function showCutImg(): void{
			var newdata: BitmapData = imgmap.bitmapData.clone();
			var area: Rectangle = new Rectangle(cutCanvas.x, cutCanvas.y, cutCanvas.width, cutCanvas.height);
			var nd: BitmapData = new BitmapData(cutCanvas.width, cutCanvas.height);
			nd.copyPixels(newdata, area, nd.rect.topLeft);
			var newImg: Bitmap = new Bitmap(nd);
			smallImgCanvas.addChild(newImg);
		}
 

分享到:
评论
1 楼 Da嗒_Sunny 2011-11-30  
求使用说明

相关推荐

    Flex裁剪图片

    通过以上步骤,我们可以构建一个功能完备的Flex图片裁剪应用。在实际开发中,还需要考虑性能优化、错误处理、兼容性等问题,确保应用在各种环境下的稳定运行。同时,对于源码的学习和分析,可以帮助开发者更深入理解...

    Flex 图像裁剪、剪切

    图像裁剪和剪切功能在Web应用中非常常见,例如在社交媒体平台或在线图片编辑工具中,用户可能需要调整图片大小、裁剪不必要的部分或创造出独特的视觉效果。 在Flex中实现图像裁剪和剪切,主要涉及到以下几个关键...

    Flex采用遮罩方法图片裁剪

    在Flex开发中,图片裁剪是一项常见的需求,特别是在创建用户界面或者图像编辑应用时。本文将详细介绍如何在Flex 3.5及以上版本中利用遮罩技术实现图片裁剪功能。 遮罩(Masking)是ActionScript 3和Flex中一个强大...

    flex剪裁图片demo

    "flex剪裁图片demo"是一个利用CSS Flexbox布局技术来实现图片剪裁功能的示例。下面将详细介绍如何使用Flexbox来创建一个可调整大小的图片剪裁框。 **一、Flexbox简介** Flexbox(弹性盒布局)是CSS3中的一种布局...

    flex 两个图片播放小程序

    在这个“flex 两个图片播放小程序”项目中,我们可以看到它被用来创建一个图片浏览应用,支持图片的放大和缩小功能,提供了用户友好的交互体验。接下来,我们将深入探讨Flex在图片浏览中的应用及其关键技术。 首先...

    flex 图片编辑器

    在开发Flex图片编辑器时,主要涉及以下知识点: 1. **Flex SDK**:Flex SDK是开发Flex应用程序的基础,包括ActionScript编译器和MXML编译器,以及用于构建、测试和部署应用的工具。开发者需要下载并安装SDK来开始...

    图片压缩flex demo

    对于图片压缩,常见的优化策略包括调整颜色深度、使用适当的压缩算法、裁剪不必要的部分、减小尺寸等。在Flex中,可以使用BitmapData的compress()方法,传入合适的压缩格式(如JPEGEncoder或PNGEncoder)和质量参数...

    QQ音乐小程序布局+小程序图片裁剪组件

    QQ音乐小程序布局与图片裁剪组件是微信小程序开发中的两个重要技术点。微信小程序是一种轻量级的应用形式,它不需要安装即可使用,为用户提供了便捷的体验。在本项目中,我们将关注如何构建一个具备音乐播放功能的小...

    Java Servlet版图片裁剪

    【Java Servlet版图片裁剪】技术是Web开发中一种实现图像处理的方式,它结合了Java Servlet、AJAX和JCrop库,提供了用户友好的图片裁剪功能。在本项目中,开发者利用Servlet作为服务器端的核心处理组件,处理来自...

    Flex 测试项目,图片压缩、上传、图片裁剪,Module测试,国际化

    “图片压缩、上传、图片裁剪”是项目中的功能模块,这表明该Flex应用提供了图像处理服务。图片压缩可能涉及算法优化,减少图像文件大小以提高网页加载速度或节省存储空间。图片上传则涉及到前端与后端的交互,用户...

    FLEX 背景图片设置

    此外,你可能需要考虑背景图片的拉伸和裁剪问题。默认情况下,`<s:Image>`或`Image`对象会尝试保持原始图片的比例。如果需要填充容器而不保持比例,可以使用`scaleMode`属性,例如设置为`"stretch"`。但请注意,这...

    flex图片显示 很绚丽的图片显示

    通过调整组件属性,我们可以实现各种图片显示效果,包括但不限于缩放、裁剪、平铺等。 要在Flex应用中显示图片,我们需要以下几个步骤: 1. 引入Image组件:在MXML文件中,可以通过以下方式引入`<mx:Image>`标签来...

    Java和C#的实现图片头像裁剪功能(含Flex、Flash、js、JQuery版)

    Java和C#的实现图片头像裁剪功能(含Flex、Flash、js、JQuery版)Java和C#的实现图片头像裁剪功能(含Flex、Flash、js、JQuery版)Java和C#的实现图片头像裁剪功能(含Flex、Flash、js、JQuery版)Java和C#的实现图片头像...

    Flex 摄像头拍照(带裁剪) 有演示地址 asp.net版

    你可能需要创建一个Web服务或API接口,接收来自Flex的POST请求,其中包含裁剪后的图片数据。处理流程可能如下: ```csharp [HttpPost] public void UploadImage(string imageData) { byte[] imageBytes = Convert....

    flex 图片操作

    在本话题中,我们将探讨“flex图片操作”,这涉及到如何使用Flex来处理和展示图片,包括调整角度和应用滤镜等视觉效果。 一、Flex中的图片显示 在Flex中,我们可以使用`mx.controls.Image`组件来显示图片。这个...

    Flex写的图片截图工具

    Flex写的图片截图工具,可以用在客户端对图片裁剪,比如头像,文章标题图片等。

    PNG图片裁剪-工具.zip

    PNG图片裁剪是一种常见的图像处理操作,特别是在网页设计、图形设计和移动应用开发等领域。PNG(Portable Network Graphics)格式以其支持透明度和高质量无损压缩而受到广泛欢迎。然而,PNG图片在创建或导出时可能会...

    Flex小知识点

    使用ImageLoader,开发者可以控制加载进度、处理错误以及设置图像的缩放和裁剪方式。ImageLoader与Flex的其他组件一样,可以轻松地通过MXML或者ActionScript进行集成。 关于"源码"标签,Flex作为一个开源项目,其源...

    flex_gifplayer使用实例

    对于`PictureTool`这个文件,这可能是用于处理图片的辅助工具类,包含了一些如缩放、裁剪、旋转等图片操作的方法。在将JPG图片合成为GIF的过程中,可能需要先对图片进行预处理,此时`PictureTool`就派上用场了。 在...

    Flex 上传图片 预览 加载图片到内存

    这样,图片数据就被加载到内存中,可供后续处理,如缩放、裁剪、滤镜效果等。 4. **性能优化**: - 对于大尺寸图片,加载到内存可能会消耗大量资源,因此在预览阶段,可以考虑先对图片进行缩放处理,减少内存占用...

Global site tag (gtag.js) - Google Analytics