Skip to content

closed #3349: add ClippingNode for canvas mode #1308

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dingpinglv merged 4 commits into from
Dec 10, 2013
Merged

closed #3349: add ClippingNode for canvas mode #1308

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a5b9a8e
closed #3349: add ClippingNode for canvas mode
xingsenma Dec 10, 2013
c3df53a
Merge branch 'develop' of https://github.com/cocos2d/cocos2d-html5 in…
xingsenma Dec 10, 2013
2f44d46
issue #3349: add ClippingNode for canvas mode
xingsenma Dec 10, 2013
e4b259c
issue #3349: add ClippingNode for canvas mode
xingsenma Dec 10, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 92 additions & 3 deletions cocos2d/misc_nodes/CCClippingNode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,9 @@ cc.ClippingNode = cc.Node.extend(/** @lends cc.ClippingNode# */{
* The stencil node will be retained, and its parent will be set to this clipping node.
* @param {cc.Node} [stencil=null]
*/
init:function(stencil){
init:null,

_initForWebGL:function(stencil){
this._stencil = stencil;

this._alphaThreshold = 1;
Expand All @@ -81,6 +83,12 @@ cc.ClippingNode = cc.Node.extend(/** @lends cc.ClippingNode# */{
return true;
},

_initForCanvas:function(stencil){
this._stencil = stencil;
this._alphaThreshold = 1;
this._inverted = false;
},

onEnter:function(){
cc.Node.prototype.onEnter.call(this);
this._stencil.onEnter();
Expand All @@ -101,7 +109,9 @@ cc.ClippingNode = cc.Node.extend(/** @lends cc.ClippingNode# */{
cc.Node.prototype.onExit.call(this);
},

visit:function(ctx){
visit:null,

_visitForWebGL:function(ctx){
var gl = ctx || cc.renderContext;

// if stencil buffer disabled
Expand Down Expand Up @@ -270,6 +280,46 @@ cc.ClippingNode = cc.Node.extend(/** @lends cc.ClippingNode# */{
cc.ClippingNode._layer--;
},

_visitForCanvas:function(ctx){
// return fast (draw nothing, or draw everything if in inverted mode) if:
// - nil stencil node
// - or stencil node invisible:
if (!this._stencil || !this._stencil.isVisible()) {
if (this._inverted)
cc.Node.prototype.visit.call(this, ctx); // draw everything
return;
}

//visit for canvas
var context = ctx || cc.renderContext, i;
var children = this._children, locChild;
context.save();
this.transform(context);

this._stencil.visit(ctx);
context.clip();

var len = children.length;
if (len > 0) {
this.sortAllChildren();
// draw children zOrder < 0
for (i = 0; i < len; i++) {
locChild = children[i];
if (locChild._zOrder < 0)
locChild.visit(context);
else
break;
}
this.draw(context);
for (; i < len; i++) {
children[i].visit(context);
}
} else
this.draw(context);

context.restore();
},

/**
* The cc.Node to use as a stencil to do the clipping. <br/>
* The stencil node will be retained. This default to nil.
Expand All @@ -282,10 +332,38 @@ cc.ClippingNode = cc.Node.extend(/** @lends cc.ClippingNode# */{
/**
* @param {cc.Node} stencil
*/
setStencil:function(stencil){
setStencil:null,

_setStencilForWebGL:function(stencil){
this._stencil = stencil;
},

_setStencilForCanvas: function (stencil) {
this._stencil = stencil;
var locEGL_ScaleX = cc.EGLView.getInstance().getScaleX(), locEGL_ScaleY = cc.EGLView.getInstance().getScaleY();
var locContext = cc.renderContext;
//rewrite the draw of stencil ,only init the clip path and draw nothing.
if (stencil instanceof cc.DrawNode) {
stencil.draw = function () {
for (var i = 0; i < stencil._buffer.length; i++) {
var element = stencil._buffer[i];
var vertices = element.verts;
var firstPoint = vertices[0];
locContext.beginPath();
locContext.moveTo(firstPoint.x * locEGL_ScaleX, -firstPoint.y * locEGL_ScaleY);
for (var j = 1, len = vertices.length; j < len; j++)
locContext.lineTo(vertices[j].x * locEGL_ScaleX, -vertices[j].y * locEGL_ScaleY);
}
}
} else if (stencil instanceof cc.Node) {
stencil.draw = function () {
var locSize = stencil.getContentSize();
locContext.beginPath();
locContext.rect(0, 0, locSize.width * locEGL_ScaleX, -locSize.height * locEGL_ScaleY);
}
}
},

/**
* <p>
* The alpha threshold. <br/>
Expand Down Expand Up @@ -329,6 +407,17 @@ cc.ClippingNode = cc.Node.extend(/** @lends cc.ClippingNode# */{
}
});

if(cc.Browser.supportWebGL){
//WebGL
cc.ClippingNode.prototype.init = cc.ClippingNode.prototype._initForWebGL;
cc.ClippingNode.prototype.visit = cc.ClippingNode.prototype._visitForWebGL;
cc.ClippingNode.prototype.setStencil = cc.ClippingNode.prototype._setStencilForWebGL;
}else{
cc.ClippingNode.prototype.init = cc.ClippingNode.prototype._initForCanvas;
cc.ClippingNode.prototype.visit = cc.ClippingNode.prototype._visitForCanvas;
cc.ClippingNode.prototype.setStencil = cc.ClippingNode.prototype._setStencilForCanvas;
}

cc.ClippingNode._init_once = null;
cc.ClippingNode._visit_once = null;
cc.ClippingNode._layer = null;
Expand Down
50 changes: 3 additions & 47 deletions extensions/CocoStudio/GUI/Layouts/UILayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1035,7 +1035,8 @@ ccs.UIRectClippingNode = cc.ClippingNode.extend({
this._arrRect[3] = cc.p(0, this._clippingSize.height);
var green = cc.c4f(0, 1, 0, 1);
this._innerStencil.clear();
//this._innerStencil.drawPoly(this._arrRect, green, 0, green);
this._innerStencil.drawPoly(this._arrRect, green, 0, green);
this.setStencil(this._innerStencil);
},

setClippingEnabled: function (enabled) {
Expand All @@ -1047,58 +1048,13 @@ ccs.UIRectClippingNode = cc.ClippingNode.extend({
return;
}
if (this._clippingEnabled) {
if (cc.Browser.supportWebGL) {
cc.ClippingNode.prototype.visit.call(this, ctx);
} else {
this.visitCanvas(ctx);
}
cc.ClippingNode.prototype.visit.call(this, ctx);
}
else {
cc.Node.prototype.visit.call(this, ctx);
}
},

visitCanvas: function (ctx) {
// quick return if not visible
if (!this._visible)
return;

//visit for canvas
var context = ctx || cc.renderContext, i;
var children = this._children, locChild;
context.save();
this.transform(context);
context.beginPath();
var locContentSize = this.getContentSize();
var locRect = cc.rect(0, 0, locContentSize.width, locContentSize.height);
var locEGL_ScaleX = cc.EGLView.getInstance().getScaleX(), locEGL_ScaleY = cc.EGLView.getInstance().getScaleY();

context.rect(locRect.x * locEGL_ScaleX, locRect.y * locEGL_ScaleY, locRect.width * locEGL_ScaleX, -locRect.height * locEGL_ScaleY);
context.clip();
context.closePath();
var len = children.length;
if (len > 0) {
this.sortAllChildren();
// draw children zOrder < 0
for (i = 0; i < len; i++) {
locChild = children[i];
if (locChild._zOrder < 0)
locChild.visit(context);
else
break;
}
this.draw(context);
for (; i < len; i++) {
children[i].visit(context);
}
} else
this.draw(context);

this._orderOfArrival = 0;
context.restore();
this._stencil.visit();
},

setEnabled: function (enabled) {
this._enabled = enabled;
},
Expand Down