Skip to content

Commit d53f694

Browse files
VisualSJVisualSJ
committed
Issue cocos2d#2416: Add ClippingNode RenderCmd
1 parent 9abff87 commit d53f694

File tree

7 files changed

+145
-104
lines changed

7 files changed

+145
-104
lines changed

‎cocos2d/clipping-nodes/CCClippingNode.js

+12-12
Original file line numberDiff line numberDiff line change
@@ -87,18 +87,6 @@ cc.ClippingNode = cc.Node.extend(/** @lends cc.ClippingNode# */{
8787
cc.ClippingNode.prototype.init.call(this, stencil);
8888
},
8989

90-
_initRendererCmd: function(){
91-
if(cc._renderType === cc._RENDER_TYPE_CANVAS){
92-
this._rendererSaveCmd = new cc.ClippingNodeSaveRenderCmdCanvas(this);
93-
this._rendererClipCmd = new cc.ClippingNodeClipRenderCmdCanvas(this);
94-
this._rendererRestoreCmd = new cc.ClippingNodeRestoreRenderCmdCanvas(this);
95-
}else{
96-
this._beforeVisitCmd = new cc.CustomRenderCmdWebGL(this, this._onBeforeVisit);
97-
this._afterDrawStencilCmd = new cc.CustomRenderCmdWebGL(this, this._onAfterDrawStencil);
98-
this._afterVisitCmd = new cc.CustomRenderCmdWebGL(this, this._onAfterVisit);
99-
}
100-
},
101-
10290
/**
10391
* Initialization of the node, please do not call this function by yourself, you should pass the parameters to constructor to initialize it
.
10492
* @function
@@ -581,6 +569,18 @@ cc.ClippingNode = cc.Node.extend(/** @lends cc.ClippingNode# */{
581569
cc.Node.prototype._transformForRenderer.call(this, parentMatrix);
582570
if(this._stencil)
583571
this._stencil._transformForRenderer(this._stackMatrix);
572+
},
573+
574+
_createRenderCmd: function(){
575+
if(cc._renderType === cc._RENDER_TYPE_CANVAS){
576+
this._rendererSaveCmd = new cc.ClippingNode.CanvasSaveRenderCmd(this);
577+
this._rendererClipCmd = new cc.ClippingNode.CanvasClipRenderCmd(this);
578+
this._rendererRestoreCmd = new cc.ClippingNode.CanvasRestoreRenderCmd(this);
579+
}else{
580+
this._beforeVisitCmd = new cc.ClippingNode.WebGLRenderCmd(this, this._onBeforeVisit);
581+
this._afterDrawStencilCmd = new cc.ClippingNode.WebGLRenderCmd(this, this._onAfterDrawStencil);
582+
this._afterVisitCmd = new cc.ClippingNode.WebGLRenderCmd(this, this._onAfterVisit);
583+
}
584584
}
585585
});
586586

