triangle-color-selector

  1. Triangle Color Selector
    1. Sample
  2. Description
    1. Code
    2. Usage

Triangle Color Selector

Sample

// 渡した要素に appendChild される。
var tcs = new TriangleColorSelector(document.getElementById("tcs"));

// 色が変わったら呼び出される。
tcs.addEventListener("change", function (e) {
    window.status = e.hex;
});

NULL::colors : これを使ったカラージェネレータ

Description

Painter 風カラーピッカーですよ。コード自体は GIMP の modules/colorsel_triangle.c からパクりました。そんなわけでライセンスが強制 GNU/GPL なのかしら。しらね。某 IRC チャンネルのそれがしさんに感謝。

Gecko だと クリック→ドラッグ が上手くできない。現状では Opera が完璧。IE では動かないです。透過 PNG を DirectX フィルタさせて、addEventListener 系をやってやればいけそうな気がしますが、なんか Math.atan とかが動いてない気がして微妙です。

  1. Mozilla Firefox 1.0 (開発環境)
  2. Opera 7.6 preview3

Code

  1. triangle-color-selector.js
  2. triangle.png
  3. pointer.png
  4. tpointer.png

Arthur @ Knettergek Media さんが IE コンパチなバージョンを作ってメールしてくれたので転載。

  1. triangle-color-selector.js
  2. triangle.png
  3. pointer.gif
  4. tpointer.gif
  5. triangleEmpty.gif

Usage

addEventListener(situation, callback_func)
イベントコールバック関数を設定する。
situation
起動するタイミング。現在は change のみ
callback_func
起動するときに呼び出す関数。rgb, hsv, hex プロパティを持つ引数を一つ渡す。 
tcs.addEventListener("change", function (e) {
    e.hex; //=> #ff0000
    e.rgb; //=> {r: 255, g : 0, b : 0}
    e.hsv; //=> {h: 0, s : 100, v : 100}
    /*
     * [e.rgb.r, e.rgb.g, e.rgb.b].join(", ");
     */
});
setColor(h, s, v)
指定した色にポイントする。h はラジアン。その他は 0 以上 1 以下の値。イベントコールバックの hsv とは単位が違うので注意。
toHex()
現在の色を十六進表記で返す。 ex. #ff0000