git.roojs.org Git - raphael/blob - plugins/colorwheel.js

   1 (function (Raphael) {
   2     Raphael.colorwheel = function (x, y, size, initcolor, element) {
   3         return new ColorWheel(x, y, size, initcolor, element);
   4     };
   5     var pi = Math.PI;
   6     function angle(x, y) {
   7         return (x < 0) * 180 + Math.atan(-y / -x) * 180 / pi;
   8     }
   9     var doc = document, win = window;
  10     var addEvent = (function () {
  11         if (doc.addEventListener) {
  12             return function (obj, type, fn, element) {
  13                 var f = function (e) {
  14                     return fn.call(element, e);
  15                 };
  16                 obj.addEventListener(type, f, false);
  17                 return function () {
  18                     obj.removeEventListener(type, f, false);
  19                     return true;
  20                 };
  21             };
  22         } else if (doc.attachEvent) {
  23             return function (obj, type, fn, element) {
  24                 var f = function (e) {
  25                     return fn.call(element, e || win.event);
  26                 };
  27                 obj.attachEvent("on" + type, f);
  28                 var detacher = function () {
  29                     obj.detachEvent("on" + type, f);
  30                     return true;
  31                 };
  32                 return detacher;
  33             };
  34         }
  35     })();
  36     var ColorWheel = function (x, y, size, initcolor, element) {
  37         size = size || 200;
  38         var w3 = 3 * size / 200,
  39             w1 = size / 200,
  40             fi = 1.6180339887,
  41             segments = pi * size / 5,
  42             size20 = size / 20,
  43             size2 = size / 2,
  44             padding = 2 * size / 200,
  45             t = this;
  46
  47         var H = 1, S = 1, B = 1, s = size - (size20 * 4);
  48         var r = element ? Raphael(element, size, size) : Raphael(x, y, size, size),
  49             xy = s / 6 + size20 * 2 + padding,
  50             wh = s * 2 / 3 - padding * 2;
  51         w1 < 1 && (w1 = 1);
  52         w3 < 1 && (w3 = 1);
  53
  54
  55         // ring drawing
  56         var a = pi / 2 - pi * 2 / segments * 1.3,
  57             R = size2 - padding,
  58             R2 = size2 - padding - size20 * 2,
  59             path = ["M", size2, padding, "A", R, R, 0, 0, 1, R * Math.cos(a) + R + padding, R - R * Math.sin(a) + padding, "L", R2 * Math.cos(a) + R + padding, R - R2 * Math.sin(a) + padding, "A", R2, R2, 0, 0, 0, size2, padding + size20 * 2, "z"].join();
  60         for (var i = 0; i < segments; i++) {
  61             r.path(path).attr({
  62                 stroke: "none",
  63                 fill: "hsb(" + i * (255 / segments) + ", 255, 200)",
  64                 rotation: [(360 / segments) * i, size2, size2]
  65             });
  66         }
  67         r.path(["M", size2, padding, "A", R, R, 0, 1, 1, size2 - 1, padding, "l1,0", "M", size2, padding + size20 * 2, "A", R2, R2, 0, 1, 1, size2 - 1, padding + size20 * 2, "l1,0"]).attr({
  68             "stroke-width": w3,
  69             stroke: "#fff"
  70         });
  71         t.cursorhsb = r.set();
  72         var h = size20 * 2 + 2;
  73         t.cursorhsb.push(r.rect(size2 - h / fi / 2, padding - 1, h / fi, h, 3 * size / 200).attr({
  74             stroke: "#000",
  75             opacity: .5,
  76             "stroke-width": w3
  77         }));
  78         t.cursorhsb.push(t.cursorhsb[0].clone().attr({
  79             stroke: "#fff",
  80             opacity: 1,
  81             "stroke-width": w1
  82         }));
  83         t.ring = r.path(["M", size2, padding, "A", R, R, 0, 1, 1, size2 - 1, padding, "l1,0M", size2, padding + size20 * 2, "A", R2, R2, 0, 1, 1, size2 - 1, padding + size20 * 2, "l1,0"]).attr({
  84             fill: "#000",
  85             opacity: 0,
  86             stroke: "none"
  87         });
  88
  89         // rect drawing
  90         t.main = r.rect(xy, xy, wh, wh).attr({
  91             stroke: "none",
  92             fill: "#f00",
  93             opacity: 1
  94         });
  95         t.main.clone().attr({
  96             stroke: "none",
  97             fill: "0-#fff-#fff",
  98             opacity: 0
  99         });
 100         t.square = r.rect(xy - 1, xy - 1, wh + 2, wh + 2).attr({
 101             r: 2,
 102             stroke: "#fff",
 103             "stroke-width": w3,
 104             fill: "90-#000-#000",
 105             opacity: 0,
 106             cursor: "crosshair"
 107         });
 108         t.cursor = r.set();
 109         t.cursor.push(r.circle(size2, size2, size20 / 2).attr({
 110             stroke: "#000",
 111             opacity: .5,
 112             "stroke-width": w3
 113         }));
 114         t.cursor.push(t.cursor[0].clone().attr({
 115             stroke: "#fff",
 116             opacity: 1,
 117             "stroke-width": w1
 118         }));
 119         t.H = t.S = t.B = 1;
 120         t.raphael = r;
 121         t.size2 = size2;
 122         t.wh = wh;
 123         t.x = x;
 124         t.xy = xy;
 125         t.y = y;
 126
 127         // events
 128         t.hsbon = addEvent(t.ring.node, "mousedown", function (e) {
 129             this.hsbOnTheMove = true;
 130             this.setH(e.clientX - this.x - this.size2, e.clientY - this.y - this.size2);
 131             this.docmove = addEvent(doc, "mousemove", this.docOnMove, this);
 132             this.docup = addEvent(doc, "mouseup", this.docOnUp, this);
 133         }, t);
 134         t.clron = addEvent(t.square.node, "mousedown", function (e) {
 135             this.clrOnTheMove = true;
 136             this.setSB(e.clientX - this.x, e.clientY - this.y);
 137             this.docmove = addEvent(doc, "mousemove", this.docOnMove, this);
 138             this.docup = addEvent(doc, "mouseup", this.docOnUp, this);
 139         }, t);
 140         t.winunload = addEvent(win, "unload", function () {
 141             this.hsbon();
 142             this.clron();
 143             this.docmove && this.docmove();
 144             this.docup && this.docup();
 145             this.winunload();
 146         }, t);
 147
 148         t.color(initcolor || "#f00");
 149         this.onchanged && this.onchanged(this.color());
 150     };
 151     ColorWheel.prototype.setH = function (x, y) {
 152         var d = angle(x, y),
 153             rd = d * pi / 180;
 154         this.cursorhsb.rotate(d + 90, this.size2, this.size2);
 155         this.H = (d + 90) / 360;
 156         this.main.attr({fill: "hsb(" + this.H + ",1,1)"});
 157         this.onchange && this.onchange(this.color());
 158     };
 159     ColorWheel.prototype.setSB = function (x, y) {
 160         x < this.size2 - this.wh / 2 && (x = this.size2 - this.wh / 2);
 161         x > this.size2 + this.wh / 2 && (x = this.size2 + this.wh / 2);
 162         y < this.size2 - this.wh / 2 && (y = this.size2 - this.wh / 2);
 163         y > this.size2 + this.wh / 2 && (y = this.size2 + this.wh / 2);
 164         this.cursor.attr({cx: x, cy: y});
 165         this.B = 1 - (y - this.xy) / this.wh;
 166         this.S = (x - this.xy) / this.wh;
 167         this.onchange && this.onchange(this.color());
 168     };
 169     ColorWheel.prototype.docOnMove = function (e) {
 170         if (this.hsbOnTheMove) {
 171             this.setH(e.clientX - this.x - this.size2, e.clientY - this.y - this.size2);
 172         }
 173         if (this.clrOnTheMove) {
 174             this.setSB(e.clientX - this.x, e.clientY - this.y);
 175         }
 176         e.preventDefault && e.preventDefault();
 177         e.returnValue = false;
 178         return false;
 179     };
 180     ColorWheel.prototype.docOnUp = function (e) {
 181         this.hsbOnTheMove = this.clrOnTheMove = false;
 182         this.docmove();
 183         delete this.docmove;
 184         this.docup();
 185         delete this.docup;
 186         this.onchanged && this.onchanged(this.color());
 187     };
 188     ColorWheel.prototype.remove = function () {
 189         this.raphael.remove();
 190         this.color = function () {
 191             return false;
 192         };
 193     };
 194     ColorWheel.prototype.color = function (color) {
 195         if (color) {
 196             color = Raphael.getRGB(color);
 197             color = Raphael.rgb2hsb(color.r, color.g, color.b);
 198             var d = color.h * 360;
 199             this.H = color.h;
 200             this.S = color.s;
 201             this.B = color.b;
 202             this.cursorhsb.rotate(d, this.size2, this.size2);
 203             this.main.attr({fill: "hsb(" + this.H + ",1,1)"});
 204             var x = this.S * this.wh + this.xy,
 205                 y = (1 - this.B) * this.wh + this.xy;
 206             this.cursor.attr({cx: x, cy: y});
 207             return this;
 208         } else {
 209             return Raphael.hsb2rgb(this.H, this.S, this.B).hex;
 210         }
 211     };
 212 })(window.Raphael);