Question

为什么React native ART lib的arc方法如此混乱并且绘制弧线是如此复杂。

这里是弧的文档，但不是一行来理解传递的参数。 https://github.com/react-native-china/react-native-ART-doc/blob/master/doc.md

你能帮我理解这种弧形方法及其工作原理。我需要根据计算出的值在0到270度之间画一个弧。

Answer 1

基于rn-art-d3-examples弧生成的反应组件：

import React from 'react';
import { View, ART } from 'react-native';
import * as shape from 'd3-shape';

const d3 = {
  shape
};

const { Surface, Group, Shape } = ART;

const Arc = ({ size = 100, outerRadius = 40, innerRadius = 30, startAngleRad = 0, endAngleRad = 4 }) => {

  const width = size;
  const height = size;

  const arcGenerator =
    d3.shape
      .arc()
      .outerRadius(outerRadius)
      .innerRadius(innerRadius)
      .startAngle(startAngleRad)
      .endAngle(endAngleRad);

  const x = width / 2;
  const y = height / 2;

  return (
    <View>
      <Surface width={width} height={height}>
        <Group x={x} y={y}>
          <Shape
            key="arc"
            d={arcGenerator()}
            fill="#FFF"
          />
        </Group>
      </Surface>
    </View>
  );
};

export default Arc;

如何使用React Native ART库ARC方法绘制饼图

1 个答案: