From 1bd38f2b1ed1910ed9ab96711415f138f45eaf97 Mon Sep 17 00:00:00 2001 From: Horcrux Date: Sun, 17 Jan 2016 22:29:06 +0800 Subject: [PATCH] init project init project --- .editorconfig | 13 +++++++++++++ .gitignore | 2 ++ Circle.js | 39 +++++++++++++++++++++++++++++++++++++++ Ellipse.js | 40 ++++++++++++++++++++++++++++++++++++++++ Line.js | 37 +++++++++++++++++++++++++++++++++++++ Polygon.js | 28 ++++++++++++++++++++++++++++ Polyline.js | 27 +++++++++++++++++++++++++++ README.md | 2 ++ Rectangle.js | 0 Svg.js | 21 +++++++++++++++++++++ lib/fillFilter.js | 8 ++++++++ package.json | 18 ++++++++++++++++++ 12 files changed, 235 insertions(+) create mode 100644 .editorconfig create mode 100644 .gitignore create mode 100644 Circle.js create mode 100644 Ellipse.js create mode 100644 Line.js create mode 100644 Polygon.js create mode 100644 Polyline.js create mode 100644 README.md create mode 100644 Rectangle.js create mode 100644 Svg.js create mode 100644 lib/fillFilter.js create mode 100644 package.json diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000..7d81490b --- /dev/null +++ b/.editorconfig @@ -0,0 +1,13 @@ +# EditorConfig is awesome: http://EditorConfig.org + +# top-most EditorConfig file +root = true + +# Unix-style newlines with a newline ending every file +[*] +charset = utf-8 +end_of_line = lf +indent_style = space +indent_size = 4 +trim_trailing_whitespace = true +insert_final_newline = true diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..1b87fb32 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +/node_modules +.idea/ diff --git a/Circle.js b/Circle.js new file mode 100644 index 00000000..e48ba40e --- /dev/null +++ b/Circle.js @@ -0,0 +1,39 @@ +import React, { + Component, + PropTypes +} from 'react-native'; +import { + Surface, + Shape +} from 'ReactNativeART'; +import fillFilter from './lib/fillFilter'; + +let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired; +class Circle extends Component{ + static displayName = 'Polygon'; + static propTypes = { + cx: propType, + cy: propType, + r: propType + }; + render() { + let {cx, cy, r} = this.props; + let d = ` + M ${cx} ${cy} + m -${r}, 0 + a ${r}, ${r} 0 1, 0 ${r * 2}, 0 + a ${r}, ${r} 0 1, 0 ${-r * 2}, 0 + Z + `; + return ; + } +} + +export default Circle; diff --git a/Ellipse.js b/Ellipse.js new file mode 100644 index 00000000..dc73a921 --- /dev/null +++ b/Ellipse.js @@ -0,0 +1,40 @@ +import React, { + Component, + PropTypes +} from 'react-native'; +import { + Surface, + Shape +} from 'ReactNativeART'; +import fillFilter from './lib/fillFilter'; + +let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired; +class Ellipse extends Component{ + static displayName = 'Polygon'; + static propTypes = { + cx: propType, + cy: propType, + rx: propType, + ry: propType + }; + render() { + let {cx, cy, rx, ry} = this.props; + let d = ` + M ${cx - rx} ${cy} + a ${rx}, ${ry} 0 1, 0 ${rx * 2}, 0 + a ${rx}, ${ry} 0 1, 0 ${-rx * 2}, 0 + Z + `; + return ; + } +} + +export default Ellipse; diff --git a/Line.js b/Line.js new file mode 100644 index 00000000..30a55e4d --- /dev/null +++ b/Line.js @@ -0,0 +1,37 @@ +import React, { + Component, + PropTypes +} from 'react-native'; +import { + Surface, + Shape, + Group +} from 'ReactNativeART'; + + +let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired; + +class Line extends Component{ + static displayName = 'Line'; + static propTypes = { + x1: propType, + x2: propType, + y1: propType, + y2: propType + }; + render() { + let {x1,y1,x2,y2} = this.props; + let d = `M${x1},${y1}L${x2},${y2}Z`; + return ; + } +} + +export default Line; diff --git a/Polygon.js b/Polygon.js new file mode 100644 index 00000000..0942915f --- /dev/null +++ b/Polygon.js @@ -0,0 +1,28 @@ +import React, { + Component, + PropTypes +} from 'react-native'; +import { + Surface, + Shape, + Group +} from 'ReactNativeART'; +import fillFilter from './lib/fillFilter'; + +class Polygon extends Component{ + static displayName = 'Polygon'; + static propTypes = { + points: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired + }; + render() { + let props = this.props; + let d = 'M' + props.points.trim().replace(/\s+/g, 'L') + 'z'; + return ; + } +} +export default Polygon; diff --git a/Polyline.js b/Polyline.js new file mode 100644 index 00000000..d6e35622 --- /dev/null +++ b/Polyline.js @@ -0,0 +1,27 @@ +import React, { + Component, + PropTypes +} from 'react-native'; +import { + Surface, + Shape +} from 'ReactNativeART'; + + +class Polyline extends Component{ + static displayName = 'Polyline'; + static propTypes = { + points: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired + }; + render() { + let props = this.props; + let d = 'M' + props.points.trim().replace(/\s+/g, 'L'); + return ; + } +} +export default Polyline; diff --git a/README.md b/README.md new file mode 100644 index 00000000..3ac7bb1e --- /dev/null +++ b/README.md @@ -0,0 +1,2 @@ +### react-native-art-svg + diff --git a/Rectangle.js b/Rectangle.js new file mode 100644 index 00000000..e69de29b diff --git a/Svg.js b/Svg.js new file mode 100644 index 00000000..59938f78 --- /dev/null +++ b/Svg.js @@ -0,0 +1,21 @@ +import Circle from './Circle'; +import Ellipse from './Ellipse'; +import Polygon from './Polygon'; +import Polyline from './Polyline'; +import { + Surface, + Shape, + Group +} from 'ReactNativeART'; + +export { + Surface as Svg, + Circle, + Ellipse, + Group, + Shape as Path, + Polygon, + Polyline +}; + +export default Surface; diff --git a/lib/fillFilter.js b/lib/fillFilter.js new file mode 100644 index 00000000..0f948796 --- /dev/null +++ b/lib/fillFilter.js @@ -0,0 +1,8 @@ +let noneFill = ['transparent', 'none']; +export default function (props) { + let fill = props.fill; + if (noneFill.indexOf('fill') !== -1) { + return null; + } + return fill; +} diff --git a/package.json b/package.json new file mode 100644 index 00000000..99d09df8 --- /dev/null +++ b/package.json @@ -0,0 +1,18 @@ +{ + "version": "1.0.0", + "name": "react-native-art-svg", + "description": "react native svg library based on `ART`", + "repository": { + "type": "git", + "url": "git@github.com:magicismight/react-native-art-svg.git" + }, + "main": "./Svg.js", + "keywords": [ + "react-component", + "react-native", + "ios", + "android", + "svg", + "art" + ] +}