Блог

Мой вопрос на одной картинке

В моем проекте есть экран, на котором вы можете рисовать на экране; цель экрана — вовремя рисовать на весь экран. Было довольно сложно заставить часть рисования работать. но теперь это еще сложнее — я не знаю, как подсчитать процент закрашенной области экрана и показать результат на экране, одновременно изменяя его при рисовании на экране.

Я считаю, что правильный способ сделать это — инициализировать «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 amp;amp; setTimeout(() => setCounter(counter - 1), 1000);

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

  useEffect(() => {
    counter <= 0 amp;amp; 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 amp;amp;
          'Починай замальовувати пальцем екран'}
      </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',
        },
        ,
      ]}
    />
  );
};
  

Я надеюсь на лучшее, и я буду очень признателен за помощь, так как я уже довольно давно пытаюсь решить эту проблему, и она не становится легче)