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