From ffb8a123bfb7f6a8fad59325000dc35306b4305a Mon Sep 17 00:00:00 2001 From: VisualSJ Date: Mon, 29 Jun 2015 18:42:24 +0800 Subject: [PATCH 1/2] Fixed a bug that is ClippingNode draw error if inverted == true --- .../CCClippingNodeCanvasRenderCmd.js | 30 ++++++------------- 1 file changed, 9 insertions(+), 21 deletions(-) diff --git a/cocos2d/clipping-nodes/CCClippingNodeCanvasRenderCmd.js b/cocos2d/clipping-nodes/CCClippingNodeCanvasRenderCmd.js index 9a0a0d8d2d..522d1b24d1 100644 --- a/cocos2d/clipping-nodes/CCClippingNodeCanvasRenderCmd.js +++ b/cocos2d/clipping-nodes/CCClippingNodeCanvasRenderCmd.js @@ -60,10 +60,8 @@ scaleX = scaleX || cc.view.getScaleX(); scaleY = scaleY ||cc.view.getScaleY(); var wrapper = ctx || cc._renderContext, context = wrapper.getContext(); - var t = this._transform; //note: use local transform - wrapper.save(); - context.transform(t.a, t.b, t.c, t.d, t.tx * scaleX, -t.ty * scaleY); - context.beginPath(); + + wrapper.setTransform(this._transform, scaleX, scaleY); for (var i = 0; i < stencil._buffer.length; i++) { var vertices = stencil._buffer[i].verts; //TODO: need support circle etc @@ -75,7 +73,6 @@ for (var j = 1, len = vertices.length; j < len; j++) context.lineTo(vertices[j].x * scaleX, -vertices[j].y * scaleY); } - wrapper.restore(); }; }else{ stencil._parent = this._node; @@ -94,9 +91,15 @@ locCacheCtx.drawImage(canvas, 0, 0); //save the result to shareCache canvas } else { wrapper.save(); - wrapper.save(); //save for clip + context.beginPath(); //save for clip //Because drawNode's content size is zero wrapper.setTransform(this._worldTransform, scaleX, scaleY); + + if (this._node.inverted) { + context.setTransform(1, 0, 0, 1, 0, 0); + context.rect(0, 0, context.canvas.width, context.canvas.height); + context.clip(); + } } }; @@ -123,21 +126,6 @@ //hack this._setStencilCompositionOperation(node._stencil); } else { - wrapper.restore(); //it use for - if (node.inverted) { - var canvas = context.canvas; - wrapper.save(); - context.setTransform(1, 0, 0, 1, 0, 0); - - context.moveTo(0, 0); - context.lineTo(0, canvas.height); - context.lineTo(canvas.width, canvas.height); - context.lineTo(canvas.width, 0); - context.lineTo(0, 0); - - wrapper.restore(); - } - context.closePath(); context.clip(); } }; From 8b0c01419f69cbe69aff95cde960b2fa484457a8 Mon Sep 17 00:00:00 2001 From: VisualSJ Date: Tue, 30 Jun 2015 09:41:49 +0800 Subject: [PATCH 2/2] Fixed a bug that is ClippingNode draw error if inverted == true --- cocos2d/clipping-nodes/CCClippingNodeCanvasRenderCmd.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/cocos2d/clipping-nodes/CCClippingNodeCanvasRenderCmd.js b/cocos2d/clipping-nodes/CCClippingNodeCanvasRenderCmd.js index 522d1b24d1..5c60928ab0 100644 --- a/cocos2d/clipping-nodes/CCClippingNodeCanvasRenderCmd.js +++ b/cocos2d/clipping-nodes/CCClippingNodeCanvasRenderCmd.js @@ -61,7 +61,8 @@ scaleY = scaleY ||cc.view.getScaleY(); var wrapper = ctx || cc._renderContext, context = wrapper.getContext(); - wrapper.setTransform(this._transform, scaleX, scaleY); + var t = this._transform; + context.transform(t.a, t.b, t.c, t.d, t.tx * scaleX, -t.ty * scaleY); for (var i = 0; i < stencil._buffer.length; i++) { var vertices = stencil._buffer[i].verts; //TODO: need support circle etc @@ -70,7 +71,7 @@ var firstPoint = vertices[0]; context.moveTo(firstPoint.x * scaleX, -firstPoint.y * scaleY); - for (var j = 1, len = vertices.length; j < len; j++) + for (var j = vertices.length - 1; j > 0; j--) context.lineTo(vertices[j].x * scaleX, -vertices[j].y * scaleY); } }; @@ -96,8 +97,7 @@ wrapper.setTransform(this._worldTransform, scaleX, scaleY); if (this._node.inverted) { - context.setTransform(1, 0, 0, 1, 0, 0); - context.rect(0, 0, context.canvas.width, context.canvas.height); + context.rect(0, 0, context.canvas.width, -context.canvas.height); context.clip(); } }