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

apply common stroke processor to elements

Browse Source 
apply common stroke processor to elements
This commit is contained in:
Horcrux
2016-01-23 16:50:11 +08:00
parent 1fecd0a015
commit af0995022d
14 changed files with 108 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
Example/examples/Stroking.js
View File

@@ -3,24 +3,58 @@ import React, {
} from 'react-native';
import Svg, {
Line
Path,
G
} from 'react-native-art-svg';
class LineExample extends Component{
static title = 'Line';
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="100"
width="100"
>
<Line
x1="0"
y1="0"
x2="100"
y2="100"
stroke="red"
strokeWidth="2"
/>
return <Svg height="80" width="225">
<G fill="none">
<Path stroke="red" d="M5 20 l215 0" />
<Path stroke="black" d="M5 40 l215 0" />
<Path stroke="blue" d="M5 60 l215 0" />
</G>
</Svg>;
}
}
class StrokeWidth 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" stroke="black">
<Path strokeWidth="2" d="M5 20 l215 0" />
<Path strokeWidth="4" d="M5 40 l215 0" />
<Path strokeWidth="6" d="M5 60 l215 0" />
</G>
</Svg>;
}
}
class StrokeLinecap extends Component{
static title = 'The stroke-linecap property defines different types of endings to an open path';
render() {
return <Svg height="80" width="225">
<G fill="none" stroke="black" strokeWidth="6">
<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>
</Svg>;
}
}
class StrokeDasharray extends Component{
static title = 'The stroke-linecap property defines different types of endings to an open path';
render() {
return <Svg height="80" width="225">
<G fill="none" stroke="black" strokeWidth="4">
<Path strokeDasharray="5,5" d="M5 20 l215 0" />
<Path strokeDasharray="10,10" d="M5 40 l215 0" />
<Path strokeDasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
</G>
</Svg>;
}
}
@@ -29,17 +63,14 @@ const icon = <Svg
height="20"
width="20"
>
<Line
x1="0"
y1="0"
x2="20"
y2="20"
stroke="red"
strokeWidth="1"
/>
<G fill="none" stroke="black" strokeWidth="2">
<Path strokeDasharray="2,2" d="M0 4 h20" />
<Path strokeDasharray="4,4" d="M0 10 h20" />
<Path strokeDasharray="4,2,1,1,1,6" d="M0 19 h20" />
</G>
</Svg>;
const samples = [LineExample];
const samples = [StrokeExample, StrokeWidth, StrokeLinecap, StrokeDasharray];
export {
icon,