色空間メソッドと色のアニメーションを拡張するjQueryプラグインiColorを書いた

[色空間] - 今日も適当ダイアリーなどで、色空間の変換についての記事を書きましたが、それらを簡単に使えるように、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

デモはこちら

jQuery.iColor - jQueryPlugin DEMO
jQuery.iColor - jQueryPlugin DEMO

簡単な説明

このプラグインでは、jQueyrに下記3つが拡張されます。

• animateの拡張（色のアニメーションが行えます）
• getColorメソッドの追加（iColorオブジェクトを返します）
• iColorオブジェクト($.iColor)の追加

animateã‚’æ‹¡å¼µ

jQuery単体ではanimateにて色のアニメーションが行えないのですが、行えるように拡張を行いました。
また、柔軟な指定に対応しました。

対応したプロパティ名は下記の通りです。

• color
• backgroundColor
• borderTopColor
• borderRightColor
• borderBottomColor
• borderLeftColor
• outlineColor

値は下記2通りの方法で指定出来ます。

• CSS色指定 (※rgba、hsla形式も対応していますが、IEではalpha値は無視されます)
• オブジェクト指定

サンプルを見た方がわかりやすいと思います。

$("#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', 'RGBA', 'HSV', 'HSVA', 'HLS', 'HLSA', 'HSL', 'HSLA'

色要素プロパティ

typeプロパティに応じて、それぞれの色要素プロパティを持ちます。
たとえば、typeがRGBだった場合、r、g、bという3つの色要素プロパティを持つことになります。

iColorオブジェクトのメソッド

iColorオブジェクトは下記のメソッドを持ちます。

string function getStr([format = '#xxx'])

iColorオブジェクトのCSS色表現文字列を返します。

format は下記のいずれかを取ります

#xxx

#fffのような(可能であれば、短い)16進表現でテキストを返します。

#xxxxxx

#ffffffのような6桁の6進表現でテキストを返します。

rgb

rgb(255, 255, 255) または、rgba(255, 255, 255, 1)形式で返します。

rgb%

rgb(100%, 100%, 100%) または、rgba(100%, 100%, 100%, 1)形式で返します。

hsl

hsl(350, 0.5, 1) または、hsla(350, 0.5, 1, 1)形式で返します。

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' など)を指定出来ます。

詳細はデモで確認してください。

ファイルはこちら

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

デモはこちら

jQuery.iColor - jQueryPlugin DEMO
jQuery.iColor - jQueryPlugin DEMO