zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2025-12-19 13:35:11 +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

67
Example/examples/Path.js
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,