zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2026-05-26 04:19:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add G element

Browse Source 
Add G element
This commit is contained in:
Horcrux
2016-01-22 18:41:52 +08:00
parent 815540fc28
commit b871e0087e
11 changed files with 181 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Example/examples/Path.js
+64 -3
View File
@@ -3,7 +3,10 @@ import React, {
} from 'react-native';
import Svg, {
Path
Path,
G,
Circle,
Text
} from 'react-native-art-svg';
class PathExample extends Component{
@@ -28,7 +31,7 @@ class UnclosedPath extends Component{
width="100"
>
<Path
d="M25 10 L98 65 L70 25 L16 77 L11 30 L0 4 L90 50 L50 10 L11 22 L77 95 L20 L25"
d="M25 10 L98 65 L70 25 L16 77 L11 30 L0 4 L90 50 L50 10 L11 22 L77 95 L20 25"
fill="none"
stroke="red"
/>
@@ -36,6 +39,64 @@ class UnclosedPath extends Component{
}
}
class BezierCurve extends Component{
static title = 'The following example creates a quadratic Bézier curve, where A and C are the start and end points, B is the control point';
render() {
return <Svg
height="200"
width="225"
>
<G scale="0.5">
<Path
d="M 100 350 l 150 -300"
stroke="red"
strokeWidth="3"
fill="none"
/>
<Path
d="M 250 50 l 150 300"
stroke="red"
strokeWidth="3"
fill="none"
/>
<Path
d="M 175 200 l 150 0"
stroke="green"
strokeWidth="3"
fill="none"
/>
<Path
d="M 100 350 q 150 -300 300 0"
stroke="blue"
strokeWidth="5"
fill="none"
/>
<G
stroke="purple"
strokeWidth="3"
fill="purple"
r="3"
>
<Circle cx="100" cy="350" />
<Circle cx="250" cy="50" />
<Circle cx="400" cy="350" />
</G>
<G
fontSize="30"
fontFamily="sans-serif"
fill="black"
stroke="none"
textAnchor="middle"
>
<Text x="100" y="350" dx="-30">A</Text>
<Text x="250" y="50" dy="-10">B</Text>
<Text x="400" y="350" dx="30">C</Text>
</G>
</G>
</Svg>;
}
}
const icon = <Svg
height="20"
width="20"
@@ -47,7 +108,7 @@ const icon = <Svg
/>
</Svg>;
const samples = [PathExample, UnclosedPath];
const samples = [PathExample, UnclosedPath, BezierCurve];
export {
icon,
Example/examples/Polygon.js
+22 -2
View File
@@ -42,7 +42,7 @@ class FourSidePolygon extends Component{
}
}
class StrarPolygon extends Component{
class StarPolygon extends Component{
static title = 'Use the <Polygon /> element to create a star';
render() {
return <Svg
@@ -61,6 +61,26 @@ class StrarPolygon extends Component{
}
}
class EvenOddPolygon extends Component{
static title = 'Change the fill-rule property to "evenodd"';
render() {
return <Svg
height="105"
width="105"
>
<Group scale="0.5">
<Polygon
points="100,10 40,198 190,78 10,78 160,198"
fill="lime"
stroke="purple"
strokeWidth="5"
fillRule="evenodd"
/>
</Group>
</Svg>;
}
}
const icon = <Svg
height="20"
width="20"
@@ -75,7 +95,7 @@ const icon = <Svg
</Group>
</Svg>;
const samples = [PolygonExample, FourSidePolygon, StrarPolygon];
const samples = [PolygonExample, FourSidePolygon, StarPolygon, EvenOddPolygon];
export {
icon,
Example/main.js
+7 -8
View File
@@ -17,16 +17,14 @@ import React, {
Easing
} from 'react-native';
import * as elements from 'react-native-art-svg';
import * as examples from './examples';
import _ from 'lodash';
import Modal from 'react-native-root-modal';
let {
import {
Svg,
Circle,
Line
} = elements;
} from 'react-native-art-svg';
import * as examples from './examples';
import _ from 'lodash';
import Modal from 'react-native-root-modal';
const hairline = 1 / PixelRatio.get();
@@ -108,7 +106,8 @@ const styles = StyleSheet.create({
}
});
const names = _.filter(_.map(elements, (ele, key) => key), (name) => name !== 'default');
const names = ['Svg', 'Circle', 'Ellipse', 'G', 'Path', 'Polygon', 'Polyline', 'Line', 'Rect'];
class ArtSvgExample extends Component {
constructor() {
elements/Circle.js
+1 -1
View File
@@ -4,7 +4,7 @@ import React, {
} from 'react-native';
import Ellipse from './Ellipse';
let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired;
let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
class Circle extends Component{
static displayName = 'Circle';
static propTypes = {
elements/Ellipse.js
+1 -1
View File
@@ -10,7 +10,7 @@ let {
Shape
} = ART;
let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired;
let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
class Ellipse extends Component{
static displayName = 'Ellipse';
static propTypes = {
elements/G.js
+45
View File
@@ -0,0 +1,45 @@
import React, {
ART,
Component,
Children,
cloneElement
} from 'react-native';
let {
Group
} = ART;
const transformProps = {
scale: null,
scaleX: null,
scaleY: null,
rotate: null,
transform: null,
x: null,
y: null,
originX: null,
originY: null
};
class G extends Component{
static displayName = 'G';
constructor() {
super(...arguments);
this.children = Children.map(this.props.children, child => cloneElement(child, {
id: null,
...this.props,
...transformProps,
children: child.children,
...child.props
}));
};
render() {
return <Group
{...this.props}
>{this.children}</Group>;
}
}
export default G;
elements/Line.js
+1 -1
View File
@@ -9,7 +9,7 @@ let {
} = ART;
import strokeFilter from '../lib/strokeFilter';
let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired;
let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
class Line extends Component{
static displayName = 'Line';
static propTypes = {
elements/Polygon.js
+1 -1
View File
@@ -10,7 +10,7 @@ import Path from './Path';
class Polygon extends Component{
static displayName = 'Polygon';
static propTypes = {
points: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
points: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};
render() {
let props = this.props;
elements/Polyline.js
+1 -1
View File
@@ -11,7 +11,7 @@ import fillFilter from '../lib/fillFilter';
class Polyline extends Component{
static displayName = 'Polyline';
static propTypes = {
points: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
points: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
strokeLinecap: PropTypes.oneOf(['butt', 'square', 'round']),
strokeCap: PropTypes.oneOf(['butt', 'square', 'round']),
strokeLinejoin: PropTypes.oneOf(['miter', 'bevel', 'round']),
elements/Rect.js
+1 -1
View File
@@ -8,7 +8,7 @@ import fillFilter from '../lib/fillFilter';
import strokeFilter from '../lib/strokeFilter';
import Path from './Path';
let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired;
let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
function processRadius(radius) {
radius = +radius;
elements/Text.js
+37
View File
@@ -0,0 +1,37 @@
import React, {
ART,
Component,
PropTypes
} from 'react-native';
let {
Text:ARTText,
Shape
} = ART;
import fillFilter from '../lib/fillFilter';
import strokeFilter from '../lib/strokeFilter';
class Text extends Component{
static displayName = 'Text';
static propTypes = {
strokeLinecap: PropTypes.oneOf(['butt', 'square', 'round']),
strokeCap: PropTypes.oneOf(['butt', 'square', 'round']),
strokeLinejoin: PropTypes.oneOf(['miter', 'bevel', 'round']),
strokeJoin: PropTypes.oneOf(['miter', 'bevel', 'round'])
};
render() {
let {props} = this;
return <Shape d="M0, 0 L0, 0Z" />;
return <ARTText
{...props}
strokeCap={props.strokeLinecap || props.strokeCap || 'square'}
strokeJoin={props.strokeLinejoin || props.strokeJoin || 'miter'}
alignment={props.textAnchor || props.alignment}
fill={fillFilter(props)}
stroke={strokeFilter(props)}
/>;
}
}
export default Text;