カラーピッカー
カラービッカーを作ってみた。とりあえず試作。
デモ
var ColorPicker = {}; ColorPicker.HSVtoRGB = function(h, s, v) { var r, g, b; if (s == 0) { var i = Math.round(v * 255); return [i, i, i]; } var hi = Math.floor(h / 60); var f = h / 60 - hi; var p = v * (1 - s); var q = v * (1 - s * f); var t = v * (1 - s * (1 - f)); switch (hi) { case 0: r = v; g = t; b = p; break; case 1: r = q; g = v; b = p; break; case 2: r = p; g = v; b = t; break; case 3: r = p; g = q; b = v; break; case 4: r = t; g = p; b = v; break; case 5: r = v; g = p; b = q; break; } r *= 255; g *= 255; b *= 255; return [Math.round(r), Math.round(g), Math.round(b)]; }; ColorPicker.addEvent = function(obj, type, func) { (obj.addEventListener) ? obj.addEventListener(type, func, false) : obj.attachEvent("on" + type, func); }; ColorPicker.toColorCode = function(c) { var r = (c[0] < 16) ? "0" + c[0].toString(16) : c[0].toString(16); var g = (c[1] < 16) ? "0" + c[1].toString(16) : c[1].toString(16); var b = (c[2] < 16) ? "0" + c[2].toString(16) : c[2].toString(16); return "#" + r + g + b; }; ColorPicker.addData = function(tr, h, s, v, list) { var color = ColorPicker.toColorCode(ColorPicker.HSVtoRGB(h, s, v)); var td = document.createElement("td"); var clickList = function() { ColorPicker.picker(h); }; var clickPicker = function() { alert(color); }; ColorPicker.addEvent(td, "click", list ? clickList : clickPicker); td.style.background = color; td.style.width = "10px"; td.style.height = "10px"; tr.appendChild(td); }; ColorPicker.list = function() { var tb = document.createElement("table"); tb.style.background = "#000000"; tb.style.borderSpacing = "1px"; var tbody = document.createElement("tbody"); for (var s = 1.0; s >= 0.5; s -= 0.1) { var tr = document.createElement("tr"); for (var h = 0; h < 360; h += 10) { ColorPicker.addData(tr, h, s, 1, true); } tbody.appendChild(tr); } tb.appendChild(tbody); return tb; }; ColorPicker.picker = function(h) { var tb = document.createElement("table"); tb.style.background = "#000000"; tb.style.borderSpacing = "1px"; var tbody = document.createElement("tbody"); for (var v = 1.0; v >= 0; v -= 0.05) { var tr = document.createElement("tr"); for (var s = 0; s <= 1; s += 0.05) { ColorPicker.addData(tr, h, s, v, false); } tbody.appendChild(tr); } tb.appendChild(tbody); if (ColorPicker.pickerId.firstChild) ColorPicker.pickerId.removeChild(ColorPicker.pickerId.firstChild); ColorPicker.pickerId.appendChild(tb); }; ColorPicker.init = function() { var list = ColorPicker.list(); document.body.appendChild(list); ColorPicker.pickerId = document.createElement("div"); document.body.appendChild(ColorPicker.pickerId); };