カラーピッカー（MXML）

はじめてのMXML

forked:1
favorite:5
lines:156
license : MIT License
modified : 2010-11-10 18:04:16

Embed: Tweet

<?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"
               initialize="init()">
    <fx:Script>
        <![CDATA[
        
            import frocessing.color.ColorHSV;
            
            private const SW:int = 400;
            private const SH : int = 400;
            private const W:int = 300;
            private const H : int = 300;
            private var _g : Graphics;
            private var _color : ColorHSV;
            private function init():void{
                
                _color = new ColorHSV();
                _g = container.graphics;
                
                myStage.graphics.beginFill(0xaaaaaa);
                myStage.graphics.drawRect(0,0,SW,SH);
                myStage.graphics.endFill();
                myStage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
                myStage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
                drawHueBar();
                changeHue();
                drawPointer();
            }

/**
             * スライダイベント
             */
            private function changeHue():void
            {
                _color.h =colorSlider.value;
                _g.clear();
                drawHueGrad( _color.value);
                drawBrightness();
                setColorText();
            }
            /**
             * 色相バーを作成
             */
            private function drawHueBar() : void
            {
                var g :Graphics= hueBar.graphics;
                for (var i : int =0; i < hueBar.height ; i++) {
                    _color.h =i/hueBar.height*360;
                    g.beginFill(_color.value);
                    g.drawRect(0,(hueBar.height-i),21,1);
                }
                g.endFill();
            }
            /**
             * 16進数カラーコード
             */
            private function setColorText() : void
            {
                 colorCode.text="0x"+getColorText();
            }

private function getColorText() : String
            {
                var xx : Number = pointer.x - container.x ;
                var yy : Number = pointer.y - container.y ;
                var bmd : BitmapData = new BitmapData( W, H );
                bmd.draw( container );
                var col : Number = bmd.getPixel( xx, yy );
                //trace( col, " / " + xx, yy );
                bmd.dispose();
                var val16:String = col.toString(16);
                if(val16.length<6){
                    var max:int = 6-val16.length;
                    for (var i : int = 0; i < max; i++) {
                        val16 = "0"+val16;
                    }
                }
                
                return val16;
            }
            /**
             * ポインタ描く
             */
            private function drawPointer() : void
            {
                pointer.graphics.lineStyle(3.5,0x000000);
                pointer.graphics.drawCircle(0,0,10);
                pointer.graphics.lineStyle(1.5,0xffffff);
                pointer.graphics.drawCircle(0,0,10);
                pointer.graphics.endFill();
                pointer.x = W / 2 + container.x;
                pointer.y = H / 2 + container.y;
            }
            private function onMouseDown(event : MouseEvent) : void
            {
                if (!myStage.hasEventListener(  Event.ENTER_FRAME)) {
                    myStage.addEventListener( Event.ENTER_FRAME, onMouseEnter);
                }
            }
            private function moveStop():void
            {
                if (myStage.hasEventListener(  Event.ENTER_FRAME)) {
                    myStage.removeEventListener( Event.ENTER_FRAME, onMouseEnter);
                }
            }
            private function onMouseUp(event : MouseEvent) : void
            {
                moveStop();
            }
            
            private function onMouseEnter(event : Event) : void
            {
                pointer.x =mouseX;
                pointer.y = mouseY;
                if (pointer.x <= container.x ){
                    pointer.x = container.x;
                }
                if (pointer.x >= container.x +W){
                    pointer.x = container.x +W-1;
                }
                if (pointer.y <= container.y ){
                    pointer.y = container.y;
                }
                if (pointer.y >= container.y +H){
                    pointer.y = container.y +H-1;
                }
                //ドラッグステージ外に出た
                if (mouseX<=  myStage.x ||mouseX>=myStage.x+SW ||mouseY<=myStage.y || mouseY >myStage.y + SH){
                    moveStop();
                }
                setColorText();
            }

/**
             * 彩度グラデーション
             */
            private function drawHueGrad(trgHue:Number = 0xff0000):void
            {
                var rect:Shape = new Shape();
                var colors:Array=[0xffffff,trgHue];
                var alphas:Array = [1, 1];
                var ratios:Array = [0,255];
                 var matrix:Matrix = new Matrix();
                matrix.createGradientBox(W, H, 0, 0, 0);
                _g.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, matrix, SpreadMethod.PAD, InterpolationMethod.RGB, 0);
                _g.drawRect(0, 0, W, H);
                _g.endFill();
            }
            /**
             * 明度グラデーション
             */
            private function drawBrightness() : void
            {
                var color:Array = [0x000000, 0x000000];
                var alpha:Array = [0, 1];
                var ratio:Array = [0, 255];
                var matrix:Matrix = new Matrix();
                matrix.createGradientBox(W, H, Math.PI*0.5, 0, 0);
                _g.beginGradientFill(GradientType.LINEAR, color, alpha, ratio,matrix, SpreadMethod.PAD, InterpolationMethod.RGB, 0);
                _g.drawRect(0, 0, W, H);
                _g.endFill();
            }
        
        ]]>
        
    </fx:Script>
        <mx:Canvas id ="myStage"  width="400"  height="400">
            <mx:Canvas id ="container" height="300" width="300" x="50" y="50"></mx:Canvas>
        </mx:Canvas>
        <mx:Canvas id="pointer" width="10" height="10"></mx:Canvas>
        
        <mx:Canvas id="sliderArea" x="420" y = "50">
        
            <mx:Canvas id="hueBar" width="15" height="300" ></mx:Canvas>
            
            <mx:Slider id="colorSlider" maximum="360" minimum="0" direction="vertical" snapInterval=".01"
                liveDragging="true"
                change ="changeHue()" 
                x="5"
                height = "300"
            />
        </mx:Canvas>
        
        <s:TextArea id="colorCode"
            width = "80"
            height = "18"
            x="360"
            y = "430" />
</s:Application>

Code Fullscreen

Preview Fullscreen

nanlow

xor

zahir

matsu

clockmaker :

MXMLによるカラーピッカー

sort

pv0

forked from: カラーピッカー（MXML）

acchib

forked:0
favorite:0
lines:157 (diff:1)