スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--.--.-- | | スポンサー広告

カラーピッカー

カラーピッカーのサンプルを作ってみました。




上部のカラーパレットをクリックすると、クリックしたところの色が選択されて右下に表示されます。
R、G、B、色相、彩度、明度のテキストフィールドは、選択した色のソレゾレの値デス。コレの数値をいじると選択色はその値の色になります。

色相、彩度、明度はソレゾレHSV色空間のH値、S値、V値となってます。のハズです。

カラーパレットは、どんなのが標準的か知らないのでx方向にH値を変化させて、y方向は上半分がS値のグラデーション、下半分がV値のグラデーションになってマス。あ、描画はBitmapDataにsetPixelしてマス。

スクリプトはこんなカンジです。

import flash.display.BitmapData;
import flash.geom.Transform;
import flash.geom.ColorTransform;
// カラーパレット画像
var palette:BitmapData = createPaletteBitmap();
// カラーパレットムービークリップ
palette_mc.attachBitmap(palette, 1);
palette_mc._x = 10;
palette_mc._y = 10;
palette_mc.onRelease = function() {
// マウスポインタ位置の色を取得
var x:Number = this._xmouse;
var y:Number = this._ymouse;
var c:Number = palette.getPixel(x, y);
// RGB値のテキストを更新
updateRgb(c);
// HSV値のテキストを更新
updateHsv(c);
// 色を更新
updateColor(c);
}
// RGBを更新
function updateRgb(c:Number) {
r_txt.text = (c >> 16).toString();
g_txt.text = ((c >> 8) & 0xFF).toString();
b_txt.text = (c & 0xFF).toString();
}
// HSVを更新
function updateHsv(c:Number) {
var hsv:Object = colorToHsv(c);
h_txt.text = hsv.h.toString();
s_txt.text = hsv.s.toString();
v_txt.text = hsv.v.toString();
}
// 色を更新
function updateColor(c:Number) {
var cStr:String = c.toString(16).toUpperCase();
while (cStr.length < 6) {
cStr = "0" + cStr;
}
color_txt.text = "0x" + cStr;
var cTrans:ColorTransform = new ColorTransform();
cTrans.rgb = c;
var trans:Transform = new Transform(color_mc);
trans.colorTransform = cTrans;
}
// RGB値変更
r_txt.onChanged = doRgbChanged;
g_txt.onChanged = doRgbChanged;
b_txt.onChanged = doRgbChanged;
// RGBのテキストフィールドを更新したときの処理
function doRgbChanged() {
var r:Number = Number(r_txt.text);
var g:Number = Number(g_txt.text);
var b:Number = Number(b_txt.text);
if (r >= 0 && r <= 255 &&
g >=0 && g <= 255 &&
b >=0 && b <= 255) {
var c:Number = r << 16 | g << 8 | b;
updateHsv(c);
updateColor(c);
}
}
// HSV値変更
h_txt.onChanged = doHsvChanged;
s_txt.onChanged = doHsvChanged;
v_txt.onChanged = doHsvChanged;
// HSVのテキストフィールドを更新したときの処理
function doHsvChanged() {
var h:Number = Number(h_txt.text);
var s:Number = Number(s_txt.text);
var v:Number = Number(v_txt.text);
if (h >= 0 && h < 360 &&
s >= 0 && s <= 1 &&
v >= 0 && v <= 1) {
var c:Number = hsvToColor(h, s, v);
updateRgb(c);
updateColor(c);
}
}
// カラー値変更
color_txt.onChanged = doColorChanged;
// カラー値のテキストフィールドを更新したときの処理
function doColorChanged() {
var c:Number = Number(color_txt.text);
if (c >= 0 && c <= 0xFFFFFF) {
updateRgb(c);
updateHsv(c);
var cTrans:ColorTransform = new ColorTransform();
cTrans.rgb = c;
var trans:Transform = new Transform(color_mc);
trans.colorTransform = cTrans;
}
}
// カラーパレットのビットマップデータを生成し、戻します。
function createPaletteBitmap():BitmapData {
var bitmap:BitmapData = new BitmapData(360, 200);
var y:Number = 0;
var x:Number = 0;
// 上半分は彩度を変化させる
for (y = 0; y < 100; y++) {
for (x = 0; x < 360; x++) {
bitmap.setPixel(x, y, hsvToColor(x, y * 0.01, 1));
}
}
// 下半分は明度を変化させる
for (y = 100; y < 200; y++) {
for (x = 0; x < 360; x++) {
bitmap.setPixel(x,
y,
hsvToColor(x, 1, 1 - (y - 100) * 0.01));
}
}
return bitmap;
}
// HSVをカラー値に変換し、戻します。
function hsvToColor(h:Number, s:Number, v:Number):Number {
var cv:Number = Math.round(v * 255);
var r:Number = cv;
var g:Number = cv;
var b:Number = cv;
if (s > 0) {
var i:Number = Math.floor(h / 60);
var f:Number = h / 60 - i;
var m:Number = Math.round(v * (1 - s) * 255);
var n:Number = Math.round(v * (1 - s * f) * 255);
var k:Number = Math.round(v * (1 - s * (1 - f)) * 255);
switch(i) {
case 0:
g = k;
b = m;
break;
case 1:
r = n;
b = m;
break;
case 2:
r = m;
b = k;
break;
case 3:
r = m;
g = n;
break;
case 4:
r = k;
g = m;
break;
case 5:
g = m;
b = n;
break;
}
}
return r << 16 | g << 8 | b;
}
// カラー値をHSVに分解し、戻します。
function colorToHsv(color:Number):Object {
var r:Number = color >> 16;
var g:Number = (color >> 8) & 0xFF;
var b:Number = color & 0xFF;
var max:Number = Math.max(r, Math.max(g, b));
var min:Number = Math.min(r, Math.min(g, b));
var range:Number = max - min;
var h:Number = 0;
var s:Number = 0;
var v:Number = max / 255;
if (v > 0) {
s = range / max;
if (s > 0) {
var cr:Number = (max - r) / range;
var cg:Number = (max - g) / range;
var cb:Number = (max - b) / range;
if (r == max) {
h = cb - cg;
} else if (g == max) {
h = 2 + cr - cb;
} else {
h = 4 + cg - cr;
}
h *= 60;
if (h < 0) {
h += 360;
}
}
}
return {h:Math.round(h * 100) * 0.01,
s:Math.round(s * 100) * 0.01,
v:Math.round(v * 100) * 0.01};
}
palette_mcはカラーパレットのムービークリップです。このムービークリップにcreatePaletteBitmapメソッドで作ったBitmapDataをattachBitmapしてます。

