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

change copy right and add clip for ios

Browse Source
This commit is contained in:
Horcrux
2016-04-21 15:42:30 +08:00
parent cea32755f5
commit c8aaa1eb12
47 changed files with 454 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Example/examples.js
View File

@@ -12,6 +12,7 @@ import * as Stroking from './examples/Stroking';
import * as Use from './examples/Use';
import * as Symbol from './examples/Symbol';
import * as Gradients from './examples/Gradients';
import * as Clipping from './examples/Clipping';
export {
Svg,
@@ -27,5 +28,6 @@ export {
G,
Use,
Symbol,
Gradients
Gradients,
Clipping
};

124
Example/examples/Clipping.js Normal file
View File

@@ -0,0 +1,124 @@
import React, {
Component
} from 'react-native';
import Svg, {
GlipPath,
Defs,
Line,
Rect,
Text,
G
} from 'react-native-art-svg';
class ClipPathExample extends Component{
static title = 'Clip by set clip-path with a path data';
render() {
return <Svg
height="100"
width="100"
>
<Rect
x="0"
y="0"
width="100"
height="100"
fill="red"
clipPath="M50,5L20,99L95,39L5,39L80,99z"
/>
</Svg>;
}
}
class ClipRulePathExample extends Component{
static title = 'Clip by set clip-path with a path data';
render() {
return <Svg
height="100"
width="100"
>
<G
clipPath="M50,5L20,99L95,39L5,39L80,99z"
clipRule="evenodd"
>
<Rect
x="0"
y="0"
width="50"
height="50"
fill="red"
/>
<Rect
x="50"
y="0"
width="50"
height="50"
fill="blue"
/>
<Rect
x="0"
y="50"
width="50"
height="50"
fill="yellow"
/>
<Rect
x="50"
y="50"
width="50"
height="50"
fill="green"
/>
</G>
</Svg>;
}
}
const icon = <Svg
height="20"
width="20"
>
<G
clipPath="M50,5L20,99L95,39L5,39L80,99z"
clipRule="evenodd"
scale="0.2"
>
<G>
<Rect
x="0"
y="0"
width="50"
height="50"
fill="red"
/>
<Rect
x="50"
y="0"
width="50"
height="50"
fill="blue"
/>
<Rect
x="0"
y="50"
width="50"
height="50"
fill="yellow"
/>
<Rect
x="50"
y="50"
width="50"
height="50"
fill="green"
/>
</G>
</G>
</Svg>;
const samples = [ClipPathExample, ClipRulePathExample];
export {
icon,
samples
}

4
Example/ios/ArtSvgExample/AppDelegate.m
View File

@@ -36,7 +36,9 @@
/**
* OPTION 2
* Load from pre-bundled file on disk. The static bundle is automatically
* generated by "Bundle React Native code and images" build step.
* generated by the "Bundle React Native code and images" build step when
* running the project on an actual device or running the project on the
* simulator in the "Release" build configuration.
*/
// jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

21
Example/main.js
View File

@@ -24,19 +24,21 @@ import {
} from 'react-native-art-svg';
import * as examples from './examples';
import Modal from 'react-native-root-modal';
const hairline = 1 / PixelRatio.get();
const hairline = StyleSheet.hairlineWidth;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
paddingTop: 20,
alignItems: 'center',
overflow: 'hidden'
},
content: {
flex: 1,
alignSelf: 'stretch'
},
contentContainer: {
alignSelf: 'stretch',
alignItems: 'center',
borderTopWidth: hairline,
borderTopColor: '#ccc',
borderBottomWidth: hairline,
@@ -104,7 +106,7 @@ const styles = StyleSheet.create({
}
});
const names = ['Svg', 'Stroking', 'Path', 'Line', 'Rect', 'Polygon', 'Polyline', 'Circle', 'Ellipse', 'G', 'Text', 'Use', 'Symbol', 'Gradients'];
const names = ['Svg', 'Stroking', 'Path', 'Line', 'Rect', 'Polygon', 'Polyline', 'Circle', 'Ellipse', 'G', 'Text', 'Use', 'Symbol', 'Gradients', 'Clipping'];
class ArtSvgExample extends Component {
constructor() {
@@ -184,7 +186,9 @@ class ArtSvgExample extends Component {
};
render() {
return <View style={styles.container}>
return <View
style={styles.container}
>
<Animated.Modal
visible={this.state.modal}
style={[styles.modal, {
@@ -237,9 +241,12 @@ class ArtSvgExample extends Component {
<Text style={styles.welcome}>
SVG by ART!
</Text>
<View style={styles.content}>
<ScrollView
style={styles.content}
contentContainerStyle={styles.contentContainer}
>
{this.getExamples()}
</View>
</ScrollView>
</View>;
}
}