‎cocos2d/clipping-nodes/CCClippingNodeRenderCmd.js

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
/****************************************************************************
2+
Copyright (c) 2013-2014 Chukong Technologies Inc.
3+
4+
http://www.cocos2d-x.org
5+
6+
Permission is hereby granted, free of charge, to any person obtaining a copy
7+
of this software and associated documentation files (the "Software"), to deal
8+
in the Software without restriction, including without limitation the rights
9+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
copies of the Software, and to permit persons to whom the Software is
11+
furnished to do so, subject to the following conditions:
12+
13+
The above copyright notice and this permission notice shall be included in
14+
all copies or substantial portions of the Software.
15+
16+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
22+
THE SOFTWARE.
23+
****************************************************************************/
24+
25+
cc.ClippingNode.CanvasSaveRenderCmd = function(renderableObject){
26+
cc.Node.CanvasRenderCmd.call(this, renderableObject);
27+
this._needDraw = true;
28+
};
29+
30+
cc.ClippingNode.CanvasSaveRenderCmd.prototype.rendering = function (ctx, scaleX, scaleY) {
31+
var node = this._node;
32+
var context = ctx || cc._renderContext;
33+
34+
if (node._clipElemType) {
35+
var locCache = cc.ClippingNode._getSharedCache();
36+
var canvas = context.canvas;
37+
locCache.width = canvas.width;
38+
locCache.height = canvas.height;
39+
var locCacheCtx = locCache.getContext("2d");
40+
locCacheCtx.drawImage(canvas, 0, 0);
41+
context.save();
42+
} else {
43+
node.transform();
44+
var t = node._transformWorld;
45+
context.save();
46+
context.save();
47+
context.transform(t.a, t.c, t.b, t.d, t.tx * scaleX, -t.ty * scaleY);
48+
}
49+
};
50+
51+
cc.ClippingNode.CanvasSaveRenderCmd.prototype = Object.create(cc.Node.CanvasRenderCmd.prototype);
52+
cc.ClippingNode.CanvasSaveRenderCmd.prototype.constructor = cc.ClippingNode.CanvasSaveRenderCmd;
53+
54+
cc.ClippingNode.CanvasClipRenderCmd = function (renderableObject) {
55+
cc.Node.CanvasRenderCmd.call(this, renderableObject);
56+
this._needDraw = true;
57+
};
58+
59+
cc.ClippingNode.CanvasClipRenderCmd.prototype.rendering = function (ctx, scaleX, scaleY) {
60+
var node = this._node;
61+
var context = ctx || cc._renderContext;
62+
63+
if (node._clipElemType) {
64+
context.globalCompositeOperation = node.inverted ? "destination-out" : "destination-in";
65+
var t = node._transformWorld;
66+
context.transform(t.a, t.c, t.b, t.d, t.tx * scaleX, -t.ty * scaleY);
67+
} else {
68+
context.restore();
69+
if (node.inverted) {
70+
var canvas = context.canvas;
71+
context.save();
72+
73+
context.setTransform(1, 0, 0, 1, 0, 0);
74+
75+
context.moveTo(0, 0);
76+
context.lineTo(0, canvas.height);
77+
context.lineTo(canvas.width, canvas.height);
78+
context.lineTo(canvas.width, 0);
79+
context.lineTo(0, 0);
80+
81+
context.restore();
82+
}
83+
context.clip();
84+
}
85+
};
86+
87+
cc.ClippingNode.CanvasClipRenderCmd.prototype = Object.create(cc.Node.CanvasRenderCmd.prototype);
88+
cc.ClippingNode.CanvasClipRenderCmd.prototype.constructor = cc.ClippingNode.CanvasClipRenderCmd;
89+
90+
cc.ClippingNode.CanvasRestoreRenderCmd = function (renderableObject) {
91+
cc.Node.CanvasRenderCmd.call(this, renderableObject);
92+
this._needDraw = true;
93+
};
94+
95+
cc.ClippingNode.CanvasRestoreRenderCmd.prototype.rendering = function (ctx, scaleX, scaleY) {
96+
var node = this._node;
97+
var locCache = cc.ClippingNode._getSharedCache();
98+
var context = ctx || cc._renderContext;
99+
if (node._clipElemType) {
100+
context.restore();
101+
102+
// Redraw the cached canvas, so that the cliped area shows the background etc.
103+
context.save();
104+
context.setTransform(1, 0, 0, 1, 0, 0);
105+
context.globalCompositeOperation = "destination-over";
106+
context.drawImage(locCache, 0, 0);
107+
context.restore();
108+
} else {
109+
context.restore();
110+
}
111+
};
112+
113+
cc.ClippingNode.CanvasRestoreRenderCmd.prototype = Object.create(cc.Node.CanvasRenderCmd.prototype);
114+
cc.ClippingNode.CanvasRestoreRenderCmd.prototype.constructor = cc.ClippingNode.CanvasRestoreRenderCmd;
115+
116+
cc.ClippingNode.WebGLRenderCmd = function(renderableObject, callback){
117+
cc.Node.WebGLRenderCmd.call(this, renderableObject);
118+
this._needDraw = true;
119+
this._callback = callback;
120+
};
121+
122+
cc.ClippingNode.WebGLRenderCmd.prototype = Object.create(cc.Node.CanvasRenderCmd.prototype);
123+
cc.ClippingNode.WebGLRenderCmd.prototype.constructor = cc.ClippingNode.WebGLRenderCmd;
124+
125+
cc.ClippingNode.WebGLRenderCmd.prototype.rendering = function (ctx) {
126+
if (!this._callback)
127+
return;
128+
this._callback.call(this._node, ctx);
129+
};

‎cocos2d/core/renderer/RendererCanvas.js

