fix clip bug

Example/examples/Clipping.js

@@ -49,6 +49,14 @@ class ClipPathAttr extends Component{
                 height="100"
                 fill="url(#grad)"
                 clipPath="M50,5L20,99L95,39L5,39L80,99z"
+                onStartShouldSetResponder={() => alert("1111111")}
+            />
+            <Rect
+                x="40%"
+                y="0"
+                width="20%"
+                height="20%"
+                fill="pink"
             />
         </Svg>;
     }

Example/main.js

@@ -1,8 +1,10 @@
 /**
- * Sample React Native App
+ * Sample React Native App for react-native-svg library
- * https://github.com/facebook/react-native
+ * https://github.com/magicismight/react-native-svg/tree/master/Example
  */
 'use strict';
+import React, {Component} from 'react';
+
 import {
     AppRegistry,
     StyleSheet,
@@ -15,8 +17,6 @@ import {
     Easing
 } from 'react-native';
 
-import React, {Component} from 'react';
-
 import {
     Svg,
     Circle,
@@ -108,7 +108,7 @@ const styles = StyleSheet.create({
 
 const names = ['Svg', 'Stroking', 'Path', 'Line', 'Rect', 'Polygon', 'Polyline', 'Circle', 'Ellipse', 'G', 'Text', 'Use', 'Symbol', 'Gradients', 'Clipping', 'Image'];
 
-class ArtSvgExample extends Component {
+class SvgExample extends Component {
     constructor() {
         super(...arguments);
         this.state = {
@@ -239,7 +239,7 @@ class ArtSvgExample extends Component {
                 </View>
             </Animated.Modal>
             <Text style={styles.welcome}>
-                SVG by ART!
+                SVG library for React Native
             </Text>
             <ScrollView
                 style={styles.content}
@@ -251,4 +251,4 @@ class ArtSvgExample extends Component {
     }
 }
 
-AppRegistry.registerComponent('ArtSvgExample', () => ArtSvgExample);
+AppRegistry.registerComponent('ArtSvgExample', () => SvgExample);

android/src/main/java/com/horcrux/svg/RNSVGEllipseShadowNode.java

@@ -63,8 +63,6 @@ public class RNSVGEllipseShadowNode extends RNSVGPathShadowNode {
     @Override
     protected Path getPath(Canvas canvas, Paint paint) {
         Path path = new Path();
-
-        // draw ellipse
         float cx = PropHelper.fromPercentageToFloat(mCx, mWidth, 0, mScale);
         float cy = PropHelper.fromPercentageToFloat(mCy, mHeight, 0, mScale);
         float rx = PropHelper.fromPercentageToFloat(mRx, mWidth, 0, mScale);

android/src/main/java/com/horcrux/svg/RNSVGGroupShadowNode.java

@@ -36,25 +36,26 @@ public class RNSVGGroupShadowNode extends RNSVGVirtualNode {
     public void draw(Canvas canvas, Paint paint, float opacity) {
         opacity *= mOpacity;
         if (opacity > MIN_OPACITY_FOR_DRAW) {
-            saveAndSetupCanvas(canvas);
+            int count = saveAndSetupCanvas(canvas);
             clip(canvas, paint);
             RNSVGSvgViewShadowNode svg = getSvgShadowNode();
 
             if (mAsClipPath == null) {
                 for (int i = 0; i < getChildCount(); i++) {
                     RNSVGVirtualNode child = (RNSVGVirtualNode) getChildAt(i);
-                    child.setDimensions(mWidth, mHeight);
+                    child.setupDimensions(canvas);
                     child.draw(canvas, paint, opacity);
                     //child.markUpdateSeen();
 
-                    if (child.isTouchable() && !svg.touchable) {
+                    if (child.isTouchable()) {
-                        svg.touchable = true;
+                        svg.enableTouchEvents();
                     }
                 }
             } else {
                 defineClipPath(getPath(canvas, paint), mAsClipPath);
             }
-            restoreCanvas(canvas);
+
+            restoreCanvas(canvas, count);
         }
     }
 
@@ -64,6 +65,7 @@ public class RNSVGGroupShadowNode extends RNSVGVirtualNode {
 
         for (int i = 0; i < getChildCount(); i++) {
             RNSVGVirtualNode child = (RNSVGVirtualNode) getChildAt(i);
+            child.setupDimensions(canvas);
             path.addPath(child.getPath(canvas, paint));
         }
         return path;
@@ -71,8 +73,7 @@ public class RNSVGGroupShadowNode extends RNSVGVirtualNode {
 
     @Override
     public int hitTest(Point point, View view) {
-        // TODO: run hit test only if necessary
+
-        // TODO: ClipPath never run hitTest
         if (mAsClipPath != null) {
             return -1;
         }

android/src/main/java/com/horcrux/svg/RNSVGImageShadowNode.java

@@ -16,6 +16,7 @@ import android.graphics.BitmapFactory;
 import android.graphics.Canvas;
 import android.graphics.Color;
 import android.graphics.Paint;
+import android.graphics.Path;
 import android.graphics.PorterDuff;
 import android.graphics.Rect;
 import android.graphics.RectF;
@@ -24,8 +25,10 @@ import android.os.AsyncTask;
 import android.provider.MediaStore;
 import android.util.Log;
 
+import com.facebook.common.logging.FLog;
 import com.facebook.common.util.UriUtil;
 import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.common.ReactConstants;
 import com.facebook.react.uimanager.annotations.ReactProp;
 import java.net.URL;
 
@@ -40,10 +43,11 @@ public class RNSVGImageShadowNode extends RNSVGPathShadowNode {
     private String mY;
     private String mW;
     private String mH;
-    private ReadableMap mSrc;
     private Uri mUri;
     private Bitmap mBitmap;
     private boolean mLocalImage;
+    private boolean mLoading;
+
     private class BitmapWorkerTask extends AsyncTask<Integer, Void, Bitmap> {
         private final Canvas mCanvas;
         private final Paint mPaint;
@@ -53,7 +57,7 @@ public class RNSVGImageShadowNode extends RNSVGPathShadowNode {
             mCanvas = canvas;
             mPaint = paint;
             mSvgShadowNode = node;
-            mSvgShadowNode.mBitmapCount++;
+            mSvgShadowNode.increaseCounter();
         }
 
         // Decode image in background.
@@ -70,6 +74,7 @@ public class RNSVGImageShadowNode extends RNSVGPathShadowNode {
                     bitmap = BitmapFactory.decodeStream(url.openConnection().getInputStream());
                 }
             } catch (Exception e) {
+                FLog.w(ReactConstants.TAG, "RNSVG: load Image load failed!:" + e.getMessage());
             }
 
             return bitmap;
@@ -80,10 +85,10 @@ public class RNSVGImageShadowNode extends RNSVGPathShadowNode {
         protected void onPostExecute(@Nullable Bitmap bitmap) {
             if (bitmap != null) {
                 mBitmap = bitmap;
+                mSvgShadowNode.decreaseCounter();
                 mCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
                 mPaint.reset();
-                mSvgShadowNode.mBitmapCount--;
+                mSvgShadowNode.drawChildren(mCanvas, mPaint);
-                mSvgShadowNode.drawChildren(mCanvas, mPaint, mWidth, mHeight);
             }
         }
     }
@@ -114,8 +119,6 @@ public class RNSVGImageShadowNode extends RNSVGPathShadowNode {
 
     @ReactProp(name = "src")
     public void setSrc(@Nullable ReadableMap src) {
-        mSrc = src;
-
         if (src != null) {
             String uri = src.getString("uri");
             if (uri != null) {
@@ -143,24 +146,28 @@ public class RNSVGImageShadowNode extends RNSVGPathShadowNode {
     public void draw(Canvas canvas, Paint paint, float opacity) {
         RNSVGSvgViewShadowNode node = getSvgShadowNode();
         if (mBitmap != null) {
-            // TODO: fixme
+            int count = saveAndSetupCanvas(canvas);
-            // clip(canvas, paint);
+
+            clip(canvas, paint);
             float x = PropHelper.fromPercentageToFloat(mX, mWidth, 0, mScale);
             float y = PropHelper.fromPercentageToFloat(mY, mHeight, 0, mScale);
             float w = PropHelper.fromPercentageToFloat(mW, mWidth, 0, mScale);
             float h = PropHelper.fromPercentageToFloat(mH, mHeight, 0, mScale);
             canvas.drawBitmap(mBitmap, null, new Rect((int) x, (int) y, (int) (x + w), (int)(y + h)), null);
 
-            if (node.mBitmapCount == 0) {
+            restoreCanvas(canvas, count);
+            markUpdateSeen();
+
+            if (node.isCounterEmpty()) {
                 mBitmap.recycle();
             }
-        } else {
+        } else if (!mLoading) {
+            mLoading = true;
             loadBitmap(getResourceDrawableId(getThemedContext(), null), canvas, paint, node);
         }
     }
 
     public void loadBitmap(int resId, Canvas canvas, Paint paint, RNSVGSvgViewShadowNode node) {
-
         BitmapWorkerTask task = new BitmapWorkerTask(canvas, paint, node);
         task.execute(resId);
     }

android/src/main/java/com/horcrux/svg/RNSVGLineShadowNode.java

@@ -68,7 +68,6 @@ public class RNSVGLineShadowNode extends RNSVGPathShadowNode {
     @Override
     protected Path getPath(Canvas canvas, Paint paint) {
         Path path = new Path();
-
         float x1 = PropHelper.fromPercentageToFloat(mX1, mWidth, 0, mScale);
         float y1 = PropHelper.fromPercentageToFloat(mY1, mHeight, 0, mScale);
         float x2 = PropHelper.fromPercentageToFloat(mX2, mWidth, 0, mScale);

android/src/main/java/com/horcrux/svg/RNSVGPathShadowNode.java

@@ -61,14 +61,12 @@ public class RNSVGPathShadowNode extends RNSVGVirtualNode {
     private Path.FillType mFillRule = Path.FillType.WINDING;
     private boolean mFillRuleSet;
     protected Path mPath;
-    private boolean mPathSet;
     private float[] mD;
 
 
     @ReactProp(name = "d")
     public void setPath(@Nullable ReadableArray shapePath) {
         mD = PropHelper.toFloatArray(shapePath);
-        mPathSet = true;
         setupPath();
         markUpdated();
     }
@@ -169,8 +167,9 @@ public class RNSVGPathShadowNode extends RNSVGVirtualNode {
     @Override
     public void draw(Canvas canvas, Paint paint, float opacity) {
         opacity *= mOpacity;
+
         if (opacity > MIN_OPACITY_FOR_DRAW) {
-            saveAndSetupCanvas(canvas);
+            int count = saveAndSetupCanvas(canvas);
             if (mPath == null) {
                 throw new JSApplicationIllegalArgumentException(
                     "Paths should have a valid path (d) prop");
@@ -185,17 +184,17 @@ public class RNSVGPathShadowNode extends RNSVGVirtualNode {
                 canvas.drawPath(mPath, paint);
             }
 
-            restoreCanvas(canvas);
+            restoreCanvas(canvas, count);
         }
         markUpdateSeen();
     }
 
     private void setupPath() {
         // init path after both fillRule and path have been set
-        if (mFillRuleSet && mPathSet) {
+        if (mFillRuleSet && mD != null) {
-            mPath = getPath(null, null);
+            mPath = new Path();
-            RectF box = new RectF();
+            mPath.setFillType(mFillRule);
-            mPath.computeBounds(box, true);
+            super.createPath(mD, mPath);
         }
     }
 
@@ -327,28 +326,30 @@ public class RNSVGPathShadowNode extends RNSVGVirtualNode {
 
     }
 
-    protected Path getPath(@Nullable Canvas canvas, @Nullable Paint paint) {
+    @Override
-        Path path = new Path();
+    protected Path getPath(Canvas canvas, Paint paint) {
-        path.setFillType(mFillRule);
+        return mPath;
-        super.createPath(mD, path);
-        return path;
     }
 
     @Override
     public int hitTest(Point point, View view) {
         Bitmap bitmap = Bitmap.createBitmap(
-            (int) mWidth,
+            mWidth,
-            (int) mHeight,
+            mHeight,
             Bitmap.Config.ARGB_8888);
 
         Canvas canvas = new Canvas(bitmap);
+        if (mMatrix != null) {
             canvas.concat(mMatrix);
+        }
 
         Paint paint = new Paint();
         clip(canvas, paint);
         setHitTestFill(paint);
         canvas.drawPath(mPath, paint);
 
+
+
         if (setHitTestStroke(paint)) {
             canvas.drawPath(mPath, paint);
         }

android/src/main/java/com/horcrux/svg/RNSVGRectShadowNode.java

@@ -87,7 +87,6 @@ public class RNSVGRectShadowNode extends RNSVGPathShadowNode {
     @Override
     protected Path getPath(Canvas canvas, Paint paint) {
         Path path = new Path();
-
         float x = PropHelper.fromPercentageToFloat(mX, mWidth, 0, mScale);
         float y = PropHelper.fromPercentageToFloat(mY, mHeight, 0, mScale);
         float w = PropHelper.fromPercentageToFloat(mW, mWidth, 0, mScale);

android/src/main/java/com/horcrux/svg/RNSVGSvgViewShadowNode.java

@@ -14,7 +14,6 @@ import android.graphics.Canvas;
 import android.graphics.Color;
 import android.graphics.Paint;
 import android.graphics.Point;
-import android.graphics.PorterDuff;
 import android.util.Log;
 import android.view.ViewGroup;
 
@@ -25,9 +24,10 @@ import com.facebook.react.uimanager.UIViewOperationQueue;
  * Shadow node for RNSVG virtual tree root - RNSVGSvgView
  */
 public class RNSVGSvgViewShadowNode extends LayoutShadowNode {
-    public boolean touchable = false;
 
-    public int mBitmapCount = 0;
+    private int mCounter = 0;
+
+    private boolean mTouchable = false;
 
     @Override
     public void onCollectExtraUpdates(UIViewOperationQueue uiUpdater) {
@@ -36,35 +36,39 @@ public class RNSVGSvgViewShadowNode extends LayoutShadowNode {
     }
 
     private Object drawOutput() {
-        float width = (int) getLayoutWidth();
-        float height = (int) getLayoutHeight();
         Bitmap bitmap = Bitmap.createBitmap(
-            (int) width,
+            (int) getLayoutWidth(),
-            (int) height,
+            (int) getLayoutHeight(),
             Bitmap.Config.ARGB_8888);
         Canvas canvas = new Canvas(bitmap);
         Paint paint = new Paint();
 
-        drawChildren(canvas, paint, width, height);
+        drawChildren(canvas, paint);
 
         return bitmap;
     }
 
-    public void drawChildren(Canvas canvas, Paint paint, float width, float height) {
+    public void drawChildren(Canvas canvas, Paint paint) {
         for (int i = 0; i < getChildCount(); i++) {
             RNSVGVirtualNode child = (RNSVGVirtualNode) getChildAt(i);
-            child.setDimensions(width, height);
+            child.setupDimensions(canvas);
             child.draw(canvas, paint, 1f);
             //child.markUpdateSeen();
 
-            if (child.isTouchable() && !touchable) {
+            if (child.isTouchable() && !mTouchable) {
-                touchable = true;
+                mTouchable = true;
             }
         }
     }
 
+    public void enableTouchEvents() {
+        if (!mTouchable) {
+            mTouchable = true;
+        }
+    }
+
     public int hitTest(Point point, ViewGroup view) {
-        if (!touchable) {
+        if (!mTouchable) {
             return -1;
         }
 
@@ -79,4 +83,16 @@ public class RNSVGSvgViewShadowNode extends LayoutShadowNode {
 
         return viewTag;
     }
+
+    public void increaseCounter() {
+        mCounter++;
+    }
+
+    public void decreaseCounter() {
+        mCounter--;
+    }
+
+    public boolean isCounterEmpty() {
+        return mCounter == 0;
+    }
 }

android/src/main/java/com/horcrux/svg/RNSVGTextShadowNode.java

@@ -83,7 +83,7 @@ public class RNSVGTextShadowNode extends RNSVGPathShadowNode {
         }
 
         // only set up the canvas if we have something to draw
-        saveAndSetupCanvas(canvas);
+        int count = saveAndSetupCanvas(canvas);
         clip(canvas, paint);
         RectF box = getBox(paint, text);
 
@@ -94,7 +94,7 @@ public class RNSVGTextShadowNode extends RNSVGPathShadowNode {
             drawText(canvas, paint, text);
         }
 
-        restoreCanvas(canvas);
+        restoreCanvas(canvas, count);
         markUpdateSeen();
     }
 
@@ -197,14 +197,14 @@ public class RNSVGTextShadowNode extends RNSVGPathShadowNode {
     @Override
     public int hitTest(Point point, View view) {
         Bitmap bitmap = Bitmap.createBitmap(
-            (int) mWidth,
+            mWidth,
-            (int) mHeight,
+            mHeight,
             Bitmap.Config.ARGB_8888);
 
         Canvas canvas = new Canvas(bitmap);
+        if (mMatrix != null) {
             canvas.concat(mMatrix);
-
+        }
-        // todo clip detect
 
         String text = formatText();
         if (text == null) {

android/src/main/java/com/horcrux/svg/RNSVGVirtualNode.java

@@ -39,7 +39,7 @@ import java.util.Map;
  * indirectly for {@link RNSVGTextShadowNode}.
  */
 public abstract class RNSVGVirtualNode extends LayoutShadowNode {
-    protected static Map<String, Path> CLIP_PATHS = new HashMap<>();
+    private static final Map<String, Path> CLIP_PATHS = new HashMap<>();
 
     protected static final float MIN_OPACITY_FOR_DRAW = 0.01f;
 
@@ -64,10 +64,9 @@ public abstract class RNSVGVirtualNode extends LayoutShadowNode {
     private int mClipRule;
     private boolean mClipRuleSet;
     private boolean mClipDataSet;
-
-    protected float mWidth = 0;
-    protected float mHeight = 0;
     protected boolean mTouchable;
+    protected int mWidth;
+    protected int mHeight;
 
     public RNSVGVirtualNode() {
         mScale = DisplayMetricsHolder.getWindowDisplayMetrics().density;
@@ -84,11 +83,14 @@ public abstract class RNSVGVirtualNode extends LayoutShadowNode {
      *
      * @param canvas the canvas to set up
      */
-    protected final void saveAndSetupCanvas(Canvas canvas) {
+    protected final int saveAndSetupCanvas(Canvas canvas) {
+        int count = canvas.getSaveCount();
         canvas.save();
         if (mMatrix != null) {
             canvas.concat(mMatrix);
         }
+
+        return count;
     }
 
     /**
@@ -97,8 +99,8 @@ public abstract class RNSVGVirtualNode extends LayoutShadowNode {
      *
      * @param canvas the canvas to restore
      */
-    protected void restoreCanvas(Canvas canvas) {
+    protected void restoreCanvas(Canvas canvas, int count) {
-        canvas.restore();
+        canvas.restoreToCount(count);
     }
 
     @ReactProp(name = "clipPath")
@@ -274,11 +276,6 @@ public abstract class RNSVGVirtualNode extends LayoutShadowNode {
         }
     }
 
-    public void setDimensions(float width, float height) {
-        mWidth = width;
-        mHeight = height;
-    }
-
     abstract public int hitTest(Point point, View view);
 
     protected void defineClipPath(Path clipPath, String clipPathId) {
@@ -296,11 +293,21 @@ public abstract class RNSVGVirtualNode extends LayoutShadowNode {
         ReactShadowNode parent = getParent();
 
         while (!(parent instanceof RNSVGSvgViewShadowNode)) {
+            if (parent == null) {
+                return null;
+            } else {
                 parent = parent.getParent();
             }
+        }
         return (RNSVGSvgViewShadowNode)parent;
     }
 
+    protected void setupDimensions(Canvas canvas) {
+        mWidth = canvas.getWidth();
+        mHeight = canvas.getHeight();
+    }
+
+
     protected void finalize() {
         if (mDefinedClipPathId != null) {
             CLIP_PATHS.remove(mDefinedClipPathId);