react-native - 如何计算屏幕绘制区域的百分比？

Question

我的问题在一张照片中

我的项目中有一个屏幕，您可以在屏幕上绘图；屏幕的目标 - 及时绘制全屏。让油漆部分工作非常困难。但现在更难了——我不知道如何计算屏幕绘制区域的百分比并在屏幕上显示结果，同时在屏幕上绘制时更改它。

我相信这样做的正确方法 - 初始化“var”并以某种方式使其取决于绘制的区域......但我仍然没有得到正确的方法来做这样的事情。

我的项目由两部分组成 - 绝对部分和块部分。我将附上这两个部分的部分，这样你就可以看到绘画部分是如何完成的，以及计算部分（未完成）。绝对部分是（不包括css）；

  type PropsType = {
  blocksCount: number;

  selectedIndexes: Array<number>;
  setSelectedIndexes: (newSelectedIndexes: Array<number>) => void;
};
const AbsoluteSection: React.FC<PropsType> = (props) => {
  const [counter, setCounter] = useState(60);
  const navigation = useNavigation();
  const percent = Math.round(
    (props.selectedIndexes.length / props.blocksCount) * 100,
  );

  counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);

  const navigate = (isFail?: boolean) => {
    navigation.navigate('TestResultScreen', {
      title: 'Мультитач',
      isSuccess: isFail,
    });
    props.setSelectedIndexes([]);
    setCounter(60);
  };

  useEffect(() => {
    counter <= 0 && navigate(true);
  }, [counter]);

  useEffect(() => {
    if (props.selectedIndexes.length >= props.blocksCount) {
      navigate();
    }
  }, [props.selectedIndexes]);

  return (
    <View style={styles.absolute_wrap} pointerEvents={'none'}>
      <Text size={24} color={'#AAAAAA'} isCenterAlign>
        {props.selectedIndexes.length <= 0 &&
          'Починай замальовувати пальцем екран'}
      </Text>

      <View style={styles.pie_wrap}>
        <Pie
          radius={80}
          innerRadius={75}
          sections={[
            {
              percentage: percent,
              color: '#FFC107',
            },
          ]}
          backgroundColor="#ddd"
        />
        <View style={styles.gauge}>
          <Text style={styles.gaugeText} size={28}>
            {percent}%
          </Text>
        </View>
      </View>
      <Text size={28}>{counter} сек</Text>
    </View>
  );
}; 

块部分（更多的绘画）是：

type PropsType = {
  isSelected: boolean;
  onPress: () => void;
};
const BlockItem: React.FC<PropsType> = (props) => {
  return (
    <TouchableOpacity
      onPress={props.onPress}
      style={[
        styles.block,
        {
          height: '8%',
          width: '16.6%',
          backgroundColor: props.isSelected ? '#F6CE0E' : 'white',
        },
        ,
      ]}
    />
  );
};

和

type PropsType = {
  isSelected: boolean;
  onPress: () => void;
};
const BlockItem: React.FC<PropsType> = (props) => {
  return (
    <TouchableOpacity
      onPress={props.onPress}
      style={[
        styles.block,
        {
          height: '8%',
          width: '16.6%',
          backgroundColor: props.isSelected ? '#F6CE0E' : 'white',
        },
        ,
      ]}
    />
  );
};

我希望最好，我会很感激帮助，因为我已经尝试解决这个问题很长一段时间了，但它并没有变得更容易）

标签： react-native