colorpicker.ts 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371
  1. /// <reference path="../../../dist/preview release/babylon.d.ts"/>
  2. var DOMImage = Image;
  3. module BABYLON.GUI {
  4. export class ColorPicker extends Control {
  5. private _colorWheelCanvas: HTMLCanvasElement;
  6. private _value: Color3 = Color3.Red();
  7. private _tmpColor = new Color3();
  8. private _pointerStartedOnSquare = false;
  9. private _pointerStartedOnWheel = false;
  10. private _squareLeft = 0;
  11. private _squareTop = 0;
  12. private _squareSize = 0;
  13. private _h = 360;
  14. private _s = 1;
  15. private _v = 1;
  16. public onValueChangedObservable = new Observable<Color3>();
  17. public get value(): Color3 {
  18. return this._value;
  19. }
  20. public set value(value: Color3) {
  21. if (this._value.equals(value)) {
  22. return;
  23. }
  24. this._value.copyFrom(value);
  25. this._RGBtoHSV(this._value, this._tmpColor);
  26. this._h = this._tmpColor.r;
  27. this._s = Math.max(this._tmpColor.g, 0.00001);
  28. this._v = Math.max(this._tmpColor.b, 0.00001);
  29. this._markAsDirty();
  30. this.onValueChangedObservable.notifyObservers(this._value);
  31. }
  32. constructor(public name?: string) {
  33. super(name);
  34. this.value = new BABYLON.Color3(.88, .1, .1);
  35. this.width = "200px";
  36. this.height = "200px";
  37. this.isPointerBlocker = true;
  38. }
  39. private _updateSquareProps():void {
  40. var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height)*.5;
  41. var wheelThickness = radius*.2;
  42. var innerDiameter = (radius-wheelThickness)*2;
  43. var squareSize = innerDiameter/(Math.sqrt(2));
  44. var offset = radius - squareSize*.5;
  45. this._squareLeft = this._currentMeasure.left + offset;
  46. this._squareTop = this._currentMeasure.top + offset;
  47. this._squareSize = squareSize;
  48. }
  49. private _drawGradientSquare(hueValue:number, left:number, top:number, width:number, height:number, context: CanvasRenderingContext2D) {
  50. var lgh = context.createLinearGradient(left, top, width+left, top);
  51. lgh.addColorStop(0, '#fff');
  52. lgh.addColorStop(1, 'hsl(' + hueValue + ', 100%, 50%)');
  53. context.fillStyle = lgh;
  54. context.fillRect(left, top, width, height);
  55. var lgv = context.createLinearGradient(left, top, left, height+top);
  56. lgv.addColorStop(0, 'rgba(0,0,0,0)');
  57. lgv.addColorStop(1, '#000');
  58. context.fillStyle = lgv;
  59. context.fillRect(left, top, width, height);
  60. }
  61. private _drawCircle(centerX:number, centerY:number, radius:number, context: CanvasRenderingContext2D) {
  62. context.beginPath();
  63. context.arc(centerX, centerY, radius+1, 0, 2 * Math.PI, false);
  64. context.lineWidth = 3;
  65. context.strokeStyle = '#333333';
  66. context.stroke();
  67. context.beginPath();
  68. context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  69. context.lineWidth = 3;
  70. context.strokeStyle = '#ffffff';
  71. context.stroke();
  72. }
  73. private _createColorWheelCanvas(radius:number, thickness:number): HTMLCanvasElement {
  74. var canvas = document.createElement("canvas");
  75. canvas.width = radius * 2;
  76. canvas.height = radius * 2;
  77. var context = canvas.getContext("2d");
  78. var image = context.getImageData(0, 0, radius * 2, radius * 2);
  79. var data = image.data;
  80. var color = this._tmpColor;
  81. var maxDistSq = radius*radius;
  82. var innerRadius = radius - thickness;
  83. var minDistSq = innerRadius*innerRadius;
  84. for (var x = -radius; x < radius; x++) {
  85. for (var y = -radius; y < radius; y++) {
  86. var distSq = x*x + y*y;
  87. if (distSq > maxDistSq || distSq < minDistSq) {
  88. continue;
  89. }
  90. var dist = Math.sqrt(distSq);
  91. var ang = Math.atan2(y, x);
  92. this._HSVtoRGB(ang * 180/Math.PI + 180, dist/radius, 1, color);
  93. var index = ((x + radius) + ((y + radius)*2*radius)) * 4;
  94. data[index] = color.r*255;
  95. data[index + 1] = color.g*255;
  96. data[index + 2] = color.b*255;
  97. var alphaRatio = (dist - innerRadius) / (radius - innerRadius);
  98. //apply less alpha to bigger color pickers
  99. var alphaAmount = .2;
  100. var maxAlpha = .2;
  101. var minAlpha = .04;
  102. var lowerRadius = 50;
  103. var upperRadius = 150;
  104. if(radius < lowerRadius){
  105. alphaAmount = maxAlpha;
  106. }else if(radius > upperRadius){
  107. alphaAmount = minAlpha;
  108. }else{
  109. alphaAmount = (minAlpha - maxAlpha)*(radius - lowerRadius)/(upperRadius - lowerRadius) + maxAlpha;
  110. }
  111. var alphaRatio = (dist - innerRadius) / (radius - innerRadius);
  112. if (alphaRatio < alphaAmount) {
  113. data[index + 3] = 255 * (alphaRatio / alphaAmount);
  114. } else if (alphaRatio > 1 - alphaAmount) {
  115. data[index + 3] = 255 * (1.0 - ((alphaRatio - (1 - alphaAmount)) / alphaAmount));
  116. } else {
  117. data[index + 3] = 255;
  118. }
  119. }
  120. }
  121. context.putImageData(image, 0, 0);
  122. return canvas;
  123. }
  124. private _RGBtoHSV(color:Color3, result:Color3){
  125. var r = color.r;
  126. var g = color.g;
  127. var b = color.b;
  128. var max = Math.max(r, g, b);
  129. var min = Math.min(r, g, b);
  130. var h = 0;
  131. var s = 0;
  132. var v = max;
  133. var dm = max - min;
  134. if(max !== 0){
  135. s = dm / max;
  136. }
  137. if(max != min) {
  138. if(max == r){
  139. h = (g - b) / dm;
  140. if(g < b){
  141. h += 6;
  142. }
  143. }else if(max == g){
  144. h = (b - r) / dm + 2;
  145. }else if(max == b){
  146. h = (r - g) / dm + 4;
  147. }
  148. h *= 60;
  149. }
  150. result.r = h;
  151. result.g = s;
  152. result.b = v;
  153. }
  154. private _HSVtoRGB(hue:number, saturation:number, value:number, result:Color3) {
  155. var chroma = value * saturation;
  156. var h = hue / 60;
  157. var x = chroma * (1- Math.abs((h % 2) - 1));
  158. var r = 0;
  159. var g = 0;
  160. var b = 0;
  161. if (h >= 0 && h <= 1) {
  162. r = chroma;
  163. g = x;
  164. } else if (h >= 1 && h <= 2) {
  165. r = x;
  166. g = chroma;
  167. } else if (h >= 2 && h <= 3) {
  168. g = chroma;
  169. b = x;
  170. } else if (h >= 3 && h <= 4) {
  171. g = x;
  172. b = chroma;
  173. } else if (h >= 4 && h <= 5) {
  174. r = x;
  175. b = chroma;
  176. } else if (h >= 5 && h <= 6) {
  177. r = chroma;
  178. b = x;
  179. }
  180. var m = value - chroma;
  181. result.set((r+m), (g+m), (b+m));
  182. }
  183. public _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
  184. context.save();
  185. this._applyStates(context);
  186. if (this._processMeasures(parentMeasure, context)) {
  187. var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height)*.5;
  188. var wheelThickness = radius*.2;
  189. var left = this._currentMeasure.left;
  190. var top = this._currentMeasure.top;
  191. if(!this._colorWheelCanvas || this._colorWheelCanvas.width != radius*2){
  192. this._colorWheelCanvas = this._createColorWheelCanvas(radius, wheelThickness);
  193. }
  194. context.drawImage(this._colorWheelCanvas, left, top);
  195. this._updateSquareProps();
  196. this._drawGradientSquare(this._h,
  197. this._squareLeft,
  198. this._squareTop,
  199. this._squareSize,
  200. this._squareSize,
  201. context);
  202. var cx = this._squareLeft + this._squareSize*this._s;
  203. var cy = this._squareTop + this._squareSize*(1 - this._v);
  204. this._drawCircle(cx, cy, radius*.04, context);
  205. var dist = radius - wheelThickness*.5;
  206. cx = left + radius + Math.cos((this._h-180)*Math.PI/180)*dist;
  207. cy = top + radius + Math.sin((this._h-180)*Math.PI/180)*dist;
  208. this._drawCircle(cx, cy, wheelThickness*.35, context);
  209. }
  210. context.restore();
  211. }
  212. // Events
  213. private _pointerIsDown = false;
  214. private _updateValueFromPointer(x: number, y:number): void {
  215. if(this._pointerStartedOnWheel)
  216. {
  217. var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height)*.5;
  218. var centerX = radius + this._currentMeasure.left;
  219. var centerY = radius + this._currentMeasure.top;
  220. this._h = Math.atan2(y - centerY, x - centerX)*180/Math.PI + 180;
  221. }
  222. else if(this._pointerStartedOnSquare)
  223. {
  224. this._updateSquareProps();
  225. this._s = (x - this._squareLeft) / this._squareSize;
  226. this._v = 1 - (y - this._squareTop) / this._squareSize;
  227. this._s = Math.min(this._s, 1);
  228. this._s = Math.max(this._s, 0.00001);
  229. this._v = Math.min(this._v, 1);
  230. this._v = Math.max(this._v, 0.00001);
  231. }
  232. this._HSVtoRGB(this._h, this._s, this._v, this._tmpColor);
  233. this.value = this._tmpColor;
  234. }
  235. private _isPointOnSquare(coordinates: Vector2):boolean {
  236. this._updateSquareProps();
  237. var left = this._squareLeft;
  238. var top = this._squareTop;
  239. var size = this._squareSize;
  240. if(coordinates.x >= left && coordinates.x <= left + size &&
  241. coordinates.y >= top && coordinates.y <= top + size){
  242. return true;
  243. }
  244. return false;
  245. }
  246. private _isPointOnWheel(coordinates: Vector2):boolean {
  247. var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height)*.5;
  248. var centerX = radius + this._currentMeasure.left;
  249. var centerY = radius + this._currentMeasure.top;
  250. var wheelThickness = radius*.2;
  251. var innerRadius = radius-wheelThickness;
  252. var radiusSq = radius*radius;
  253. var innerRadiusSq = innerRadius*innerRadius;
  254. var dx = coordinates.x - centerX;
  255. var dy = coordinates.y - centerY;
  256. var distSq = dx*dx + dy*dy;
  257. if(distSq <= radiusSq && distSq >= innerRadiusSq){
  258. return true;
  259. }
  260. return false;
  261. }
  262. protected _onPointerDown(coordinates: Vector2): boolean {
  263. if (!super._onPointerDown(coordinates)) {
  264. return false;
  265. }
  266. this._pointerIsDown = true;
  267. this._pointerStartedOnSquare = false;
  268. this._pointerStartedOnWheel = false;
  269. if(this._isPointOnSquare(coordinates)){
  270. this._pointerStartedOnSquare = true;
  271. }else if(this._isPointOnWheel(coordinates)){
  272. this._pointerStartedOnWheel = true;
  273. }
  274. this._updateValueFromPointer(coordinates.x, coordinates.y);
  275. this._host._capturingControl = this;
  276. return true;
  277. }
  278. protected _onPointerMove(coordinates: Vector2): void {
  279. if (this._pointerIsDown) {
  280. this._updateValueFromPointer(coordinates.x, coordinates.y);
  281. }
  282. super._onPointerMove(coordinates);
  283. }
  284. protected _onPointerUp (coordinates: Vector2): void {
  285. this._pointerIsDown = false;
  286. this._host._capturingControl = null;
  287. super._onPointerUp(coordinates);
  288. }
  289. }
  290. }