apply common stroke processor to elements

apply common stroke processor to elements

Example/examples.js

@@ -8,6 +8,7 @@ import * as Polyline from './examples/Polyline';
 import * as Path from './examples/Path';
 import * as Text from './examples/Text';
 import * as G from './examples/G';
+import * as Stroking from './examples/Stroking';
 
 export {
     Svg,
@@ -19,5 +20,6 @@ export {
     Polyline,
     Path,
     Text,
+    Stroking,
     G
 };

Example/examples/Stroking.js

@@ -3,24 +3,58 @@ import React, {
 } from 'react-native';
 
 import Svg, {
-    Line
+    Path,
+    G
 } from 'react-native-art-svg';
 
-class LineExample extends Component{
+class StrokeExample extends Component{
-    static title = 'Line';
+    static title = 'The stroke property defines the color of a line, text or outline of an element';
     render() {
-        return <Svg
+        return <Svg height="80" width="225">
-            height="100"
+            <G fill="none">
-            width="100"
+                <Path stroke="red" d="M5 20 l215 0" />
-        >
+                <Path stroke="black" d="M5 40 l215 0" />
-            <Line
+                <Path stroke="blue" d="M5 60 l215 0" />
-                x1="0"
+            </G>
-                y1="0"
+        </Svg>;
-                x2="100"
+    }
-                y2="100"
+}
-                stroke="red"
+
-                strokeWidth="2"
+class StrokeWidth extends Component{
-            />
+    static title = 'The stroke property defines the color of a line, text or outline of an element';
+    render() {
+        return <Svg height="80" width="225">
+            <G fill="none" stroke="black">
+                <Path strokeWidth="2" d="M5 20 l215 0" />
+                <Path strokeWidth="4" d="M5 40 l215 0" />
+                <Path strokeWidth="6" d="M5 60 l215 0" />
+            </G>
+        </Svg>;
+    }
+}
+
+class StrokeLinecap extends Component{
+    static title = 'The stroke-linecap property defines different types of endings to an open path';
+    render() {
+        return <Svg height="80" width="225">
+            <G fill="none" stroke="black" strokeWidth="6">
+                <Path strokeLinecap="butt" d="M5 20 l215 0" />
+                <Path strokeLinecap="round" d="M5 40 l215 0" />
+                <Path strokeLinecap="square" d="M5 60 l215 0" />
+            </G>
+        </Svg>;
+    }
+}
+
+class StrokeDasharray  extends Component{
+    static title = 'The stroke-linecap property defines different types of endings to an open path';
+    render() {
+        return <Svg height="80" width="225">
+            <G fill="none" stroke="black" strokeWidth="4">
+                <Path strokeDasharray="5,5" d="M5 20 l215 0" />
+                <Path strokeDasharray="10,10" d="M5 40 l215 0" />
+                <Path strokeDasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
+            </G>
         </Svg>;
     }
 }
@@ -29,17 +63,14 @@ const icon = <Svg
     height="20"
     width="20"
 >
-    <Line
+    <G fill="none" stroke="black" strokeWidth="2">
-        x1="0"
+        <Path strokeDasharray="2,2" d="M0 4 h20" />
-        y1="0"
+        <Path strokeDasharray="4,4" d="M0 10 h20" />
-        x2="20"
+        <Path strokeDasharray="4,2,1,1,1,6" d="M0 19 h20" />
-        y2="20"
+    </G>
-        stroke="red"
-        strokeWidth="1"
-    />
 </Svg>;
 
-const samples = [LineExample];
+const samples = [StrokeExample, StrokeWidth, StrokeLinecap, StrokeDasharray];
 
 export {
     icon,

Example/examples/Text.js

@@ -85,6 +85,8 @@ const icon = <Svg
         fontSize="14"
         fontWeight="bold"
         textAnchor="center"
+        fill="none"
+        stroke="blue"
     >字</Text>
 </Svg>;
 

Example/main.js

@@ -107,7 +107,7 @@ const styles = StyleSheet.create({
 });
 
 
-const names = ['Svg', 'Circle', 'Ellipse', 'G', 'Text', 'Path', 'Polygon', 'Polyline', 'Line', 'Rect'];
+const names = ['Svg', 'Stroking', 'Path', 'Line', 'Rect', 'Polygon', 'Polyline', 'Circle', 'Ellipse', 'G', 'Text'];
 
 class ArtSvgExample extends Component {
     constructor() {

elements/Circle.js

@@ -3,7 +3,7 @@ import React, {
     PropTypes
 } from 'react-native';
 import Ellipse from './Ellipse';
-
+import strokeFilter from '../lib/strokeFilter';
 let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
 class Circle extends Component{
     static displayName = 'Circle';
@@ -12,9 +12,15 @@ class Circle extends Component{
         cy: propType,
         r: propType
     };
+    static defaultProps = {
+        cx: 0,
+        ct: 0
+    };
+
     render() {
         return <Ellipse
             {...this.props}
+            {...strokeFilter(this.props)}
             r={null}
             rx={this.props.r}
             ry={this.props.r}

elements/Ellipse.js

@@ -31,7 +31,7 @@ class Ellipse extends Component{
         return <Shape
             {...props}
             fill={fillFilter(props)}
-            stroke={strokeFilter(props)}
+            {...strokeFilter(props)}
             strokeCap={null}
             strokeJoin={null}
             cx={null}

elements/Line.js

@@ -31,8 +31,7 @@ class Line extends Component{
             x2={null}
             y2={null}
             fill={null}
-            stroke={strokeFilter(props)}
+            {...strokeFilter(props)}
-            strokeCap={props.strokeLinecap || props.strokeCap || 'square'}
             d={d}
         />;
     }

elements/Path.js

@@ -20,16 +20,16 @@ class Path extends Component{
         strokeLinecap: PropTypes.oneOf(['butt', 'square', 'round']),
         strokeCap: PropTypes.oneOf(['butt', 'square', 'round']),
         strokeLinejoin: PropTypes.oneOf(['miter', 'bevel', 'round']),
-        strokeJoin: PropTypes.oneOf(['miter', 'bevel', 'round'])
+        strokeJoin: PropTypes.oneOf(['miter', 'bevel', 'round']),
+        strokeDasharray: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.number)])
     };
     render() {
         let {props} = this;
+
         return <Shape
             {...props}
-            strokeCap={props.strokeLinecap || props.strokeCap || 'square'}
+            {...strokeFilter(props)}
-            strokeJoin={props.strokeLinejoin || props.strokeJoin || 'miter'}
             fill={fillFilter(props)}
-            stroke={strokeFilter(props)}
         />;
     }
 }

elements/Polygon.js

@@ -17,6 +17,8 @@ class Polygon extends Component{
         let d = 'M' + props.points.trim().replace(/\s+/g, 'L') + 'z';
         return <Path
             {...props}
+            {...strokeFilter(props)}
+            fill={fillFilter(props)}
             points={null}
             d={d}
         />;

elements/Polyline.js

@@ -22,6 +22,8 @@ class Polyline extends Component{
         let d = 'M' + props.points.trim().replace(/\s+/g, 'L');
         return <Path
             {...props}
+            {...strokeFilter(props)}
+            fill={fillFilter(props)}
             points={null}
             d={d}
         />;

elements/Rect.js

@@ -91,6 +91,8 @@ class Rect extends Component{
             ry={null}
             width={null}
             height={null}
+            {...strokeFilter(props)}
+            fill={fillFilter(props)}
             d={d}
         />;
     }

elements/Svg.js

@@ -8,7 +8,7 @@ import _ from 'lodash';
 let {
     Surface,
     Group
-    } = ART;
+} = ART;
 
 function extractViewbox({viewbox, width, height, preserveAspectRatio}) {
     if (!viewbox || !width || !height) {
@@ -77,6 +77,8 @@ class Svg extends Component{
         opacity: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
         viewbox: PropTypes.string,
         // TODO: complete other values of preserveAspectRatio
+        // http://www.justinmccandless.com/demos/viewbox/index.html
+        // http://tutorials.jenkov.com/svg/svg-viewport-view-box.html
         preserveAspectRatio: PropTypes.string // preserveAspectRatio only supports 'none' for now
     };
 
@@ -96,14 +98,14 @@ class Svg extends Component{
             ]}
             >
                 {(!scaleX || !scaleY) ? null :
-                    <Group
+                <Group
-                        x={viewbox.x}
+                    x={viewbox.x}
-                        y={viewbox.y}
+                    y={viewbox.y}
-                        scaleX={scaleX}
+                    scaleX={scaleX}
-                        scaleY={scaleY}
+                    scaleY={scaleY}
-                    >
+                >
-                        {this.props.children}
+                    {this.props.children}
-                    </Group>}
+                </Group>}
             </Surface>;
         }
 

elements/Text.js

@@ -10,6 +10,7 @@ let {
 
 import fillFilter from '../lib/fillFilter';
 import strokeFilter from '../lib/strokeFilter';
+import transformFilter from '../lib/transformFilter';
 
 const fontFamily = '"Helvetica Neue", "Helvetica", Arial';
 class Text extends Component{
@@ -32,28 +33,18 @@ class Text extends Component{
             y = props.dy ? +props.y + (+props.dy) : +props.y;
         }
 
-        let coords = props.origin ? props.origin.split(',') : [];
-
-        let originX = coords.length === 2 ? coords[0] : props.originX;
-        let originY = coords.length === 2 ? coords[1] :props.originY;
-
         return  <ARTText
             {...props}
+            {...transformFilter(props)}
+            {...strokeFilter(props)}
+            fill={fillFilter(props)}
             font={{
                 fontSize: props.fontSize || 12,
                 fontFamily: props.fontFamily || fontFamily,
                 fontWeight: props.fontWeight,
                 fontStyle: props.fontStyle
             }}
-            rotation={props.rotation || props.rotate || 0}
-            scale={props.scale || 1}
-            originX={originX}
-            originY={originY}
-            strokeCap={props.strokeLinecap || props.strokeCap || 'square'}
-            strokeJoin={props.strokeLinejoin || props.strokeJoin || 'miter'}
             alignment={props.textAnchor || props.alignment}
-            fill={fillFilter(props)}
-            stroke={strokeFilter(props)}
             x={x}
             y={y}
         />;

lib/strokeFilter.js

@@ -1,4 +1,17 @@
 import rgba from './rgba';
+
+let separator = /\s*,\s*/;
 export default function (props) {
-    return rgba(props.stroke, props.strokeOpacity);
+    let strokeDasharray = props.strokeDash || props.strokeDasharray;
+
+    if (typeof strokeDasharray === 'string') {
+        strokeDasharray = strokeDasharray.split(separator).map(dash => +dash);
+    }
+
+    return {
+        stroke: rgba(props.stroke, props.strokeOpacity),
+        strokeCap:props.strokeLinecap || props.strokeCap || 'square',
+        strokeJoin:props.strokeLinejoin || props.strokeJoin || 'miter',
+        strokeDash:strokeDasharray
+    };
 }