在React Native中绘制文本到圆形周长上

Question

在React Native中绘制文本到圆形周长上

javascriptreact-nativedrawgeometry

5

我有一个一般性的问题。

如果我有一个圆，并且我想在圆的上弧线上渲染文本，那么在react native中我该如何实现呢？

我本来想发一个尝试的例子，但老实说，我甚至不知道该如何开始。

- TheMan68

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yossi · Accepted Answer

感谢msand贡献: (https://github.com/react-native-community/react-native-svg/issues/972)

以下是不使用expo的方法:

import React, { Component } from 'react';
import { View, Image } from 'react-native';
import {  Circle, Text as SvgText, TextPath, TSpan, G, Svg }
  from 'react-native-svg';

export class ListScreen extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center' }}>

        <Svg position="absolute" height="200" width="200"
          viewBox="0 0 300 300">
          <G id="circle">
            <Circle
              r={75}
              x={150}
              y={176}
              fill="none"
              stroke="#fff"
              strokeWidth={14}
              transform="rotate(-145)"
            />
          </G>
          <SvgText fill="#000" fontSize="14">
            <TextPath href="#circle">
              <TSpan dx="0" dy={-20}>
                Text along a curved path2
              </TSpan>
            </TextPath>
          </SvgText>
        </Svg>
        <View>
          <Image
            style={{ height: 120, width: 120, borderRadius: 60,
              marginTop: 70 }}
            source={require('./dog.jpg')}
          />
        </View>
      </View>
    )
  }
}

使用Expo：

import * as React from 'react';
import { View, Image } from 'react-native';
import { Constants, Svg } from 'expo';

const { Circle, Text, TextPath, TSpan, G, Path } = Svg;

const SvgComponent = props => (
  <View style={{ flex: 1, justifyContent: 'center',
    paddingTop: Constants.statusBarHeight, padding: 0 }}>
    <Svg height="100%" width="100%" viewBox="0 0 300 300" {...props}>
      <G id="circle">
        <Circle
          r={100}
          x={150}
          y={150}
          fill="none"
          stroke="none"
          strokeWidth={0}
          transform="rotate(-135)"
        />
      </G>
      <Image
        style={{ width: 220, height: 220, borderRadius: 110,
          marginLeft: 68, marginTop: 175 }}
        source={require('./doggy.jpg')}
      />
      <Text fill="#000" fontSize="14">
        <Text fill="#000" fontSize="14">
          <TextPath href="#circle">
            <TSpan dy={0}>
              Text along a curved path...
            </TSpan>
          </TextPath>
        </Text>
      </Text>
    </Svg>
  </View>
);