zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2026-05-06 13:07:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add Text

Browse Source 
Add Text
This commit is contained in:
Horcrux
2016-01-23 11:09:00 +08:00
parent b871e0087e
commit d40921354b
9 changed files with 285 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
Example/examples/Path.js
View File

@@ -83,15 +83,15 @@ class BezierCurve extends Component{
</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>
<Text x="250" y="50" dy="-50">B</Text>
<Text x="400" y="350" dx="10">C</Text>
</G>
</G>
</Svg>;
}

47
Example/examples/Stroking.js Normal file
View File

@@ -0,0 +1,47 @@
import React, {
Component
} from 'react-native';
import Svg, {
Line
} from 'react-native-art-svg';
class LineExample extends Component{
static title = 'Line';
render() {
return <Svg
height="100"
width="100"
>
<Line
x1="0"
y1="0"
x2="100"
y2="100"
stroke="red"
strokeWidth="2"
/>
</Svg>;
}
}
const icon = <Svg
height="20"
width="20"
>
<Line
x1="0"
y1="0"
x2="20"
y2="20"
stroke="red"
strokeWidth="1"
/>
</Svg>;
const samples = [LineExample];
export {
icon,
samples
}

29
Example/examples/Svg.js
View File

@@ -35,6 +35,35 @@ class SvgExample extends Component{
}
}
class SvgViewbox extends Component{
static title = 'SVG with `viewbox` prop';
render() {
return <Svg
height="100"
width="100"
viewbox="30 30 70 70"
>
<Circle
cx="50"
cy="50"
r="45"
stroke="blue"
strokeWidth="2.5"
fill="green"
/>
<Rect
x="15"
y="15"
width="70"
height="70"
stroke="red"
strokeWidth="2"
fill="yellow"
/>
</Svg>;
}
}
class SvgOpacity extends Component{
static title = 'SVG with `opacity` prop';
render() {

96
Example/examples/Text.js Normal file
View File

@@ -0,0 +1,96 @@
import React, {
Component
} from 'react-native';
import Svg, {
Text
} from 'react-native-art-svg';
class TextExample extends Component{
static title = 'Text';
render() {
return <Svg
height="30"
width="100"
>
<Text
x="50"
y="9"
fill="red"
textAnchor="center"
>I love SVG!</Text>
</Svg>;
}
}
class TextRotate extends Component{
static title = 'Transform the text';
render() {
return <Svg
height="60"
width="200"
>
<Text
x="0"
y="15"
fill="red"
rotate="30"
origin="20,40"
>I love SVG</Text>
<Text
x="95"
y="47"
fill="blue"
rotate="-67"
>I love SVG</Text>
<Text
x="126"
y="24"
fill="#f60"
rotate="16"
scale="1.36"
>I love SVG</Text>
</Svg>;
}
}
// TODO: wait for official done
class TextPath extends Component{
static title = 'Transform the text';
render() {
return <Svg
height="60"
width="200"
>
<Text
fill="red"
path={`
M 10 20
C 20 10 30 0 40 10
C 50 20 60 30 70 20
C 80 10 90 10 90 10
`}
>We go up, then we go down, then up again</Text>
</Svg>;
}
}
const icon = <Svg
height="20"
width="20"
>
<Text
x="10"
y="2"
fontSize="14"
fontWeight="bold"
textAnchor="center"
>字</Text>
</Svg>;
const samples = [TextExample, TextRotate];
export {
icon,
samples
}