Permalink
Browse files

Merge pull request #583 from dingpinglv/iss1509_UpdateMenuTest

fixed #1509 correct cc.LayerGradient's effect
  • Loading branch information...
2 parents 0a91e39 + 277fd74 commit 3e05fc57ac4cecd34c407eb4a7aab64b9c02e80a @linshun linshun committed Oct 17, 2012
Showing with 143 additions and 66 deletions.
  1. +143 −66 cocos2d/layers_scenes_transitions_nodes/CCLayer.js
View
209 cocos2d/layers_scenes_transitions_nodes/CCLayer.js
@@ -45,7 +45,7 @@ cc.Layer = cc.Node.extend(/** @lends cc.Layer# */{
//this._initLayer();
},
- _initLayer:function(){
+ _initLayer:function () {
this.setAnchorPoint(cc.p(0.5, 0.5));
this._ignoreAnchorPointForPosition = true;
@@ -323,6 +323,7 @@ cc.LayerColor = cc.Layer.extend(/** @lends cc.LayerColor# */{
_opacity:0,
_color:new cc.Color3B(255, 255, 255),
_blendFunc:new cc.BlendFunc(cc.BLEND_SRC, cc.BLEND_DST),
+ _layerColorStr:null,
/**
* Constructor
@@ -332,6 +333,11 @@ cc.LayerColor = cc.Layer.extend(/** @lends cc.LayerColor# */{
this._squareColors = [new cc.Color4F(0, 0, 0, 1), new cc.Color4F(0, 0, 0, 1), new cc.Color4F(0, 0, 0, 1), new cc.Color4F(0, 0, 0, 1)];
this._color = new cc.Color4B(0, 0, 0, 0);
this._super();
+ this._layerColorStr = this._getLayerColorString();
+ },
+
+ _getLayerColorString:function () {
+ return "rgba(" + (0 | this._color.r) + "," + (0 | this._color.g) + "," + (0 | this._color.b) + "," + (this.getOpacity() / 255).toFixed(5) + ")";
},
/**
@@ -349,8 +355,6 @@ cc.LayerColor = cc.Layer.extend(/** @lends cc.LayerColor# */{
setOpacity:function (Var) {
this._opacity = Var;
this._updateColor();
-
- //this._addDirtyRegionToDirector(this.getBoundingBoxToWorld());
this.setNodeDirty();
},
@@ -369,8 +373,6 @@ cc.LayerColor = cc.Layer.extend(/** @lends cc.LayerColor# */{
setColor:function (Var) {
this._color = Var;
this._updateColor();
-
- //this._addDirtyRegionToDirector(this.getBoundingBoxToWorld());
this.setNodeDirty();
},
@@ -386,7 +388,7 @@ cc.LayerColor = cc.Layer.extend(/** @lends cc.LayerColor# */{
* blendFunc setter
* @param {Number} src
* @param {Number} dst
- */
+ */
setBlendFunc:function (src, dst) {
this._blendFunc = {src:src, dst:dst};
},
@@ -413,9 +415,10 @@ cc.LayerColor = cc.Layer.extend(/** @lends cc.LayerColor# */{
this._squareVertices[i].x = 0.0;
this._squareVertices[i].y = 0.0;
}
- this._updateColor();
this.setContentSize(cc.size(width, height));
+
+ this._updateColor();
//this.setShaderProgram(cc.ShaderCache.getInstance().programForKey(kCCShader_PositionColor));
return true;
@@ -489,36 +492,29 @@ cc.LayerColor = cc.Layer.extend(/** @lends cc.LayerColor# */{
draw:function (ctx) {
var context = ctx || cc.renderContext;
- if (cc.renderContextType == cc.CANVAS) {
- //context.globalAlpha = this.getOpacity() / 255;
- var tWidth = this.getContentSize().width;
- var tHeight = this.getContentSize().height;
- var apip = this.getAnchorPointInPoints();
- var tGradient = context.createLinearGradient(-apip.x, apip.y,
- -apip.x + tWidth, -(apip.y + tHeight));
-
- tGradient.addColorStop(0, "rgba(" + Math.round(this._squareColors[0].r * 255) + "," + Math.round(this._squareColors[0].g * 255) + ","
- + Math.round(this._squareColors[0].b * 255) + "," + this._squareColors[0].a.toFixed(4) + ")");
- tGradient.addColorStop(1, "rgba(" + Math.round(this._squareColors[3].r * 255) + "," + Math.round(this._squareColors[3].g * 255) + ","
- + Math.round(this._squareColors[3].b * 255) + "," + this._squareColors[3].a.toFixed(4) + ")");
-
- context.fillStyle = tGradient;
- context.fillRect(-apip.x, apip.y, tWidth, -tHeight);
- } else {
- /*cc.NODE_DRAW_SETUP();
- ccGLEnableVertexAttribs( kCCVertexAttribFlag_Position | kCCVertexAttribFlag_Color );
-
- //
- // Attributes
- //
- glVertexAttribPointer(kCCVertexAttrib_Position, 2, GL_FLOAT, GL_FALSE, 0, m_pSquareVertices);
- glVertexAttribPointer(kCCVertexAttrib_Color, 4, GL_FLOAT, GL_FALSE, 0, m_pSquareColors);
- ccGLBlendFunc( m_tBlendFunc.src, m_tBlendFunc.dst );
- glDrawArrays(GL_TRIANGLE_STRIP, 0, 4); */
- }
+ var tWidth = this.getContentSize().width;
+ var tHeight = this.getContentSize().height;
+ var apip = this.getAnchorPointInPoints();
+
+ context.fillStyle = "rgba(" + (0 | this._color.r) + "," + (0 | this._color.g) + "," + (0 | this._color.b) + "," + this.getOpacity() / 255 + ")";
+ context.fillRect(-apip.x, apip.y, tWidth, -tHeight);
+
this._super(context);
cc.INCREMENT_GL_DRAWS(1);
+ },
+
+ _drawForWebGL:function (ctx) {
+ /*cc.NODE_DRAW_SETUP();
+ ccGLEnableVertexAttribs( kCCVertexAttribFlag_Position | kCCVertexAttribFlag_Color );
+
+ //
+ // Attributes
+ //
+ glVertexAttribPointer(kCCVertexAttrib_Position, 2, GL_FLOAT, GL_FALSE, 0, m_pSquareVertices);
+ glVertexAttribPointer(kCCVertexAttrib_Color, 4, GL_FLOAT, GL_FALSE, 0, m_pSquareColors);
+ ccGLBlendFunc( m_tBlendFunc.src, m_tBlendFunc.dst );
+ glDrawArrays(GL_TRIANGLE_STRIP, 0, 4); */
}
});
@@ -586,6 +582,60 @@ cc.LayerGradient = cc.LayerColor.extend(/** @lends cc.LayerGradient# */{
_alongVector:null,
_compressedInterpolation:false,
+ _drawGradientCanvas:null,
+
+ _buildGradientCanvas:function (layerWidth, layerHeight) {
+ layerWidth = layerWidth || this.getContentSize().width;
+ layerHeight = layerHeight || this.getContentSize().height;
+
+ var canvas_colors = document.createElement('canvas');
+ canvas_colors.width = 2;
+ canvas_colors.height = 2;
+
+ var context_colors = canvas_colors.getContext('2d');
+ context_colors.fillStyle = 'rgba(0,0,0,1)';
+ context_colors.fillRect(0, 0, 2, 2);
+
+ var image_colors = context_colors.getImageData(0, 0, 2, 2);
+ var data = image_colors.data;
+
+ var canvas_render = document.createElement('canvas');
+ canvas_render.width = layerWidth;
+ canvas_render.height = layerHeight;
+
+ var context_render = canvas_render.getContext('2d');
+ context_render.translate(-layerWidth / 2, -layerHeight / 2);
+ context_render.scale(layerWidth, layerHeight);
+
+ // Top-left,
+ data[ 0 ] = 0 | (this._squareColors[0].r * 255);
+ data[ 1 ] = 0 | (this._squareColors[0].g * 255);
+ data[ 2 ] = 0 | (this._squareColors[0].b * 255);
+ data[ 3 ] = 0 | (this._squareColors[0].a * 255);
+
+ // Top-right,
+ data[ 4 ] = 0 | (this._squareColors[1].r * 255);
+ data[ 5 ] = 0 | (this._squareColors[1].g * 255);
+ data[ 6 ] = 0 | (this._squareColors[1].b * 255);
+ data[ 7 ] = 0 | (this._squareColors[1].a * 255);
+
+ // Bottom-left,
+ data[ 8 ] = 0 | (this._squareColors[2].r * 255);
+ data[ 9 ] = 0 | (this._squareColors[2].g * 255);
+ data[ 10 ] = 0 | (this._squareColors[2].b * 255);
+ data[ 11 ] = 0 | (this._squareColors[2].a * 255);
+
+ // Bottom-right,
+ data[ 12 ] = 0 | (this._squareColors[3].r * 255);
+ data[ 13 ] = 0 | (this._squareColors[3].g * 255);
+ data[ 14 ] = 0 | (this._squareColors[3].b * 255);
+ data[ 15 ] = 0 | (this._squareColors[3].a * 255);
+
+ context_colors.putImageData(image_colors, 0, 0);
+ context_render.drawImage(canvas_colors, 0, 0);
+ return canvas_render;
+ },
+
/**
* Constructor
* @function
@@ -595,6 +645,13 @@ cc.LayerGradient = cc.LayerColor.extend(/** @lends cc.LayerGradient# */{
this._endColor = new cc.Color3B(0, 0, 0);
this._alongVector = cc.p(0, -1);
this._super();
+
+ this._drawGradientCanvas = this._buildGradientCanvas();
+ },
+
+ init:function () {
+ this._super();
+ this._drawGradientCanvas = this._buildGradientCanvas();
},
/**
@@ -677,15 +734,15 @@ cc.LayerGradient = cc.LayerColor.extend(/** @lends cc.LayerGradient# */{
* @param {cc.Point} Var
*/
setVector:function (Var) {
- this.alongVector = Var;
+ this._alongVector = Var;
this._updateColor();
},
/**
* @return {cc.Point}
*/
getVector:function () {
- return this.alongVector;
+ return this._alongVector;
},
/** is Compressed Interpolation
@@ -737,19 +794,6 @@ cc.LayerGradient = cc.LayerColor.extend(/** @lends cc.LayerGradient# */{
_updateColor:function () {
//todo need fixed for webGL
this._super();
- /*
- this._squareColors[0].r = Math.round(this._startColor.r);
- this._squareColors[0].g = Math.round(this._startColor.g);
- this._squareColors[0].b = Math.round(this._startColor.b);
- this._squareColors[0].a = Math.round(this._startColor.a);
-
- this._squareColors[3].r = Math.round(this._endColor.r);
- this._squareColors[3].g = Math.round(this._endColor.g);
- this._squareColors[3].b = Math.round(this._endColor.b);
- this._squareColors[3].a = Math.round(this._endColor.a);
- return;
- */
-
var h = cc.pLength(this._alongVector);
if (h == 0)
@@ -771,25 +815,58 @@ cc.LayerGradient = cc.LayerColor.extend(/** @lends cc.LayerGradient# */{
var E = new cc.Color4F(this._endColor.r / 255, this._endColor.g / 255, this._endColor.b / 255, (this._endOpacity * opacityf) / 255);
// (-1, -1)
- this._squareColors[0].r = parseInt((E.r + (S.r - E.r) * ((c + u.x + u.y) / (2.0 * c))));
- this._squareColors[0].g = parseInt((E.g + (S.g - E.g) * ((c + u.x + u.y) / (2.0 * c))));
- this._squareColors[0].b = parseInt((E.b + (S.b - E.b) * ((c + u.x + u.y) / (2.0 * c))));
- this._squareColors[0].a = parseInt((E.a + (S.a - E.a) * ((c + u.x + u.y) / (2.0 * c))));
+ this._squareColors[0].r = ((E.r + (S.r - E.r) * ((c + u.x + u.y) / (2.0 * c))));
+ this._squareColors[0].g = ((E.g + (S.g - E.g) * ((c + u.x + u.y) / (2.0 * c))));
+ this._squareColors[0].b = ((E.b + (S.b - E.b) * ((c + u.x + u.y) / (2.0 * c))));
+ this._squareColors[0].a = ((E.a + (S.a - E.a) * ((c + u.x + u.y) / (2.0 * c))));
// (1, -1)
- this._squareColors[1].r = parseInt((E.r + (S.r - E.r) * ((c - u.x + u.y) / (2.0 * c))));
- this._squareColors[1].g = parseInt((E.g + (S.g - E.g) * ((c - u.x + u.y) / (2.0 * c))));
- this._squareColors[1].b = parseInt((E.b + (S.b - E.b) * ((c - u.x + u.y) / (2.0 * c))));
- this._squareColors[1].a = parseInt((E.a + (S.a - E.a) * ((c - u.x + u.y) / (2.0 * c))));
+ this._squareColors[1].r = ((E.r + (S.r - E.r) * ((c - u.x + u.y) / (2.0 * c))));
+ this._squareColors[1].g = ((E.g + (S.g - E.g) * ((c - u.x + u.y) / (2.0 * c))));
+ this._squareColors[1].b = ((E.b + (S.b - E.b) * ((c - u.x + u.y) / (2.0 * c))));
+ this._squareColors[1].a = ((E.a + (S.a - E.a) * ((c - u.x + u.y) / (2.0 * c))));
// (-1, 1)
- this._squareColors[2].r = parseInt((E.r + (S.r - E.r) * ((c + u.x - u.y) / (2.0 * c))));
- this._squareColors[2].g = parseInt((E.g + (S.g - E.g) * ((c + u.x - u.y) / (2.0 * c))));
- this._squareColors[2].b = parseInt((E.b + (S.b - E.b) * ((c + u.x - u.y) / (2.0 * c))));
- this._squareColors[2].a = parseInt((E.a + (S.a - E.a) * ((c + u.x - u.y) / (2.0 * c))));
+ this._squareColors[2].r = ((E.r + (S.r - E.r) * ((c + u.x - u.y) / (2.0 * c))));
+ this._squareColors[2].g = ((E.g + (S.g - E.g) * ((c + u.x - u.y) / (2.0 * c))));
+ this._squareColors[2].b = ((E.b + (S.b - E.b) * ((c + u.x - u.y) / (2.0 * c))));
+ this._squareColors[2].a = ((E.a + (S.a - E.a) * ((c + u.x - u.y) / (2.0 * c))));
// (1, 1)
- this._squareColors[3].r = parseInt((E.r + (S.r - E.r) * ((c - u.x - u.y) / (2.0 * c))));
- this._squareColors[3].g = parseInt((E.g + (S.g - E.g) * ((c - u.x - u.y) / (2.0 * c))));
- this._squareColors[3].b = parseInt((E.b + (S.b - E.b) * ((c - u.x - u.y) / (2.0 * c))));
- this._squareColors[3].a = parseInt((E.a + (S.a - E.a) * ((c - u.x - u.y) / (2.0 * c))));
+ this._squareColors[3].r = ((E.r + (S.r - E.r) * ((c - u.x - u.y) / (2.0 * c))));
+ this._squareColors[3].g = ((E.g + (S.g - E.g) * ((c - u.x - u.y) / (2.0 * c))));
+ this._squareColors[3].b = ((E.b + (S.b - E.b) * ((c - u.x - u.y) / (2.0 * c))));
+ this._squareColors[3].a = ((E.a + (S.a - E.a) * ((c - u.x - u.y) / (2.0 * c))));
+
+ this._drawGradientCanvas = this._buildGradientCanvas();
+ },
+
+ draw:function (ctx) {
+ var context = ctx || cc.renderContext;
+ if (cc.renderContextType == cc.CANVAS) {
+ if (this._drawGradientCanvas == null) {
+ var tWidth = this.getContentSize().width;
+ var tHeight = this.getContentSize().height;
+ var apip = this.getAnchorPointInPoints();
+ var tGradient = context.createLinearGradient(-apip.x, apip.y,
+ -apip.x + tWidth, -(apip.y + tHeight));
+
+ tGradient.addColorStop(0, "rgba(" + Math.round(this._squareColors[0].r * 255) + "," + Math.round(this._squareColors[0].g * 255) + ","
+ + Math.round(this._squareColors[0].b * 255) + "," + this._squareColors[0].a.toFixed(4) + ")");
+ tGradient.addColorStop(1, "rgba(" + Math.round(this._squareColors[3].r * 255) + "," + Math.round(this._squareColors[3].g * 255) + ","
+ + Math.round(this._squareColors[3].b * 255) + "," + this._squareColors[3].a.toFixed(4) + ")");
+
+ context.fillStyle = tGradient;
+ context.fillRect(-apip.x, apip.y, tWidth, -tHeight);
+ } else {
+ context.globalAlpha = this._opacity / 255;
+ var posX = 0 | ( -this._anchorPointInPoints.x );
+ var posY = 0 | ( -this._anchorPointInPoints.y );
+
+ context.drawImage(this._drawGradientCanvas,
+ 0, 0,
+ this._drawGradientCanvas.width, this._drawGradientCanvas.height,
+ posX, -(posY + this._contentSize.height),
+ this._contentSize.width, this._contentSize.height);
+ }
+ }
}
});
@@ -816,7 +893,7 @@ cc.LayerGradient.create = function (start, end, v) {
}
break;
case 0:
- if(layer && layer.init()){
+ if (layer && layer.init()) {
return layer;
}
break;

0 comments on commit 3e05fc5

Please sign in to comment.