[android] Implement vectorEffect nonScalingStroke / non-scaling-stroke

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

@@ -56,6 +56,14 @@ abstract public class RenderableView extends VirtualView {
     private static final int FILL_RULE_EVENODD = 0;
     static final int FILL_RULE_NONZERO = 1;
 
+    // vectorEffect
+    static final int VECTOR_EFFECT_DEFAULT = 0;
+    static final int VECTOR_EFFECT_NON_SCALING_STROKE = 1;
+    static final int VECTOR_EFFECT_INHERIT = 2;
+    static final int VECTOR_EFFECT_URI = 3;
+
+    public int vectorEffect = VECTOR_EFFECT_DEFAULT;
+
     /*
     Used in mergeProperties, keep public
     */
@@ -86,6 +94,12 @@ abstract public class RenderableView extends VirtualView {
 
     private static final Pattern regex = Pattern.compile("[0-9.-]+");
 
+    @ReactProp(name = "vectorEffect", defaultInt = VECTOR_EFFECT_DEFAULT)
+    public void setVectorEffect(int vectorEffect) {
+        this.vectorEffect = vectorEffect;
+        invalidate();
+    }
+
     @ReactProp(name = "fill")
     public void setFill(@Nullable Dynamic fill) {
         if (fill == null || fill.isNull()) {
@@ -322,7 +336,14 @@ abstract public class RenderableView extends VirtualView {
                 mPath = getPath(canvas, paint);
                 mPath.setFillType(fillRule);
             }
+            boolean nonScalingStroke = vectorEffect == VECTOR_EFFECT_NON_SCALING_STROKE;
             Path path = mPath;
+            if (nonScalingStroke) {
+                Path scaled = new Path();
+                mPath.transform(canvas.getMatrix(), scaled);
+                canvas.setMatrix(null);
+                path = scaled;
+            }
 
             RectF clientRect = new RectF();
             path.computeBounds(clientRect, true);

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

@@ -45,6 +45,7 @@ import static com.facebook.react.uimanager.ViewProps.*;
 import static com.horcrux.svg.RenderableView.CAP_ROUND;
 import static com.horcrux.svg.RenderableView.FILL_RULE_NONZERO;
 import static com.horcrux.svg.RenderableView.JOIN_ROUND;
+import static com.horcrux.svg.RenderableView.VECTOR_EFFECT_DEFAULT;
 
 /**
  * ViewManager for all RNSVG views
@@ -1013,6 +1014,11 @@ class RenderableViewManager extends ViewGroupManager<VirtualView> {
         node.setStrokeLinejoin(strokeLinejoin);
     }
 
+    @ReactProp(name = "vectorEffect", defaultInt = VECTOR_EFFECT_DEFAULT)
+    public void setVectorEffect(RenderableView node, int vectorEffect) {
+        node.setVectorEffect(vectorEffect);
+    }
+
     @ReactProp(name = "matrix")
     public void setMatrix(VirtualView node, Dynamic matrixArray) {
         node.setMatrix(matrixArray);

lib/extract/extractStroke.js

@@ -14,6 +14,14 @@ const joins = {
   round: 1,
 };
 
+const vectorEffects = {
+  none: 0,
+  default: 0,
+  nonScalingStroke: 1,
+  'non-scaling-stroke': 1,
+  inherit: 2,
+};
+
 export default function extractStroke(props, styleProperties) {
   if (props.stroke != null) {
     styleProperties.push('stroke');
@@ -58,5 +66,6 @@ export default function extractStroke(props, styleProperties) {
     strokeWidth,
     strokeDashoffset: strokeDasharray ? +props.strokeDashoffset || 0 : null,
     strokeMiterlimit: parseFloat(props.strokeMiterlimit) || 4,
+    vectorEffect: vectorEffects[props.vectorEffect] || 0,
   };
 }