Merge pull request #3335 from dabingnn/add_dirtyRegion

Add dirty region

Author: pandamicro

cocos2d/clipping-nodes/CCClippingNodeCanvasRenderCmd.js

@@ -57,24 +57,15 @@
             }
 
             stencil._renderCmd.rendering = function (ctx, scaleX, scaleY) {
-                scaleX = scaleX || cc.view.getScaleX();
-                scaleY = scaleY ||cc.view.getScaleY();
-                var wrapper = ctx || cc._renderContext, context = wrapper.getContext();
+                //make it do nothing and draw it in clipp render command
+                return;
+            };
 
-                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
-                    //cc.assert(cc.vertexListIsClockwise(vertices),
-                    //    "Only clockwise polygons should be used as stencil");
+            stencil._renderCmd._canUseDirtyRegion = true;
+            this._rendererSaveCmd._canUseDirtyRegion = true;
+            this._rendererClipCmd._canUseDirtyRegion = true;
+            this._rendererRestoreCmd._canUseDirtyRegion = true;
 
-                    var firstPoint = vertices[0];
-                    context.moveTo(firstPoint.x * scaleX, -firstPoint.y * scaleY);
-                    for (var j = vertices.length - 1; j > 0; j--)
-                        context.lineTo(vertices[j].x * scaleX, -vertices[j].y * scaleY);
-                }
-            };
         }else{
             stencil._parent = this._node;
         }
@@ -92,11 +83,11 @@
             locCacheCtx.drawImage(canvas, 0, 0);                //save the result to shareCache canvas
         } else {
             wrapper.save();
-            context.beginPath();                                                         //save for clip
             //Because drawNode's content size is zero
             wrapper.setTransform(this._worldTransform, scaleX, scaleY);
 
             if (this._node.inverted) {
+                context.beginPath();                                                         //save for clip
                 context.rect(0, 0, context.canvas.width, -context.canvas.height);
                 context.clip();
             }
@@ -126,6 +117,23 @@
             //hack
             this._setStencilCompositionOperation(node._stencil);
         } else {
+            var stencil = this._node._stencil;
+            if(stencil instanceof cc.DrawNode) {
+                context.beginPath();
+                var t = stencil._renderCmd._transform;
+                context.transform(t.a, t.b, t.c, t.d, t.tx, -t.ty);
+                for (var i = 0; i < stencil._buffer.length; i++) {
+                    var vertices = stencil._buffer[i].verts;
+                    //TODO: need support circle etc
+                    //cc.assert(cc.vertexListIsClockwise(vertices),
+                    //    "Only clockwise polygons should be used as stencil");
+
+                    var firstPoint = vertices[0];
+                    context.moveTo(firstPoint.x , -firstPoint.y );
+                    for (var j = vertices.length - 1; j > 0; j--)
+                        context.lineTo(vertices[j].x , -vertices[j].y );
+                }
+            }
             context.clip();
         }
     };

cocos2d/core/CCDrawingPrimitivesCanvas.js

@@ -97,8 +97,8 @@ cc.DrawingPrimitiveCanvas = cc.Class.extend(/** @lends cc.DrawingPrimitiveCanvas
     drawLine:function (origin, destination) {
         var locContext = this._renderContext.getContext(), locScaleX = cc.view.getScaleX(), locScaleY = cc.view.getScaleY();
         locContext.beginPath();
-        locContext.moveTo(origin.x * locScaleX, -origin.y * locScaleY);
-        locContext.lineTo(destination.x * locScaleX, -destination.y * locScaleY);
+        locContext.moveTo(origin.x , -origin.y );
+        locContext.lineTo(destination.x, -destination.y );
         locContext.closePath();
         locContext.stroke();
     },
@@ -153,9 +153,9 @@ cc.DrawingPrimitiveCanvas = cc.Class.extend(/** @lends cc.DrawingPrimitiveCanvas
         var firstPoint = vertices[0], locContext = this._renderContext.getContext();
         var locScaleX = cc.view.getScaleX(), locScaleY = cc.view.getScaleY();
         locContext.beginPath();
-        locContext.moveTo(firstPoint.x * locScaleX, -firstPoint.y * locScaleY);
+        locContext.moveTo(firstPoint.x , -firstPoint.y );
         for (var i = 1, len = vertices.length; i < len; i++)
-            locContext.lineTo(vertices[i].x * locScaleX, -vertices[i].y * locScaleY);
+            locContext.lineTo(vertices[i].x , -vertices[i].y );
 
         if (closePolygon)
             locContext.closePath();
@@ -192,9 +192,9 @@ cc.DrawingPrimitiveCanvas = cc.Class.extend(/** @lends cc.DrawingPrimitiveCanvas
         var locScaleX = cc.view.getScaleX(), locScaleY = cc.view.getScaleY();
         locContext.beginPath();
         var endAngle = angle - Math.PI * 2;
-        locContext.arc(0 | (center.x * locScaleX), 0 | -(center.y * locScaleY), radius * locScaleX, -angle, -endAngle, false);
+        locContext.arc(0 | (center.x ), 0 | -(center.y ), radius , -angle, -endAngle, false);
         if (drawLineToCenter) {
-            locContext.lineTo(0 | (center.x * locScaleX), 0 | -(center.y * locScaleY));
+            locContext.lineTo(0 | (center.x ), 0 | -(center.y ));
         }
         locContext.stroke();
     },
@@ -338,7 +338,6 @@ cc.DrawingPrimitiveCanvas = cc.Class.extend(/** @lends cc.DrawingPrimitiveCanvas
     drawStar:function (ctx, radius, color) {
         var wrapper = ctx || this._renderContext;
         var context = wrapper.getContext();
-        radius *= cc.view.getScaleX();
         var colorStr = "rgba(" + (0 | color.r) + "," + (0 | color.g) + "," + (0 | color.b);
         wrapper.setFillStyle(colorStr + ",1)");
         //context.fillStyle = colorStr + ",1)";