Skip to content

Commit 95602dd

Browse files
790859022790859022
committed
feat: source code and example
1 parent 8f9269a commit 95602dd

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+1957
-13
lines changed

‎example/BasicExample.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { View, Text, Image, ScrollView } from 'react-native'
2+
import React from 'react'
3+
import ClipPath from '@react-native-oh-tpl/clip-path'
4+
import { myPath2, myPath3, myPath10, myPath11, myPath12 } from './paths'
5+
6+
export default function index() {
7+
const viewBox = [0, 0, 400, 400]
8+
const path = myPath12
9+
10+
return (
11+
<ScrollView style={{ width: '100%', height: '100%' }}>
12+
<ClipPath viewBox={viewBox} d={path} fill="rgba(255,0,0,0)" style={{ width: 200, height: 100, backgroundColor: '#ff0' }}>
13+
<Text style={{ lineHeight: 5, fontSize: 6 }}>8888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888</Text>
14+
</ClipPath>
15+
<Text>--------------------------------------------</Text>
16+
<ClipPath openClip={true} viewBox={viewBox} d={path} fill="rgba(255,0,0,1)" style={{ width: 200, height: 100, backgroundColor: '#ff0' }}>
17+
<Text style={{ lineHeight: 5, fontSize: 6 }}>8888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888</Text>
18+
</ClipPath>
19+
<Text>--------------------------------------------</Text>
20+
<ClipPath viewBox={viewBox} d={myPath10} fill="#f00" style={{ width: 200, height: 100, backgroundColor: '#ff0' }}>
21+
<Text style={{ lineHeight: 5, fontSize: 6 }}>MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM</Text>
22+
</ClipPath>
23+
<Text>--------------------------------------------</Text>
24+
<ClipPath viewBox={viewBox} d={myPath11} fill="#f00" style={{ width: 200, height: 100, backgroundColor: '#ff0' }}>
25+
<Text style={{ lineHeight: 5, fontSize: 6 }}>MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM</Text>
26+
</ClipPath>
27+
<Text>--------------------------------------------</Text>
28+
<ClipPath viewBox={viewBox} d={myPath2} fill="#f00" style={{ backgroundColor: '#ff0' }}>
29+
<Image
30+
// style={styles.tinyLogo}
31+
style={{ width: 150, height: 150 }}
32+
source={{
33+
// uri: 'https://pic.rmb.bdstatic.com/bjh/5cf572ed80a9e6b003a1063e3cc62b871426.jpeg',
34+
uri: 'https://octodex.github.com/images/OctoAsians_dex_Full.png',
35+
}}
36+
/>
37+
</ClipPath>
38+
</ScrollView>
39+
)
40+
}

‎example/RotateExample.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { View, Text, Image, ScrollView } from 'react-native'
2+
import React from 'react'
3+
import ClipPath from '@react-native-oh-tpl/clip-path'
4+
import { myPath2,myPath3, myPath10, myPath11, myPath12 } from './paths'
5+
6+
export default function index() {
7+
const viewBox = [0, 0, 400, 400]
8+
const path = myPath12
9+
10+
return (
11+
<ScrollView style={{ width: '100%', height: '100%'}}>
12+
<Text>rot: 0</Text>
13+
<ClipPath rot={0} viewBox={viewBox} d={myPath10} fill="#f00" style={{ width: 200, height: 100, backgroundColor: '#ff0' }}>
14+
<Text>MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM</Text>
15+
</ClipPath>
16+
<Text>--------------------------------------------</Text>
17+
<Text>rot: 30</Text>
18+
<ClipPath rot={30} viewBox={viewBox} d={myPath10} fill="#f00" style={{ width: 200, height: 100, backgroundColor: '#ff0' }}>
19+
<Text>MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM</Text>
20+
</ClipPath>
21+
<Text></Text><Text></Text><Text></Text>
22+
<Text>--------------------------------------------</Text>
23+
<Text>rot: 45, rotOx: 200, rotOy: 200</Text>
24+
<Text></Text><Text></Text><Text></Text>
25+
<ClipPath rot={45} rotOx={200} rotOy={200} viewBox={viewBox} d={myPath10} fill="#f00" style={{ width: 200, height: 100, backgroundColor: '#ff0' }}>
26+
<Text>MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM</Text>
27+
</ClipPath>
28+
<Text></Text><Text></Text><Text></Text>
29+
<Text>--------------------------------------------</Text>
30+
<Text>rot: 45, rotOx: 50, rotOy: 50, rotPercentageValue: true</Text>
31+
<Text></Text><Text></Text><Text></Text>
32+
<ClipPath rot={45} rotOx={50} rotOy={50} rotPercentageValue={true} viewBox={viewBox} d={myPath10} fill="#f00" style={{ width: 200, height: 100, backgroundColor: '#ff0' }}>
33+
<Text>MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM</Text>
34+
</ClipPath>
35+
<Text></Text><Text></Text><Text></Text>
36+
</ScrollView>
37+
)
38+
}

