1 /** 2 * 3 * Copyright (c) 2008-2010 Ricardo Quesada 4 * Copyright (c) 2011-2012 cocos2d-x.org 5 * Copyright (c) 2013-2014 Chukong Technologies Inc. 6 * 7 * Copyright 2012 Stewart Hamilton-Arrandale. 8 * http://creativewax.co.uk 9 * 10 * Modified by Yannick Loriot. 11 * http://yannickloriot.com 12 * 13 * Permission is hereby granted, free of charge, to any person obtaining a copy 14 * of this software and associated documentation files (the "Software"), to deal 15 * in the Software without restriction, including without limitation the rights 16 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 17 * copies of the Software, and to permit persons to whom the Software is 18 * furnished to do so, subject to the following conditions: 19 * 20 * The above copyright notice and this permission notice shall be included in 21 * all copies or substantial portions of the Software. 22 * 23 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 24 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 25 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 26 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 27 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 28 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 29 * THE SOFTWARE. 30 * 31 * 32 * converted to Javascript / cocos2d-x by Angus C 33 */ 34 35 /** 36 * ControlHuePicker: HUE picker ui component. 37 * @class 38 * @extends cc.Control 39 * 40 * @property {Number} hue - The hue value 41 * @property {Number} huePercent - The hue value in percentage 42 * @property {cc.Sprite} background - <@readonly> The background sprite 43 * @property {cc.Sprite} slider - <@readonly> The slider sprite 44 * @property {cc.Point} startPos - <@readonly> The start position of the picker 45 */ 46 cc.ControlHuePicker = cc.Control.extend(/** @lends cc.ControlHuePicker# */{ 47 _hue:0, 48 _huePercentage:0, 49 _background:null, 50 _slider:null, 51 _startPos:null, 52 _className:"ControlHuePicker", 53 54 /** 55 * The constructor of cc.ControlHuePicker 56 * @param {cc.Node} target 57 * @param {cc.Point} pos position 58 */ 59 ctor:function(target, pos) { 60 cc.Control.prototype.ctor.call(this); 61 pos && this.initWithTargetAndPos(target, pos); 62 }, 63 64 //maunally put in the setters 65 getHue:function () { 66 return this._hue; 67 }, 68 setHue:function (hueValue) { 69 this._hue = hueValue; 70 this.setHuePercentage(this._hue / 360.0); 71 }, 72 73 getHuePercentage:function () { 74 return this._huePercentage; 75 }, 76 setHuePercentage:function (hueValueInPercent) { 77 this._huePercentage = hueValueInPercent; 78 this._hue = this._huePercentage * 360.0; 79 80 // Clamp the position of the icon within the circle 81 var backgroundBox = this._background.getBoundingBox(); 82 83 // Get the center point of the background image 84 var centerX = this._startPos.x + backgroundBox.width * 0.5; 85 var centerY = this._startPos.y + backgroundBox.height * 0.5; 86 87 // Work out the limit to the distance of the picker when moving around the hue bar 88 var limit = backgroundBox.width * 0.5 - 15.0; 89 90 // Update angle 91 var angleDeg = this._huePercentage * 360.0 - 180.0; 92 var angle = cc.degreesToRadians(angleDeg); 93 94 // Set new position of the slider 95 var x = centerX + limit * Math.cos(angle); 96 var y = centerY + limit * Math.sin(angle); 97 this._slider.setPosition(x, y); 98 }, 99 100 setEnabled:function (enabled) { 101 cc.Control.prototype.setEnabled.call(this, enabled); 102 if (this._slider) { 103 this._slider.setOpacity(enabled ? 255 : 128); 104 } 105 }, 106 107 getBackground:function () { 108 return this._background; 109 }, 110 getSlider:function () { 111 return this._slider; 112 }, 113 getStartPos:function () { 114 return this._startPos; 115 }, 116 117 initWithTargetAndPos:function (target, pos) { 118 if (cc.Control.prototype.init.call(this)) { 119 // Add background and slider sprites 120 this._background = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("huePickerBackground.png", target, pos, cc.p(0.0, 0.0)); 121 this._slider = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("colourPicker.png", target, pos, cc.p(0.5, 0.5)); 122 123 this._slider.setPosition(pos.x, pos.y + this._background.getBoundingBox().height * 0.5); 124 this._startPos = pos; 125 126 // Sets the default value 127 this._hue = 0.0; 128 this._huePercentage = 0.0; 129 return true; 130 } else 131 return false; 132 }, 133 134 _updateSliderPosition:function (location) { 135 // Clamp the position of the icon within the circle 136 var backgroundBox = this._background.getBoundingBox(); 137 138 // Get the center point of the background image 139 var centerX = this._startPos.x + backgroundBox.width * 0.5; 140 var centerY = this._startPos.y + backgroundBox.height * 0.5; 141 142 // Work out the distance difference between the location and center 143 var dx = location.x - centerX; 144 var dy = location.y - centerY; 145 146 // Update angle by using the direction of the location 147 var angle = Math.atan2(dy, dx); 148 var angleDeg = cc.radiansToDegrees(angle) + 180.0; 149 150 // use the position / slider width to determin the percentage the dragger is at 151 this.setHue(angleDeg); 152 153 // send CCControl callback 154 this.sendActionsForControlEvents(cc.CONTROL_EVENT_VALUECHANGED); 155 }, 156 _checkSliderPosition:function (location) { 157 // compute the distance between the current location and the center 158 var distance = Math.sqrt(Math.pow(location.x + 10, 2) + Math.pow(location.y, 2)); 159 160 // check that the touch location is within the circle 161 if (80 > distance && distance > 59) { 162 this._updateSliderPosition(location); 163 return true; 164 } 165 return false; 166 }, 167 168 onTouchBegan:function (touch, event) { 169 if (!this.isEnabled() || !this.isVisible()) { 170 return false; 171 } 172 var touchLocation = this.getTouchLocation(touch); 173 174 // Check the touch position on the slider 175 return this._checkSliderPosition(touchLocation); 176 }, 177 onTouchMoved:function (touch, event) { 178 // Get the touch location 179 var touchLocation = this.getTouchLocation(touch); 180 181 //small modification: this allows changing of the colour, even if the touch leaves the bounding area 182 //this._updateSliderPosition(touchLocation); 183 //this.sendActionsForControlEvents(cc.CONTROL_EVENT_VALUECHANGED); 184 // Check the touch position on the slider 185 this._checkSliderPosition(touchLocation); 186 } 187 }); 188 189 var _p = cc.ControlHuePicker.prototype; 190 191 // Extended properties 192 /** @expose */ 193 _p.hue; 194 cc.defineGetterSetter(_p, "hue", _p.getHue, _p.setHue); 195 /** @expose */ 196 _p.huePercent; 197 cc.defineGetterSetter(_p, "huePercent", _p.getHuePercentage, _p.setHuePercentage); 198 /** @expose */ 199 _p.background; 200 cc.defineGetterSetter(_p, "background", _p.getBackground); 201 /** @expose */ 202 _p.slider; 203 cc.defineGetterSetter(_p, "slider", _p.getSlider); 204 /** @expose */ 205 _p.startPos; 206 cc.defineGetterSetter(_p, "startPos", _p.getStartPos); 207 208 _p = null; 209 210 /** 211 * @deprecated 212 * @param target 213 * @param pos 214 * @returns {ControlHuePicker} 215 */ 216 cc.ControlHuePicker.create = function (target, pos) { 217 return new cc.ControlHuePicker(target, pos); 218 };