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

Add preserveAspectRatio prop for Image

Browse Source 
Add preserveAspectRatio prop for Image.
Fix touch events for Image on Android.
Fix viewBox slice bug on Android.
This commit is contained in:
Horcrux
2016-08-13 14:03:08 +08:00
parent a4c0c60b7f
commit d1afb78da0
20 changed files with 251 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
Example/examples/Image.js
View File

@@ -7,24 +7,48 @@ import Svg, {
Defs,
Circle,
ClipPath,
Rect,
Text
} from 'react-native-svg';
class ImageExample extends Component{
static title = 'Image';
static title = 'Draw Image with preserveAspectRatio prop';
render() {
return <Svg
height="100"
width="100"
style={{backgroundColor: 'red'}}
>
<Defs>
<ClipPath id="clip">
<Circle cx="50%" cy="50%" r="40%"/>
</ClipPath>
</Defs>
<Rect
x="5%"
y="5%"
width="50%"
height="90%"
/>
<Image
x="5%"
y="5%"
width="90%"
width="50%"
height="90%"
preserveAspectRatio="xMidYMid slice"
opacity="0.5"
href={require('../image.jpg')}
clipPath="url(#clip)"
/>
<Text
x="50"
y="50"
textAnchor="middle"
fontWeight="bold"
fontSize="16"
fill="blue"
>HOGWARTS</Text>
</Svg>;
}
}
@@ -43,6 +67,7 @@ class ClipImage extends Component{
</ClipPath>
</Defs>
<Image
onPress={() => alert('press on Image')}
x="5%"
y="5%"
width="90%"