2010年3月14日日曜日

カラーピッカーを作るその2(まずはAIRで挑戦してみました)



久々の更新。
カラーピッカーを作ろうと思い立ったと書いたのですが、カラーピッカーというかやりたい事というか目標をこんな風に決めてみました。



  1. キャプチャモードにしてデスクトップ上にマウスを当てるとマウスの位置の色が拡大して表示される
  2. キャプチャモードにしてデスクトップ上にマウスを当ててクリックするとマウスの位置の色を取得することができる
  3. 取得した色を元にRGBベースで色の変更ができる
  4. 取得した色を元に色相・明度・彩度ベースで色の変更ができる

これを最初にAIRで作ろうと思いました。
というわけで、mxmlファイルで画面を作成しました。


<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="380" width="560" backgroundColor="#ffffff">
<mx:HBox backgroundColor="#d4d0c8" horizontalScrollPolicy="off" verticalScrollPolicy="off" height="90%" width="100%">
<mx:VBox backgroundColor="#d4d0c8" paddingLeft="10" paddingRight="10" paddingTop="10">
<mx:HBox>
<mx:TextInput id="colorText" maxChars="7" restrict="#a-fA-F0-9"/>
<mx:Button id="subWindowButton" label="サンプリング"/>
</mx:HBox>
<mx:Canvas id="colorCanvas" width="200" height="200"/>
</mx:VBox>
<mx:VRule strokeColor="#808080" shadowColor="#FFFFFF" height="100%"/>
<mx:VBox paddingLeft="10" paddingTop="10">
<mx:HBox>
<mx:Label text="R" fontSize="12" fontWeight="bold" />
<mx:NumericStepper id="tx_r" maxChars="3" minimum="0" maximum="255" stepSize="1"/>
<mx:HSlider id="rSlider" minimum="0" maximum="255"
showDataTip="false"
tickColor="black"
snapInterval="1" tickInterval="10"
allowTrackClick="true"
liveDragging="true"/>
</mx:HBox>
<mx:HBox>
<mx:Label text="G" fontSize="12" fontWeight="bold" />
<mx:NumericStepper id="tx_g" maxChars="3" minimum="0" maximum="255" stepSize="1"/>
<mx:HSlider id="gSlider" minimum="0" maximum="255"
showDataTip="false"
tickColor="black"
snapInterval="1" tickInterval="10"
allowTrackClick="true"
liveDragging="true"/>
</mx:HBox>
<mx:HBox paddingBottom="20">
<mx:Label text="B" fontSize="12" fontWeight="bold" />
<mx:NumericStepper id="tx_b" maxChars="3" minimum="0" maximum="255" stepSize="1"/>
<mx:HSlider id="bSlider" minimum="0" maximum="255"
showDataTip="false"
tickColor="black"
snapInterval="1" tickInterval="10"
allowTrackClick="true"
liveDragging="true"/>
</mx:HBox>
<mx:HBox>
<mx:Label text="H" fontSize="12" fontWeight="bold" />
<mx:NumericStepper id="tx_h" maxChars="3" minimum="0" maximum="360" stepSize="1"/>
<mx:HSlider id="hSlider" minimum="0" maximum="360"
showDataTip="false"
tickColor="black"
snapInterval="1" tickInterval="10"
allowTrackClick="true"
liveDragging="true"/>
</mx:HBox>
<mx:HBox>
<mx:Label text="S" fontSize="12" fontWeight="bold" />
<mx:NumericStepper id="tx_s" maxChars="3" minimum="0" maximum="100" stepSize="1"/>
<mx:HSlider id="sSlider" minimum="0" maximum="100"
showDataTip="false"
tickColor="black"
snapInterval="1" tickInterval="10"
allowTrackClick="true"
liveDragging="true"/>
</mx:HBox>
<mx:HBox>
<mx:Label text="V" fontSize="12" fontWeight="bold" />
<mx:NumericStepper id="tx_v" maxChars="3" minimum="0" maximum="100" stepSize="1"/>
<mx:HSlider id="vSlider" minimum="0" maximum="100"
showDataTip="false"
tickColor="black"
snapInterval="1" tickInterval="10"
allowTrackClick="true"
liveDragging="true"/>
</mx:HBox>
</mx:VBox>
</mx:HBox>
</mx:WindowedApplication>


これで画面はできあがったので、今後は各フォームのイベント処理を今後は追加していきます。