BlendModeの確認サンプル
勉強途中です。確認用にこんなものを作ってみた。でもソースも見ないとうまく伝わらないな。
見せ方を考えないとだめだ。
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ import flash.display.*; import flash.events.*; import flash.filters.*; import mx.core.*; import mx.controls.*; import mx.events.*; import mx.containers.*; [Bindable] private var modes:Array = [ {label:'NORMAL', data: BlendMode.NORMAL}, {label:'ADD', data: BlendMode.ADD}, {label:'ALPHA', data: BlendMode.ALPHA}, {label:'DARKEN', data: BlendMode.DARKEN}, {label:'DIFFERENCE', data: BlendMode.DIFFERENCE}, {label:'ERASE', data: BlendMode.ERASE}, {label:'HARDLIGHT', data: BlendMode.HARDLIGHT}, {label:'INVERT', data: BlendMode.INVERT}, {label:'LAYER', data: BlendMode.LAYER}, {label:'LIGHTEN', data: BlendMode.LIGHTEN}, {label:'MULTIPLY', data: BlendMode.MULTIPLY}, {label:'OVERLAY', data: BlendMode.OVERLAY}, {label:'SCREEN', data: BlendMode.SCREEN}, {label:'SUBTRACT', data: BlendMode.SUBTRACT} ]; private var startX:Number; private var startY:Number; private var startElX:Number; private var startElY:Number; private var target:UIComponent; private function initRect(a:Number = 1):void { var g:Graphics = rect.graphics; g.clear(); g.beginFill(0xff0000, a); g.drawRect(0, 0, 100, 100); g.endFill(); } private function initCircle(a:Number = 1):void { var g:Graphics = circle.graphics; g.clear(); g.beginFill(0x00ffff, a); g.drawCircle(50, 50, 50); g.endFill(); } private function onMouseDown(event:MouseEvent):void { event.stopPropagation(); target = UIComponent(event.target); startX = event.stageX; startY = event.stageY; startElX = target.x; startElY = target.y; canvas.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove); canvas.addEventListener(MouseEvent.MOUSE_UP, onMouseUp); } private function onMouseMove(event:MouseEvent):void { var currentX:Number = event.stageX; var currentY:Number = event.stageY; var deltaX:Number = currentX - startX; var deltaY:Number = currentY - startY; target.x = startElX + deltaX; target.y = startElY + deltaY; } private function onMouseUp(event:MouseEvent):void { canvas.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove); canvas.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp); } ]]> </mx:Script> <mx:HBox> <mx:Canvas horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:Image source="@Embed(source='assets/palau.jpg')"/> <mx:Canvas backgroundColor="0" alpha="{canvasAlpha.value / 100}" width="100%" height="100%" id="canvas" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:UIComponent id="rect" width="100" height="100" creationComplete="initRect();" mouseDown="onMouseDown(event);"/> <mx:UIComponent id="circle" width="100" height="100" creationComplete="initCircle();" mouseDown="onMouseDown(event);"/> </mx:Canvas> </mx:Canvas> <mx:VBox> <mx:Label text="キャンバスのBlendMode"/> <mx:ComboBox id="canvasBlendMode" dataProvider="{modes}" close="canvas.blendMode = ComboBox(event.target).selectedItem.data" rowCount="{modes.length}"/> <mx:Label text="キャンバスの透明度"/> <mx:HSlider id="canvasAlpha" value="50" minimum="0" maximum="100" liveDragging="true"/> <mx:CheckBox id="canvasBlurFilter" label="BlurFiter" change="canvas.filters = canvasBlurFilter.selected ? [new BlurFilter()] : [];"/> <mx:Label text="四角のBlendMode"/> <mx:ComboBox id="rectBlendMode" dataProvider="{modes}" close="rect.blendMode = ComboBox(event.target).selectedItem.data" rowCount="{modes.length}"/> <mx:CheckBox id="rectBlurFilter" label="BlurFiter" change="rect.filters = rectBlurFilter.selected ? [new BlurFilter()] : [];"/> <mx:Label text="四角の透明度"/> <mx:HSlider id="rectAlpha" value="100" minimum="0" maximum="100" liveDragging="true" change="initRect(event.value / 100)"/> <mx:Label text="円のBlendMode"/> <mx:ComboBox id="circleBlendMode" dataProvider="{modes}" close="circle.blendMode = ComboBox(event.target).selectedItem.data" rowCount="{modes.length}"/> <mx:CheckBox id="circleBlurFilter" label="BlurFiter" change="circle.filters = circleBlurFilter.selected ? [new BlurFilter()] : [];"/> <mx:Label text="円の透明度"/> <mx:HSlider id="circleAlpha" value="100" minimum="0" maximum="100" liveDragging="true" change="initCircle(event.value / 100)"/> </mx:VBox> </mx:HBox> </mx:Application>