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 //maunally put in the setters 55 getHue:function () { 56 return this._hue; 57 }, 58 setHue:function (hueValue) { 59 this._hue = hueValue; 60 this.setHuePercentage(this._hue / 360.0); 61 }, 62 63 getHuePercentage:function () { 64 return this._huePercentage; 65 }, 66 setHuePercentage:function (hueValueInPercent) { 67 this._huePercentage = hueValueInPercent; 68 this._hue = this._huePercentage * 360.0; 69 70 // Clamp the position of the icon within the circle 71 var backgroundBox = this._background.getBoundingBox(); 72 73 // Get the center point of the background image 74 var centerX = this._startPos.x + backgroundBox.width * 0.5; 75 var centerY = this._startPos.y + backgroundBox.height * 0.5; 76 77 // Work out the limit to the distance of the picker when moving around the hue bar 78 var limit = backgroundBox.width * 0.5 - 15.0; 79 80 // Update angle 81 var angleDeg = this._huePercentage * 360.0 - 180.0; 82 var angle = cc.degreesToRadians(angleDeg); 83 84 // Set new position of the slider 85 var x = centerX + limit * Math.cos(angle); 86 var y = centerY + limit * Math.sin(angle); 87 this._slider.setPosition(x, y); 88 }, 89 90 setEnabled:function (enabled) { 91 cc.Control.prototype.setEnabled.call(this, enabled); 92 if (this._slider) { 93 this._slider.setOpacity(enabled ? 255 : 128); 94 } 95 }, 96 97 getBackground:function () { 98 return this._background; 99 }, 100 getSlider:function () { 101 return this._slider; 102 }, 103 getStartPos:function () { 104 return this._startPos; 105 }, 106 107 initWithTargetAndPos:function (target, pos) { 108 if (cc.Control.prototype.init.call(this)) { 109 // Add background and slider sprites 110 this._background = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("huePickerBackground.png", target, pos, cc.p(0.0, 0.0)); 111 this._slider = cc.ControlUtils.addSpriteToTargetWithPosAndAnchor("colourPicker.png", target, pos, cc.p(0.5, 0.5)); 112 113 this._slider.setPosition(pos.x, pos.y + this._background.getBoundingBox().height * 0.5); 114 this._startPos = pos; 115 116 // Sets the default value 117 this._hue = 0.0; 118 this._huePercentage = 0.0; 119 return true; 120 } else 121 return false; 122 }, 123 124 _updateSliderPosition:function (location) { 125 // Clamp the position of the icon within the circle 126 var backgroundBox = this._background.getBoundingBox(); 127 128 // Get the center point of the background image 129 var centerX = this._startPos.x + backgroundBox.width * 0.5; 130 var centerY = this._startPos.y + backgroundBox.height * 0.5; 131 132 // Work out the distance difference between the location and center 133 var dx = location.x - centerX; 134 var dy = location.y - centerY; 135 136 // Update angle by using the direction of the location 137 var angle = Math.atan2(dy, dx); 138 var angleDeg = cc.radiansToDegrees(angle) + 180.0; 139 140 // use the position / slider width to determin the percentage the dragger is at 141 this.setHue(angleDeg); 142 143 // send CCControl callback 144 this.sendActionsForControlEvents(cc.CONTROL_EVENT_VALUECHANGED); 145 }, 146 _checkSliderPosition:function (location) { 147 // compute the distance between the current location and the center 148 var distance = Math.sqrt(Math.pow(location.x + 10, 2) + Math.pow(location.y, 2)); 149 150 // check that the touch location is within the circle 151 if (80 > distance && distance > 59) { 152 this._updateSliderPosition(location); 153 return true; 154 } 155 return false; 156 }, 157 158 onTouchBegan:function (touch, event) { 159 if (!this.isEnabled() || !this.isVisible()) { 160 return false; 161 } 162 var touchLocation = this.getTouchLocation(touch); 163 164 // Check the touch position on the slider 165 return this._checkSliderPosition(touchLocation); 166 }, 167 onTouchMoved:function (touch, event) { 168 // Get the touch location 169 var touchLocation = this.getTouchLocation(touch); 170 171 //small modification: this allows changing of the colour, even if the touch leaves the bounding area 172 //this._updateSliderPosition(touchLocation); 173 //this.sendActionsForControlEvents(cc.CONTROL_EVENT_VALUECHANGED); 174 // Check the touch position on the slider 175 this._checkSliderPosition(touchLocation); 176 } 177 }); 178 179 var _p = cc.ControlHuePicker.prototype; 180 181 // Extended properties 182 /** @expose */ 183 _p.hue; 184 cc.defineGetterSetter(_p, "hue", _p.getHue, _p.setHue); 185 /** @expose */ 186 _p.huePercent; 187 cc.defineGetterSetter(_p, "huePercent", _p.getHuePercentage, _p.setHuePercentage); 188 /** @expose */ 189 _p.background; 190 cc.defineGetterSetter(_p, "background", _p.getBackground); 191 /** @expose */ 192 _p.slider; 193 cc.defineGetterSetter(_p, "slider", _p.getSlider); 194 /** @expose */ 195 _p.startPos; 196 cc.defineGetterSetter(_p, "startPos", _p.getStartPos); 197 198 _p = null; 199 200 cc.ControlHuePicker.create = function (target, pos) { 201 var pRet = new cc.ControlHuePicker(); 202 pRet.initWithTargetAndPos(target, pos); 203 return pRet; 204 };