Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 30
×

Как добавить текст по центру элемента Path в react native?

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті

Всем привет, у меня есть маленькое приложение с svg картинками и мне надо добавить текст внутрь по центру Path элемента (элементов много)

<Svg>
        <TextPath href="#path" startOffset="50%">
          Text inside the path
        </TextPath>
      <Path id="path"
        d="M124.302 328.222c-2.466-2.901-5.036-5.334-7.648-7.212a4.944 4.944 0"
        fill="tomato"
      />
</Svg>

В обычном svg находил свойство text-anchor="middle", выравнивающее текст по центру path, в react-native-svg такой возможности нету. подскажите как это реализовать

👍ПодобаєтьсяСподобалось0
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

www.npmjs.com/package/react-svg-text такая либа в реакт нейтив не пойдет? (я просто нейтивом нет)

вы хотите текст на картинку наложить? может тут не жс а фотошоп легче?

не, хочу динамически добавлять в центр элементов Path тексты, фотошоп не подойдет. какую-то обертку над Path думаю можно написать

css, svg — relative, TextPath — absolute + выравнивание

интересно что придумаешь, вообще svg можно канвасом обрабатывать, получать контекст и менять

нашел нативный метод onLayout, он получает ширину, высоту и позицию элемента, но берет то ли относительные координаты или странно считает что каждый раз криво получается. Про канвас с свг не знал, буду пробовать сегодня скрестить их) спасибо

попробуй, ведь свг — это картинки, а все операцию по сжатию-обрезке только же попиксельные (а значит канвас), кстати интересно удобно в нейтиве под мобайл? я планирую флаттер

пока тоже только разбираюсь со всем, в нейтиве со сборкой и эмуляторами сложно, добавил канвас и посыпались ошибки. плюс эмуляторы памяти прилично съедают. пока настраиваешь и гуглишь ошибки несколько дней легко уйти могут, а то и больше(

Підписатись на коментарі