‎example/ScaleExample.tsx

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { View, Text, Image, ScrollView } from 'react-native'
2+
import React from 'react'
3+
import ClipPath from '@react-native-oh-tpl/clip-path'
4+
import { myPath2,myPath3, myPath10, myPath11, myPath12 } from './paths'
5+
6+
export default function index() {
7+
const viewBox = [0, 0, 400, 400]
8+
const path = myPath12
9+
10+
return (
11+
<ScrollView style={{ width: '100%', height: '100%'}}>
12+
<Text>sc: 1</Text>
13+
<ClipPath sc={1} viewBox={viewBox} d={myPath10} style={{ width: 200, height: 100, backgroundColor: '#ff0' }}>
14+
<Text>11111111111111111111111111111111111111111</Text>
15+
<Text>22222222222222222222222222222222222222222</Text>
16+
</ClipPath>
17+
<Text>--------------------------------------------</Text>
18+
<Text>sc: 0.5</Text>
19+
<ClipPath sc={0.5} viewBox={viewBox} d={myPath10} style={{ width: 200, height: 100, backgroundColor: '#ff0' }}>
20+
<Text>11111111111111111111111111111111111111111</Text>
21+
<Text>22222222222222222222222222222222222222222</Text>
22+
</ClipPath>
23+
<Text>--------------------------------------------</Text>
24+
<Text>sc: 2</Text>
25+
<ClipPath sc={2} viewBox={viewBox} d={myPath10} style={{ width: 200, height: 100, backgroundColor: '#ff0' }}>
26+
<Text>11111111111111111111111111111111111111111</Text>
27+
<Text>22222222222222222222222222222222222222222</Text>
28+
</ClipPath>
29+
<Text></Text><Text></Text><Text></Text><Text></Text><Text></Text><Text></Text>
30+
<Text>--------------------------------------------</Text>
31+
<Text>sc: 0.5, scO: 200</Text>
32+
<ClipPath sc={0.5} scO={200} viewBox={viewBox} d={myPath10} style={{ width: 200, height: 100, backgroundColor: '#ff0' }}>
33+
<Text>11111111111111111111111111111111111111111</Text>
34+
<Text>22222222222222222222222222222222222222222</Text>
35+
</ClipPath>
36+
<Text>--------------------------------------------</Text>
37+
<Text>sc: 0.5, scO: 50, scPercentageValue: true</Text>
38+
<ClipPath sc={0.5} scO={50} scPercentageValue={true} viewBox={viewBox} d={myPath10} style={{ width: 200, height: 100, backgroundColor: '#ff0' }}>
39+
<Text>11111111111111111111111111111111111111111</Text>
40+
<Text>22222222222222222222222222222222222222222</Text>
41+
</ClipPath>
42+
<Text>--------------------------------------------</Text>
43+
<Text>scX: 0.5</Text>
44+
<ClipPath scX={0.5} viewBox={viewBox} d={myPath10} style={{ width: 200, height: 100, backgroundColor: '#ff0' }}>
45+
<Text>11111111111111111111111111111111111111111</Text>
46+
<Text>22222222222222222222222222222222222222222</Text>
47+
</ClipPath>
48+
<Text>--------------------------------------------</Text>
49+
<Text>scY: 0.5</Text>
50+
<ClipPath scY={0.5} viewBox={viewBox} d={myPath10} style={{ width: 200, height: 100, backgroundColor: '#ff0' }}>
51+
<Text>11111111111111111111111111111111111111111</Text>
52+
<Text>22222222222222222222222222222222222222222</Text>
53+
</ClipPath>
54+
</ScrollView>
55+
)
56+
}

0 commit comments

Comments
 (0)