remove useless double stops

silverspace · Apr 21, 2016 · 936a10d · 936a10d
1 parent 67e66aa
commit 936a10d
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 62 deletions.
diff --git a/Example/examples/Gradients.js b/Example/examples/Gradients.js
@@ -9,7 +9,8 @@ import Svg, {
     Stop,
     Ellipse,
     Circle,
-    Text
+    Text,
+    Rect
 } from 'react-native-art-svg';
 
 class LinearGradientHorizontal extends Component{
@@ -87,6 +88,11 @@ class RadialGradientExample  extends Component{
                         stopColor="#000"
                         stopOpacity="1"
                     />
+                    <Stop
+                        offset="0.7"
+                        stopColor="#0f0"
+                        stopOpacity="1"
+                    />
                     <Stop
                         offset="1"
                         stopColor="#83a"
@@ -178,6 +184,32 @@ class FillGradientWithOpacity extends Component{
     }
 }
 
+class FillGradientInRect extends Component{
+    static title = 'Fill a radial gradient inside a rect';
+    render() {
+        return <Svg
+            height="150"
+            width="300"
+        >
+            <Defs>
+                <RadialGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+                    <Stop
+                        offset="0%"
+                        stopColor="#fff"
+                        stopOpacity="1"
+                    />
+                    <Stop
+                        offset="100%"
+                        stopColor="#00f"
+                        stopOpacity="1"
+                    />
+                </RadialGradient>
+            </Defs>
+            <Rect x="0" y="0" width="300" height="150" fill="url(#grad)" />
+        </Svg>;
+    }
+}
+
 const icon = <Svg
     height="20"
     width="20"
@@ -199,7 +231,8 @@ const samples = [
     RadialGradientExample,
     RadialGradientPercent,
     RadialGradientPart,
-    FillGradientWithOpacity
+    FillGradientWithOpacity,
+    FillGradientInRect
 ];
 
 export {

diff --git a/README.md b/README.md
@@ -1,40 +1,23 @@
-### react-native-art-svg
+### react-native-svg
 
 ------------------------
 
-`react-native-art-svg` is built to provide a SVG interface to react native on both iOS and Android which is based on *ART*
+`react-native-svg` is built to provide a SVG interface to react native on both iOS and Android
 
 #### Features
 
 1. Supports most of SVG elements and properties(Rect, Circle, Line, Polyline, Polygon, G ...).
-2. 100% based on ReactNative`s ART library
-3. Easy to convert SVG code into ReactNative code.
+2. Easy to convert SVG code into ReactNative code.
 
-![example](./screenShoots/art-svg.gif)
 
-#### Install
-
-`npm install react-native-art-svg`
-
-##### On iOS we should add import `ART` library into your project
-
-To add ART.xcodeproj find the file located in react-native/Libraries/ART/ART.xcodeproj and just drag it over to the Libraries section in XCode. That should look like so
-
-![Add ART.xcodeproj to Libraries](./screenShoots/addXcodeproj.png)
-
-Next we’ll link the binary.
 
-With the root project selected on the left, select `Build Phases` from the center view. There will be a section called “Link Binary With Libraries”, expand it, press the + and select `libART.a`
-
-Like so
-
-![Link binary](./screenShoots/linkBinary.png)
-
-([Getting react art running on react native](http://browniefed.com/blog/2015/05/03/getting-react-art-running-on-react-native/))
+#### Install
 
-##### On android
+```
+npm install react-native-svg --save
+rnpm link react-native-svg
+```
 
-react-native\`s `ART` for android is shipped within [email protected]
 
 #### Usage
 
@@ -57,7 +40,7 @@ import Svg,{
     Use,
     Defs,
     Stop
-} from 'react-native-art-svg';
+} from 'react-native-svg';
 
 class SvgExample extends Component {
     render() {

diff --git a/android/src/main/java/com/horcrux/svg/RNSVGPathShadowNode.java b/android/src/main/java/com/horcrux/svg/RNSVGPathShadowNode.java
@@ -204,13 +204,7 @@ protected boolean setupStrokePaint(Paint paint, float opacity) {
     private static void parseGradientStops(float[] value, int stopsCount, float[] stops, int[] stopsColors, int startColorsPosition) {
         int startStops = value.length - stopsCount;
         for (int i = 0; i < stopsCount; i++) {
-            int half = stopsCount / 2;
-
-            // stops keep in a order like this
-            // 0 1 2 3 4 9 8 7 6 5
-
-            stops[i] = value[startStops + (i < half ? i : (half + (stopsCount - i) - 1))];
-
+            stops[i] = value[startStops + i];
             stopsColors[i] = Color.argb(
                     (int) (value[startColorsPosition + i * 4 + 3] * 255),
                     (int) (value[startColorsPosition + i * 4] * 255),

diff --git a/elements/LinearGradient.js b/elements/LinearGradient.js
@@ -8,7 +8,7 @@ import stopsOpacity from '../lib/stopsOpacity';
 import numberProp from '../lib/numberProp';
 import Gradient from './Gradient';
 import {LINEAR_GRADIENT} from '../lib/extract/extractBrush';
-import {insertColorStopsIntoArray} from '../lib/insertProcessor';
+import insertColorStopsIntoArray from '../lib/insertProcessor';
 
 function LinearGradientGenerator(stops, x1, y1, x2, y2) {
     var type = LINEAR_GRADIENT;

diff --git a/elements/RadialGradient.js b/elements/RadialGradient.js
@@ -7,7 +7,7 @@ import stopsOpacity from '../lib/stopsOpacity';
 import numberProp from '../lib/numberProp';
 import Gradient from './Gradient';
 import {RADIAL_GRADIENT} from '../lib/extract/extractBrush';
-import {insertDoubleColorStopsIntoArray} from '../lib/insertProcessor';
+import insertColorStopsIntoArray from '../lib/insertProcessor';
 
 
 function RadialGradientGenerator(stops, fx, fy, rx, ry, cx, cy) {
@@ -33,7 +33,7 @@ function RadialGradientGenerator(stops, fx, fy, rx, ry, cx, cy) {
     // color stops. Ideally this API would become more restrictive so that this
     // extra work isn't needed.
     var brushData = [RADIAL_GRADIENT, +fx, +fy, +rx * 2, +ry * 2, +cx, +cy];
-    insertDoubleColorStopsIntoArray(stops, brushData, 7);
+    insertColorStopsIntoArray(stops, brushData, 7, 0.5);
     this._brush = brushData;
 }
 

diff --git a/ios/RNSVGNode.m b/ios/RNSVGNode.m
@@ -54,14 +54,14 @@ - (void)renderTo:(CGContextRef)context
         opacity = 1;
         transparent = YES;
     }
-    
+
     // This needs to be painted on a layer before being composited.
     CGContextSaveGState(context);
     CGContextConcatCTM(context, self.transform);
     CGContextSetAlpha(context, opacity);
     if (transparent) {
         CGContextBeginTransparencyLayer(context, NULL);
-        
+
     }
     [self renderLayerTo:context];
     if (transparent) {

diff --git a/lib/insertProcessor.js b/lib/insertProcessor.js
@@ -9,7 +9,7 @@ function insertColorIntoArray(color, targetArray, atIndex) {
     targetArray[atIndex + 3] = c[3];
 }
 
-function insertColorsIntoArray(stops, targetArray, atIndex, reverse) {
+function insertColorsIntoArray(stops, targetArray, atIndex) {
     let i = 0;
 
     if ('length' in stops) {
@@ -19,9 +19,6 @@ function insertColorsIntoArray(stops, targetArray, atIndex, reverse) {
         }
     } else {
         let sorted = _.sortBy(_.map(stops, (value, key) => ({key, value})), 'key');
-        if (reverse) {
-            sorted.reverse();
-        }
 
         sorted.forEach(({value:stop}) => {
             insertColorIntoArray(stop, targetArray, atIndex + i * 4);
@@ -31,25 +28,25 @@ function insertColorsIntoArray(stops, targetArray, atIndex, reverse) {
     return atIndex + i * 4;
 }
 
-function insertColorStopsIntoArray(stops, targetArray, atIndex) {
+function insertColorStopsIntoArray(stops, targetArray, atIndex, multi = 1) {
     let lastIndex = insertColorsIntoArray(stops, targetArray, atIndex, false);
-    insertOffsetsIntoArray(stops, targetArray, lastIndex, 1, false);
+    insertOffsetsIntoArray(stops, targetArray, lastIndex, multi, false);
 }
 
-function insertOffsetsIntoArray(stops, targetArray, atIndex, multi, reverse) {
+function insertOffsetsIntoArray(stops, targetArray, atIndex, multi) {
     let offsetNumber;
     let i = 0;
     let arr = [];
     if ('length' in stops) {
         while (i < stops.length) {
             offsetNumber = i / (stops.length - 1) * multi;
-            targetArray[atIndex + i] = reverse ? 1 - offsetNumber : offsetNumber;
+            targetArray[atIndex + i] = offsetNumber;
             i++;
         }
     } else {
         _.forEach(stops, (stop, offsetString) => {
             offsetNumber = (+offsetString) * multi;
-            arr.push(reverse ? 1 - offsetNumber : offsetNumber);
+            arr.push(offsetNumber);
             i++;
         });
         arr.sort();
@@ -58,14 +55,5 @@ function insertOffsetsIntoArray(stops, targetArray, atIndex, multi, reverse) {
     return atIndex + i;
 }
 
-function insertDoubleColorStopsIntoArray(stops, targetArray, atIndex) {
-    let lastIndex = insertColorsIntoArray(stops, targetArray, atIndex, false);
-    lastIndex = insertColorsIntoArray(stops, targetArray, lastIndex, true);
-    lastIndex = insertOffsetsIntoArray(stops, targetArray, lastIndex, 0.5, false);
-    insertOffsetsIntoArray(stops, targetArray, lastIndex, 0.5, true);
-}
 
-export {
-    insertDoubleColorStopsIntoArray,
-    insertColorStopsIntoArray
-}
+export default insertColorStopsIntoArray;
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
-    "version": "1.1.1",
-    "name": "react-native-art-svg",
-    "description": "react native svg library based on `ART`",
+    "version": "1.0.0",
+    "name": "react-native-svg",
+    "description": "react native svg library",
     "repository": {
         "type": "git",
         "url": "https://github.com/magicismight/react-native-art-svg"