[色空間] - 今日も適当ダイアリーなどで、色空間の変換についての記事を書きましたが、それらを簡単に使えるように、jQueryプラグインとして書き直しました。
まだ、アルファ版なのですが、取り急ぎ公開しておきます。
ファイルはこちら
http://jquery-icolor.googlecode.com/svn/tags/
http://code.google.com/p/jquery-icolor/downloads/list (圧縮ファイル)
http://www.weekendphp.com/jQuery/jquery.color.js
http://www.weekendphp.com/jQuery/jquery.color-min.js
簡単な説明
このプラグインでは、jQueyrに下記3つが拡張されます。
- animateの拡張（色のアニメーションが行えます）
- getColorメソッドの追加（iColorオブジェクトを返します）
- iColorオブジェクト($.iColor)の追加
animateを拡張
jQuery単体ではanimateにて色のアニメーションが行えないのですが、行えるように拡張を行いました。
また、柔軟な指定に対応しました。
対応したプロパティ名は下記の通りです。
- color
- backgroundColor
- borderTopColor
- borderRightColor
- borderBottomColor
- borderLeftColor
- outlineColor
値は下記2通りの方法で指定出来ます。
サンプルを見た方がわかりやすいと思います。
$("#test1").animate({ backgroundColor: 'yellow' }, 2000); $("#test2").animate({ backgroundColor: // オブジェクトとして、一部の値を渡すことも出来ます。 { 'h': '+=1080', 's': '-=0.3', 'mode': 'HSV' } }, 3000); $("#test3").animate({ backgroundColor: 'rgba(255,255,0,0)', borderTopColor: 'lightblue', borderBottomColor: 'lightblue', borderLeftColor: 'lightblue', borderRightColor: 'lightblue' }, 2000); $("#test4").animate({ backgroundColor: { 'r': '-=100', 'b': 200, 'a': '+=0.5', 'mode': 'RGB' } }, 2000);
getColorメソッドの追加
iColor function getColor(attr)
attr にはCSSプロパティ名を指定します。
返り値はiColorオブジェクトとなります。
// iColor オブジェクトが返ります。 color = $('div#test1').getColor('background-color'); // こんな使い方もできます $('#getColorTest2').text( $('div#test1').getColor('background-color') // div#test1の背景色を取得 .change('h', '+=30') // hue (色相) を +30度 変える .getStr() // 色表現文字列を取得 );
iColorオブジェクトの追加
iColorオブジェクトは下記のいずれかにより生成されます。
// A) getColorメソッド color = $('div#test1').getColor('background-color'); // B) iColorコンストラクタ // B-1. 引数指定 color = jQuery.iColor(color1, color2, color3, [type = 'RGB']); color = jQuery.iColor(color1 color2, color3, [alpha], [type = 'RGBA']); // color1〜3は数値ですが、typeにより取り得る範囲が異なります。 // R, G, B: 0 〜 255 または 0% 〜 100% // H: 0〜360 (角度なので 0 と 360 は同値) // S, V, L: 0 〜 1 または 0% 〜 100% // alpha 値は 0〜1の数値です。 // type は色空間を表し次のいずれかを取ります。 // 'RGB', 'RGBA', 'HSV', 'HSVA', 'HLS', 'HLSA', 'HSL', 'HSLA' // B-2. 配列指定 color = jQuery.iColor(colorArray, [type = 'RGB'||'RGBA']); // colorArray は [color1, color2, color3] // または [color1, color2, color3, alpha] となります。 // B-3. オブジェクト指定 color = jQuery.iColor(colorArray, [type = 'RGB'||'RGBA']); // 例： jQuery.iColor({r: 255, g: 255, b: 255}, 'RGB'); // jQuery.iColor({r: 255, g: 255, b: 255, type: 'RGB'}); // B-4. CSS色表現指定 color = jQuery.iColor(colorStr); // colorStr は、 blue や #rrggbb、rgb(255,255,0)、hsla(300,10%,50%,1) など
iColorオブジェクトのプロパティ
iColorオブジェクトは下記のプロパティを持ちます。
色要素プロパティ
typeプロパティに応じて、それぞれの色要素プロパティを持ちます。
たとえば、typeがRGBだった場合、r、g、bという3つの色要素プロパティを持つことになります。
iColorオブジェクトのメソッド
iColorオブジェクトは下記のメソッドを持ちます。
iColor function to(type)
iColor function toRGB()
iColor function toRGBA()
iColor function toHSV()
iColor function toHSVA()
iColor function toHSL()
iColor function toHSLA()
iColor function toHLS()
iColor function toHLSA()
iColorオブジェクトの色空間変換し、新しいiColorオブジェクトを返します。
toXXX 形式は、to('XXX')のショートカットであり、同一の挙動をします。
iColor function change(target, val, mode)
iColorオブジェクトの特定の色要素を変更し、新しいiColorオブジェクトを返します。
target には変更したい色要素名（1文字の文字列）を指定します。
val には、変更したい値(1 や '255' など)、もしくは変化させたい量('+=0.1' や '-=30' など)を指定出来ます。
詳細はデモで確認してください。