createPaletteBitmapメソッドは、360×200のBitmapDataを作りマス。上半分はy方向に0.01ずつ彩度を変化させて、下半分はy方向に0.01ずつ明度を変化させてsetPixelしてマス。x方向は色相です。このときにHSV値から0xRRGGBBの値を作らないといけないのですが、コレはhsvToColorメソッドでやってます。

palette_mcのonReleaseイベントハンドラで、マウスカーソルの位置の色から7つのテキストフィールドと右下のムービークリップcolor_mcの色を設定しています。色相/明度/彩度はcolorToHsvメソッドでH/S/V値を算出してソレを表示してます。color_mcの色はColorTransformを使って変えてマス。

r_txt、g_txt、b_txtはR/G/BのテキストフィールドでonChangedイベントハンドラは同じです。他のテキストフィールドやcolor_mcの色を入力値で更新してます。

h_txt、s_txt、v_txtは色相/彩度/明度のテキストフィールドです。やっぱり同一のonChangedイベントハンドラを実装してます。

color_txtは色のテキストフィールドです。コイツもonChangedイベントハンドラを実装してます。なので色テキストフィールドを変更しても他の値が変わりマス。

スポンサーサイト

テーマ:Flash - ジャンル:コンピュータ

2007.06.22 | | Comments(1) | Trackback(0) | Flash/ActionScript

«  | HOME |  »

プロフィール

HundredthMonkey

Author:HundredthMonkey
プログラマ。

ブロとも申請フォーム

この人とブロともになる

メールフォーム

名前:
メール:
件名:
本文:

ブログ内検索


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。