zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2025-12-20 05:55:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor text render

Browse Source 
Support G inherit props.
Refactor text render. Text glyphs will perfectly draw along the path
This commit is contained in:
Horcrux
2016-07-22 23:49:15 +08:00
parent 63f793c54e
commit 7e13b801e1
41 changed files with 467 additions and 477 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Example/examples.js
View File

@@ -29,8 +29,8 @@ export {
Text,
Stroking,
G,
//Use,
//Symbol,
Use,
Symbol,
Gradients,
Clipping,
Image,

10
Example/examples/G.js
View File

@@ -68,6 +68,7 @@ class GTransform extends Component{
<G
rotate="50"
origin="100, 50"
scale="0.75"
id="group"
>
<Line
@@ -96,7 +97,7 @@ class GTransform extends Component{
>
Text grouped with shapes</Text>
</G>
<Use href="url(#group)" x="5" rotate="0" />
<Use href="url(#group)" x="5" y="20" rotate="-50" stroke="red" />
</Svg>;
}
}
@@ -106,30 +107,35 @@ const icon = <Svg
width="20"
>
<G
r="3"
fill="purple"
stroke="pink"
strokeWidth="1"
>
<Circle
cx="5"
cy="5"
r="3"
/>
<Circle
cx="5"
cy="15"
r="3"
/>
<Circle
cx="10"
cy="10"
fill="green"
r="3"
/>
<Circle
cx="15"
cy="5"
r="3"
/>
<Circle
cx="15"
cy="15"
r="3"
/>
</G>
</Svg>;

13
Example/examples/Stroking.js
View File

@@ -19,7 +19,7 @@ class StrokeExample 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">
<G>
<Path stroke="red" d="M5 20 l215 0" />
<Path stroke="black" d="M5 40 l215 0" />
<Path stroke="blue" d="M5 60 l215 0" />
@@ -32,10 +32,12 @@ class StrokeLinecap extends Component{
static title = 'The strokeLinecap property defines different types of endings to an open path';
render() {
return <Svg height="80" width="225">
<G fill="none" stroke="black">
<Path strokeLinecap="butt" strokeWidth="8" d="M5 20 l215 0" />
<Path strokeLinecap="round" strokeWidth="8" d="M5 40 l215 0" />
<Path strokeLinecap="square" strokeWidth="8" d="M5 60 l215 0" />
<G stroke="red">
<G strokeWidth="8">
<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>
</G>
</Svg>;
}
@@ -142,7 +144,6 @@ const icon = <Svg
</Svg>;
const samples = [StrokeExample, StrokeLinecap, StrokeDasharray, StrokeDashoffset, StrokePattern];
export {
icon,
samples

10
Example/examples/Symbol.js
View File

@@ -21,19 +21,19 @@ class SymbolExample extends Component{
</Symbol>
<Use
href="#symbol"
href="url(#symbol)"
x="0"
y="0"
/>
<Use
href="#symbol"
href="url(#symbol)"
x="0"
y="50"
width="75"
height="38"
/>
<Use
href="#symbol"
href="url(#symbol)"
x="0"
y="100"
width="50"
@@ -53,14 +53,14 @@ const icon = <Svg
</Symbol>
<Use
href="#symbol"
href="url(#symbol)"
x="0"
y="0"
width="20"
height="10"
/>
<Use
href="#symbol"
href="url(#symbol)"
x="0"
y="12"
width="20"

37
Example/examples/Text.js
View File

@@ -6,7 +6,9 @@ import Svg, {
Text,
LinearGradient,
Stop,
Defs
Defs,
Path,
G
} from 'react-native-svg';
class TextExample extends Component{
@@ -119,22 +121,33 @@ class TextPath extends Component{
static title = 'Draw text along path';
render() {
return <Svg
height="60"
width="200"
>
<Text
fill="red"
path={`
M 10 20
const path = `
M 0 20
h 10
C 20 10 30 0 40 10
C 50 20 60 30 70 20
C 80 10 90 10 90 10
C 110 20 120 30 120 20
C 140 10 150 10 150 10
`}
y="20"
>We go up, then we go down, then up again</Text>
a 50 50 0 1 1 20 110
`;
return <Svg
height="60"
width="200"
>
<G y="20">
<Text
fill="blue"
path={path}
>We go up, then we go down, then up again</Text>
<Path
d={path}
fill="none"
stroke="red"
strokeWidth="1"
/>
</G>
</Svg>;
}
}

12
Example/examples/Use.js
View File

@@ -27,8 +27,8 @@ class UseExample extends Component{
</G>
</G>
</Defs>
<Use href="#shape" x="20" y="0"/>
<Use href="#shape" x="170"y="0" />
<Use href="url(#shape)" x="20" y="0"/>
<Use href="url(#shape)" x="170"y="0" />
</Svg>;
}
}
@@ -43,9 +43,9 @@ class UseShapes extends Component{
<G id="shape">
<Rect x="0" y="0" width="50" height="50" />
</G>
<Use href="#shape" x="75" y="50" fill="#0f0"/>
<Use href="#shape" x="110" y="0" stroke="#0ff" fill="#8a3" rotation="45" origin="25, 25"/>
<Use href="#shape" x="150" y="50" stroke="#0f0" fill="none"/>
<Use href="url(#shape)" x="75" y="50" fill="#0f0"/>
<Use href="url(#shape)" x="110" y="0" stroke="#0ff" fill="#8a3" rotation="45" origin="25, 25"/>
<Use href="url(#shape)" x="150" y="50" stroke="#0f0" fill="none"/>
</Svg>;
}
}
@@ -60,7 +60,7 @@ const icon = <Svg
stroke="#8a3"
id="line"
/>
<Use href="#line" x="10" stroke="#3a8" />
<Use href="url(#line)" x="10" stroke="#3a8" />
</Svg>;
const samples = [UseExample, UseShapes];