aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJose Antonio Marquez2012-06-13 15:01:37 -0700
committerJose Antonio Marquez2012-06-13 15:01:37 -0700
commit63d91561a9fbb3d48f8e6d0155cd6d6d2051fa58 (patch)
tree2a8de50ed9ca907a400c2d74841b675f2e397e69
parentefbe5f83157a8dcbcc209c88877d9cd0113d4d20 (diff)
downloadninja-63d91561a9fbb3d48f8e6d0155cd6d6d2051fa58.tar.gz
Fix: IKNINJA-1187
Clean up and fixing masking of color wheel.
-rwxr-xr-xjs/components/colorwheel.reel/colorwheel.js64
1 files changed, 35 insertions, 29 deletions
diff --git a/js/components/colorwheel.reel/colorwheel.js b/js/components/colorwheel.reel/colorwheel.js
index 982bbfdc..0980253c 100755
--- a/js/components/colorwheel.reel/colorwheel.js
+++ b/js/components/colorwheel.reel/colorwheel.js
@@ -111,37 +111,34 @@ exports.ColorWheel = Montage.create(Component, {
111 draw: { 111 draw: {
112 value: function() { 112 value: function() {
113 // 113 //
114 var slice, i, whlctx = this.wheel.getContext("2d"), math = this._math, 114 var slice, i, whlctx = this.wheel.getContext("2d");
115 whlcvs = this.wheel, swhcvs = this.swatch,
116 wslcvs = this.wheelSelect, swscvs = this.swatchSelect;
117 //Determing radius by smallest factor of width or height 115 //Determing radius by smallest factor of width or height
118 if (this.element.offsetWidth > this.element.offsetHeight) { 116 if (this.element.offsetWidth > this.element.offsetHeight) {
119 math.diameter = this.element.offsetWidth; 117 this._math.diameter = this.element.offsetWidth;
120 } else { 118 } else {
121 math.diameter = this.element.offsetHeight; 119 this._math.diameter = this.element.offsetHeight;
122 } 120 }
123 //Setting the radius from diameter 121 //Setting the radius from diameter
124 math.radius = math.diameter/2; 122 this._math.radius = this._math.diameter/2;
125 //Inner radius of wheel 123 //Inner radius of wheel
126 math.innerRadius = math.radius - this.rimWidth; 124 this._math.innerRadius = this._math.radius - this.rimWidth;
127 //Setting the widths and heights to match the container's 125 //Setting the widths and heights to match the container's
128 whlcvs.width = whlcvs.height = wslcvs.width = wslcvs.height = swscvs.width = swscvs.height = math.diameter; 126 this.wheel.width = this.wheel.height = this.wheelSelect.width = this.wheelSelect.height = this.swatchSelect.width = this.swatchSelect.height = this._math.diameter;
129 // 127 //
130 math.swatchLength = Math.floor((math.radius - this.rimWidth - this.strokeWidth*4) * Math.sin(45 * math.RADIANS) * 2); 128 this._math.swatchLength = Math.floor((this._math.radius - this.rimWidth - this.strokeWidth*4) * Math.sin(45 * this._math.RADIANS) * 2);
131 math.swatchPosition = Math.round(math.radius - (math.swatchLength/2))+this.strokeWidth* Math.sin(45 * math.RADIANS); 129 this._math.swatchPosition = Math.round(this._math.radius - (this._math.swatchLength/2))+this.strokeWidth* Math.sin(45 * this._math.RADIANS);
132 // 130 //
133 //swhcvs.width = swhcvs.height = math.swatchLength; //TODO: Figure out why this breaks on WINDOWS ONLY 131 this.swatch.style.top = this.swatch.style.left = this._math.swatchPosition+'px';
134 swhcvs.style.top = swhcvs.style.left = math.swatchPosition+'px';
135 //Clearing wheel for redraw 132 //Clearing wheel for redraw
136 whlctx.clearRect(0, 0, math.diameter, math.diameter); 133 whlctx.clearRect(0, 0, this._math.diameter, this._math.diameter);
137 //////////////////////////////////////////////////////////////// 134 ////////////////////////////////////////////////////////////////
138 //Drawing color wheel circle 135 //Drawing color wheel circle
139 whlctx.save(); 136 whlctx.save();
140 whlctx.beginPath(); 137 whlctx.beginPath();
141 whlctx.moveTo(0,0); 138 whlctx.moveTo(0,0);
142 whlctx.lineTo(math.diameter,0); 139 whlctx.lineTo(this._math.diameter,0);
143 whlctx.lineTo(math.diameter,math.diameter); 140 whlctx.lineTo(this._math.diameter,this._math.diameter);
144 whlctx.lineTo(0,math.diameter); 141 whlctx.lineTo(0,this._math.diameter);
145 whlctx.closePath(); 142 whlctx.closePath();
146 whlctx.clip(); 143 whlctx.clip();
147 whlctx.strokeStyle = 'rgba(0,0,0,0)'; 144 whlctx.strokeStyle = 'rgba(0,0,0,0)';
@@ -151,7 +148,7 @@ exports.ColorWheel = Montage.create(Component, {
151 whlctx.save(); 148 whlctx.save();
152 //////////////////////////////////////////////////////////////// 149 ////////////////////////////////////////////////////////////////
153 //Looping through set intervals 150 //Looping through set intervals
154 math.radius = math.radius - this.strokeWidth/2; 151 this._math.radius = this._math.radius - this.strokeWidth/2;
155 for (i=0; i<60; i++) { 152 for (i=0; i<60; i++) {
156 //Calculating slice number 153 //Calculating slice number
157 slice = Math.round(255*i/60); 154 slice = Math.round(255*i/60);
@@ -164,13 +161,19 @@ exports.ColorWheel = Montage.create(Component, {
164 this._drawWheelSlice (i+300, 255, 0, 255-slice); 161 this._drawWheelSlice (i+300, 255, 0, 255-slice);
165 } 162 }
166 // 163 //
167 math.radius = math.radius + this.strokeWidth/2; 164 this._math.radius = this._math.radius + this.strokeWidth/2;
165 //TODO: Add parameter to allow for color specification of this inner 'empty' circle in wheel
166 whlctx.beginPath();
167 whlctx.arc(this._math.innerRadius+this.rimWidth, this._math.innerRadius+this.rimWidth, this._math.innerRadius-this.strokeWidth/2, 0, this._math.TAU, true);
168 whlctx.fillStyle = '#494949';
169 whlctx.fill();
170 whlctx.restore();
168 // 171 //
169 whlctx.strokeStyle = this.strokeColor; 172 whlctx.strokeStyle = this.strokeColor;
170 whlctx.lineWidth = this.strokeWidth; 173 whlctx.lineWidth = this.strokeWidth;
171 whlctx.globalAlpha = 1; 174 whlctx.globalAlpha = 1;
172 whlctx.beginPath(); 175 whlctx.beginPath();
173 whlctx.arc(math.radius, math.radius, math.radius-this.strokeWidth/2, 0, math.TAU, true); 176 whlctx.arc(this._math.radius, this._math.radius, this._math.radius-this.strokeWidth/2, 0, this._math.TAU, true);
174 whlctx.closePath(); 177 whlctx.closePath();
175 whlctx.stroke(); 178 whlctx.stroke();
176 whlctx.restore(); 179 whlctx.restore();
@@ -179,23 +182,23 @@ exports.ColorWheel = Montage.create(Component, {
179 whlctx.lineWidth = this.strokeWidth; 182 whlctx.lineWidth = this.strokeWidth;
180 whlctx.globalAlpha = 1; 183 whlctx.globalAlpha = 1;
181 whlctx.beginPath(); 184 whlctx.beginPath();
182 whlctx.arc(math.innerRadius+this.rimWidth, math.innerRadius+this.rimWidth, math.innerRadius-this.strokeWidth/2, 0, math.TAU, true); 185 whlctx.arc(this._math.innerRadius+this.rimWidth, this._math.innerRadius+this.rimWidth, this._math.innerRadius-this.strokeWidth/2, 0, this._math.TAU, true);
183 whlctx.closePath(); 186 whlctx.closePath();
184 whlctx.stroke(); 187 whlctx.stroke();
185 whlctx.restore(); 188 whlctx.restore();
186 // 189 //
187 whlctx.beginPath(); 190 whlctx.beginPath();
188 whlctx.moveTo(math.swatchPosition-this.strokeWidth/2, math.swatchPosition-this.strokeWidth/2); 191 whlctx.moveTo(this._math.swatchPosition-this.strokeWidth/2, this._math.swatchPosition-this.strokeWidth/2);
189 whlctx.lineTo(math.swatchLength+math.swatchPosition-this.strokeWidth/2, math.swatchPosition-this.strokeWidth/2); 192 whlctx.lineTo(this._math.swatchLength+this._math.swatchPosition-this.strokeWidth/2, this._math.swatchPosition-this.strokeWidth/2);
190 whlctx.lineTo(math.swatchLength+math.swatchPosition-this.strokeWidth/2, math.swatchLength+math.swatchPosition-this.strokeWidth/2); 193 whlctx.lineTo(this._math.swatchLength+this._math.swatchPosition-this.strokeWidth/2, this._math.swatchLength+this._math.swatchPosition-this.strokeWidth/2);
191 whlctx.lineTo(math.swatchPosition-this.strokeWidth/2, math.swatchLength+math.swatchPosition-this.strokeWidth/2); 194 whlctx.lineTo(this._math.swatchPosition-this.strokeWidth/2, this._math.swatchLength+this._math.swatchPosition-this.strokeWidth/2);
192 whlctx.closePath(); 195 whlctx.closePath();
193 whlctx.strokeStyle = "rgba(0, 0, 0, .25)"; 196 whlctx.strokeStyle = "rgba(0, 0, 0, .25)";
194 whlctx.shadowColor = "rgba(0, 0, 0, 1)"; 197 whlctx.shadowColor = "rgba(0, 0, 0, 1)";
195 whlctx.shadowBlur = 2; 198 whlctx.shadowBlur = 2;
196 whlctx.stroke(); 199 whlctx.stroke();
197 // 200 //
198 this._wheelData = whlctx.getImageData(0, 0, math.diameter, math.diameter); 201 this._wheelData = whlctx.getImageData(0, 0, this._math.diameter, this._math.diameter);
199 //TODO: Fix redraw bug 202 //TODO: Fix redraw bug
200 if(!this.value) { 203 if(!this.value) {
201 this.wheelSelectorAngle(0); 204 this.wheelSelectorAngle(0);
@@ -206,8 +209,8 @@ exports.ColorWheel = Montage.create(Component, {
206 this.drawSwatchColor(0); 209 this.drawSwatchColor(0);
207 this.drawSwatchSelector(100, 100); 210 this.drawSwatchSelector(100, 100);
208 // 211 //
209 this.wheelSelectorAngle(this.value.h/math.TAU*360); 212 this.wheelSelectorAngle(this.value.h/this._math.TAU*360);
210 this.drawSwatchColor(this.value.h/math.TAU*360); 213 this.drawSwatchColor(this.value.h/this._math.TAU*360);
211 this.drawSwatchSelector(this.value.s*100, this.value.v*100); 214 this.drawSwatchSelector(this.value.s*100, this.value.v*100);
212 } 215 }
213 } 216 }
@@ -422,11 +425,14 @@ exports.ColorWheel = Montage.create(Component, {
422 _drawWheelSlice: { 425 _drawWheelSlice: {
423 value: function (s, r, g, b) { 426 value: function (s, r, g, b) {
424 // 427 //
425 var context = this.wheel.getContext("2d"), radius = this._math.radius; 428 var context = this.wheel.getContext("2d"),
429 radius = this._math.radius,
430 trnslt = radius + this.strokeWidth/2;
431 //
426 context.beginPath(); 432 context.beginPath();
427 context.fillStyle = 'rgb('+r+','+g+','+b+')'; 433 context.fillStyle = 'rgb('+r+','+g+','+b+')';
428 context.scale(1,1); 434 context.scale(1,1);
429 context.translate(radius + this.strokeWidth/2, radius + this.strokeWidth/2); 435 context.translate(trnslt, trnslt);
430 context.rotate(s*this._math.RADIANS); 436 context.rotate(s*this._math.RADIANS);
431 context.translate(-radius, -radius); 437 context.translate(-radius, -radius);
432 context.moveTo(radius, radius); 438 context.moveTo(radius, radius);