Add Text

2025-12-19 13:35:11 +00:00 · 2016-01-23 11:09:00 +08:00
parent b871e0087e
commit d40921354b
9 changed files with 285 additions and 15 deletions
--- a/Example/examples/Text.js
+++ b/Example/examples/Text.js
@@ -0,0 +1,96 @@
+import React, {
+    Component
+} from 'react-native';
+
+import Svg, {
+    Text
+} from 'react-native-art-svg';
+
+class TextExample extends Component{
+    static title = 'Text';
+    render() {
+        return <Svg
+            height="30"
+            width="100"
+        >
+            <Text
+                x="50"
+                y="9"
+                fill="red"
+                textAnchor="center"
+            >I love SVG!</Text>
+        </Svg>;
+    }
+}
+
+class TextRotate extends Component{
+    static title = 'Transform the text';
+    render() {
+        return <Svg
+            height="60"
+            width="200"
+        >
+            <Text
+                x="0"
+                y="15"
+                fill="red"
+                rotate="30"
+                origin="20,40"
+            >I love SVG</Text>
+            <Text
+                x="95"
+                y="47"
+                fill="blue"
+                rotate="-67"
+            >I love SVG</Text>
+            <Text
+                x="126"
+                y="24"
+                fill="#f60"
+                rotate="16"
+                scale="1.36"
+            >I love SVG</Text>
+        </Svg>;
+    }
+}
+
+// TODO: wait for official done
+class TextPath extends Component{
+    static title = 'Transform the text';
+    render() {
+        return <Svg
+            height="60"
+            width="200"
+        >
+            <Text
+                fill="red"
+                path={`
+                    M 10 20
+                    C 20 10 30  0 40 10
+                    C 50 20 60 30 70 20
+                    C 80 10 90 10 90 10
+                `}
+            >We go up, then we go down, then up again</Text>
+        </Svg>;
+    }
+}
+
+const icon = <Svg
+    height="20"
+    width="20"
+>
+    <Text
+        x="10"
+        y="2"
+        fontSize="14"
+        fontWeight="bold"
+        textAnchor="center"
+    >字</Text>
+</Svg>;
+
+const samples = [TextExample, TextRotate];
+
+export {
+    icon,
+    samples
+}