« IFrameを使った呼び出し | トップページ | DOM操作 »

2007年5月 6日 (日)

色指定/変換

Dojoにおける色指定はColorオブジェクトを用いる。Colorオブジェクトは、ドローイングAPIにおいても用いられる。

Colorオブジェクトを利用するときは、dojo.gfx.colorをrequireする。以下にColorオブジェクトの作成例を示す。6桁または3桁のRGBカラーコード文字列(最初に#があってもなくてもよい)、CSSにおけるRGB指定の文字列、RGBの3つの数値または長さ3の数値配列のいずれかを指定できる。

dojo.require("dojo.gfx.color");
new dojo.gfx.color.Color("#003399")
new dojo.gfx.color.Color("rgb(0,51,153)")
new dojo.gfx.color.Color([0,51,153])
new dojo.gfx.color.Color(0,51,153)

各指定方法の最後にアルファチャネルを指定することもできる。

new dojo.gfx.color.Color("#003399", 0.5)
new dojo.gfx.color.Color("rgb(0,51,153)", 0.5)
new dojo.gfx.color.Color([0,51,153,0.5])
new dojo.gfx.color.Color(0,51,153,0.5)

Colorオブジェクトに対して、toXXX()メソッドを用いて様々な色指定方法に変換できる。HSV, HSLを用いるときは、それぞれ、dojo.gfx.color.hsv、dojo.gfx.color.hslをrequireする。

色指定方法メソッド概要
RGBtoRgb()RGBの3つの数値の配列を返す
RGB+αチャネルtoRgba()RGBとαチャネルを含む4つの数値の配列を返す
HEXtoHex()"#003399"のように、#と6桁のRGBカラーコード文字列を返す
CSStoCss()"rgb(0, 51, 153)"のようにrgb(...)を含んだRGBカラーコードの文字列を返す
HSVtoHsv()HSV(色相、彩度、輝度)の3つの数値の配列を返す
HSLtoHsl()HSL(色相、彩度、明度)の3つの数値の配列を返す

以下のdojo.gfx.colorのメソッドを用いて変換することもできる。

  • dojo.gfx.color.extractRGB(hex or "css-style string")
  • dojo.gfx.color.rgb2hsv(rgb)
  • dojo.gfx.color.rgb2hsl(rgb)
  • dojo.gfx.color.rgb2hex(rgb)
  • dojo.gfx.color.hsv2rgb(hsv)
  • dojo.gfx.color.hsl2rgb(hsl)
  • dojo.gfx.color.hsl2hex(hsl)
  • dojo.gfx.color.hex2rgb(hex)
  • dojo.gfx.color.hex2hsl(hex)

dojo.gfx.Colorspaceを用いて色指定方法を変換することもできる。dojo.gfx.Colorspaceを用いて変換するときは、dojo.gfx.Colorspaceをrequireし、dojo.gfx.Colorspaceオブジェクトを作成する。Colorspaceオブジェクトのconvertメソッドを用いて変換できる。

convertメソッドの最初の引数で、変換元の色指定方法における色指定を配列で指定する。2つ目の引数で変換元の色指定方法、3つ目の引数で変換先の色指定方法を指定する。以下に変換例を示す。

dojo.require("dojo.gfx.Colorspace");
var c = new dojo.gfx.Colorspace();
var cmy = c.convert([0,51,153], 'RGB', 'CMY');

以下に変換できる色指定方法の一覧を示す。

色指定方法配列での指定方法
RGB RGBを表す長さ3の配列
XYZ XYZ色空間を表す長さ3の配列
xyY XYZ系の変形であるxyY色空間を表す長さ3の配列
Lab Lab色空間の明度、赤~緑(a軸)、黄~青(b軸)を表す長さ3の配列
LCHab LCHab色空間を表す長さ3の配列
Luv Luv色空間の明度指数、色度(u)、色度(v)を表す長さ3の配列
LCHuv LCHuv色空間を表す長さ3の配列
CMY CMYを表す長さ3の配列
CMYK CMYKを表す長さ4の配列
HSV 色相、彩度、明度を表す長さ3の配列
HSL 色相、彩度、輝度を表す長さ3の配列

« IFrameを使った呼び出し | トップページ | DOM操作 »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/232684/6318016

この記事へのトラックバック一覧です: 色指定/変換:

« IFrameを使った呼び出し | トップページ | DOM操作 »