-79
Original file line numberDiff line numberDiff line change
@@ -143,85 +143,6 @@ cc.rendererCanvas = {
143143
if (cc._renderType === cc._RENDER_TYPE_CANVAS)
144144
cc.renderer = cc.rendererCanvas;
145145

146-
cc.ClippingNodeSaveRenderCmdCanvas = function (node) {
147-
this._node = node;
148-
};
149-
150-
cc.ClippingNodeSaveRenderCmdCanvas.prototype.rendering = function (ctx, scaleX, scaleY) {
151-
var node = this._node;
152-
var context = ctx || cc._renderContext;
153-
154-
if (node._clipElemType) {
155-
var locCache = cc.ClippingNode._getSharedCache();
156-
var canvas = context.canvas;
157-
locCache.width = canvas.width;
158-
locCache.height = canvas.height;
159-
var locCacheCtx = locCache.getContext("2d");
160-
locCacheCtx.drawImage(canvas, 0, 0);
161-
context.save();
162-
} else {
163-
node.transform();
164-
var t = node._transformWorld;
165-
context.save();
166-
context.save();
167-
context.transform(t.a, t.c, t.b, t.d, t.tx * scaleX, -t.ty * scaleY);
168-
}
169-
};
170-
171-
cc.ClippingNodeClipRenderCmdCanvas = function (node) {
172-
this._node = node;
173-
};
174-
175-
cc.ClippingNodeClipRenderCmdCanvas.prototype.rendering = function (ctx, scaleX, scaleY) {
176-
var node = this._node;
177-
var context = ctx || cc._renderContext;
178-
179-
if (node._clipElemType) {
180-
context.globalCompositeOperation = node.inverted ? "destination-out" : "destination-in";
181-
var t = node._transformWorld;
182-
context.transform(t.a, t.c, t.b, t.d, t.tx * scaleX, -t.ty * scaleY);
183-
} else {
184-
context.restore();
185-
if (node.inverted) {
186-
var canvas = context.canvas;
187-
context.save();
188-
189-
context.setTransform(1, 0, 0, 1, 0, 0);
190-
191-
context.moveTo(0, 0);
192-
context.lineTo(0, canvas.height);
193-
context.lineTo(canvas.width, canvas.height);
194-
context.lineTo(canvas.width, 0);
195-
context.lineTo(0, 0);
196-
197-
context.restore();
198-
}
199-
context.clip();
200-
}
201-
};
202-
203-
cc.ClippingNodeRestoreRenderCmdCanvas = function (node) {
204-
this._node = node;
205-
};
206-
207-
cc.ClippingNodeRestoreRenderCmdCanvas.prototype.rendering = function (ctx, scaleX, scaleY) {
208-
var node = this._node;
209-
var locCache = cc.ClippingNode._getSharedCache();
210-
var context = ctx || cc._renderContext;
211-
if (node._clipElemType) {
212-
context.restore();
213-
214-
// Redraw the cached canvas, so that the cliped area shows the background etc.
215-
context.save();
216-
context.setTransform(1, 0, 0, 1, 0, 0);
217-
context.globalCompositeOperation = "destination-over";
218-
context.drawImage(locCache, 0, 0);
219-
context.restore();
220-
} else {
221-
context.restore();
222-
}
223-
};
224-
225146
//CHIPMUNK
226147
cc.PhysicsDebugNodeRenderCmdCanvas = function (node) {
227148
this._node = node;

‎cocos2d/core/renderer/RendererWebGL.js

-11
Original file line numberDiff line numberDiff line change
@@ -318,17 +318,6 @@ cc.AtlasNodeRenderCmdWebGL.prototype.rendering = function (ctx) {
318318
}
319319
};
320320

321-
cc.CustomRenderCmdWebGL = function (node, func) {
322-
this._node = node;
323-
this._callback = func;
324-
};
325-
326-
cc.CustomRenderCmdWebGL.prototype.rendering = function (ctx) {
327-
if (!this._callback)
328-
return;
329-
this._callback.call(this._node, ctx);
330-
};
331-
332321
cc.TMXLayerRenderCmdWebGL = function (node) {
333322
this._node = node;
334323
};

‎cocos2d/progress-timer/CCProgressTimer.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ cc.ProgressTimer = cc.Node.extend(/** @lends cc.ProgressTimer# */{
187187
this._reverseDirection = false;
188188

189189
this._sprite = null;
190-
this._rendererCmd = new cc.ProgressRenderCmdCanvas(this);
190+
this._rendererCmd = this._createRenderCmd();
191191
sprite && this._initWithSpriteForCanvas(sprite);
192192
},
193193

‎cocos2d/progress-timer/CCProgressTimerRenderCmd.js

+1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424

2525
cc.ProgressTimer.CanvasRenderCmd = function(renderableObject){
2626
cc.Node.CanvasRenderCmd.call(this, renderableObject);
27+
this._needDraw = true;
2728

2829
this._PI180 = Math.PI / 180;
2930
this._sprite = null;

‎moduleConfig.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
"clipping-nodes" : [
2828
"core", "shape-nodes",
2929

30-
"cocos2d/clipping-nodes/CCClippingNode.js"
30+
"cocos2d/clipping-nodes/CCClippingNode.js",
31+
"cocos2d/clipping-nodes/CCClippingNodeRenderCmd.js"
3132
],
3233
"compression" : [
3334
"core",

0 commit comments

Comments
 (0)