AS3实现对图片进行任意形状裁剪的例子

最新推荐文章于 2021-01-27 16:14:29 发布

原创最新推荐文章于 2021-01-27 16:14:29 发布 · 388 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#SVN #Flash #.net #XML #HTML

flex 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一种使用Flash实现的自定义裁剪功能，通过不同的形状选项来裁剪图片。用户可以选择矩形、圆角矩形、圆形、椭圆形或任意形状进行精确裁剪。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12" backgroundColor="#FFFFFF" creationComplete="init();" viewSourceURL="srcview/index.html">

	<mx:Script>
		<![CDATA[
			import flash.net.navigateToURL;
			import cn.riahome.transformer.DisplayObjectTransformer;
			import mx.core.FlexBitmap;
			import mx.core.UIComponent;

			import mx.events.DropdownEvent;
			import mx.charts.chartClasses.DataDescription;

			import mx.collections.ArrayCollection;



			private var shapeType:int = 0;
			private var cutOutShape:FlexBitmap;
			private var template:UIComponent;
			private var downPoint:Point;




			private function init():void
			{
				downPoint = new Point();
				template = new UIComponent();
				template.x = img.x;
				template.y = img.y;
				addChild( template );

				cutOutShape = new FlexBitmap();
				var uic:UIComponent = new UIComponent();
				uic.addChild( cutOutShape );
				addChild( uic );
				uic.x = 450;
				uic.y = 69;
			}



			[Bindable]
			private var dp:ArrayCollection = new ArrayCollection([
												{label:"矩形", data:0},
												{label:"圆角矩形", data:1},
												{label:"圆形", data:2},
												{label:"椭圆形", data:3},
												{label:"任意形状", data:4}
												]);



			private function closeHandler( event:DropdownEvent ):void
			{
				shapeType = cBox.selectedItem.data;
			}



			private function imgMouseDown( event:MouseEvent ):void
			{
				downPoint.x = img.mouseX;
				downPoint.y = img.mouseY;

				template.graphics.clear();

				if( shapeType == 4 )
				{
					template.graphics.moveTo( downPoint.x, downPoint.y );
					template.graphics.lineStyle( 1, 0x0000FF );
					template.graphics.beginFill( 0xFFFFFF, 0.2 );
				}

				img.addEventListener( MouseEvent.MOUSE_MOVE, imgMouseMove );
			}



			private function imgMouseUp( event:MouseEvent ):void
			{
				img.removeEventListener( MouseEvent.MOUSE_MOVE, imgMouseMove );

				template.graphics.endFill();

				if( template.transform.pixelBounds.width != 0 )
				{
					cutOutShape.bitmapData = DisplayObjectTransformer.cutOutSuper( img, template );
				}
			}



			private function imgMouseMove( event:MouseEvent ):void
			{
				if( shapeType == 4 )
				{
					template.graphics.lineTo( img.mouseX - 2, img.mouseY - 2 );
					return;
				}

				template.graphics.clear();
				template.graphics.lineStyle( 1, 0x0000FF );
				template.graphics.beginFill( 0xFFFFFF, 0.2 );

				switch( shapeType )
				{
					case 0:
						template.graphics.drawRect( downPoint.x, downPoint.y, img.mouseX - downPoint.x - 2, img.mouseY - downPoint.y - 2 );
						break;
					case 1:
						template.graphics.drawRoundRect( downPoint.x, downPoint.y, img.mouseX - downPoint.x - 2, img.mouseY - downPoint.y - 2, 20, 20 );
						break;
					case 2:
						template.graphics.drawCircle( downPoint.x, downPoint.y, Math.sqrt((img.mouseX - downPoint.x)*(img.mouseX - downPoint.x) + (img.mouseY - downPoint.y)*(img.mouseY - downPoint.y)) - 2 );
						break;
					case 3:
						template.graphics.drawEllipse( downPoint.x, downPoint.y, img.mouseX - downPoint.x - 2, img.mouseY - downPoint.y - 2 );
						break;
				}

			}



		]]>
	</mx:Script>

	<mx:Style source="cn/riahome/css/flex_skins.css"/>

	<mx:Image id="img" source="@Embed('cn/riahome/assets/poster_wyzx.png')" x="0" y="69"
		mouseDown="imgMouseDown( event );" mouseUp="imgMouseUp( event );"/>

	<mx:Label text="请选择您要裁剪的形状：" x="0" y="13" fontWeight="bold"/>

	<mx:ComboBox id="cBox" dataProvider="{dp}" x="156" y="10" close="closeHandler( event );" toolTip="请选择形状"/>

	<mx:Label text="注：前面几项是常规形状，请选择最后一项以说明此算法可裁剪任何形状！" x="0" y="41" color="#FF0000"/>



</mx:Application>