Подтвердить что ты не робот

Эквивалент "холста" в "Реагирующей нации"

В настоящее время я работаю над мобильным приложением для обработки изображений, основанным на React-Native. Однако на официальном сайте React-Native я не могу найти какие-либо связанные документы об изображениях, масштабировании, панорамировании и сохранении функций (которые могут быть легко достигнуты с помощью элемента холста HTML5).

Я также выполняю некоторые поисковые запросы Google, но нахожу только "неподдерживаемый" action-native-canvas (https://github.com/lwansbrough/react-native-canvas). Есть ли какой-либо эквивалент "холста" в React Native?

4b9b3361

ОТВЕТЫ

Ответ 1

react-native-canvas здесь. С тех пор, как этот вопрос был задан, в библиотеке многое изменилось: это наиболее полный и совместимый компонент холста для React Native, Path2D расширенными функциями, такими как Path2D и градиенты, и в отличие от стандартного холста веб-представления, он отображается в высоком разрешении.

Компонент медленнее по сравнению с другими компонентами React Native, потому что за кулисами он использует WebView для визуализации. Связь с ним оптимизирована и во многом напоминает то, как React Native отображает нативные представления. Компромисс заключается в том, что библиотека не требует никакой собственной установки и опирается только на среду выполнения React Native JavaScript и собственный WebView

Была идея визуализировать холст во время выполнения React Native JavaScript, хотя никто ранее не создавал полнофункциональный холст без DOM во время выполнения JavaScript, поэтому для его реализации потребуется немало усилий.

Из нашего опыта в K Health можно визуализировать достаточно быструю графику для отзывчивого взаимодействия с пользователем, но недостаточно быстро для полноценной анимации. Компонент используется в нашем приложении, которое имеет тысячи пользователей.

Авторы и пользователи react-native-canvas, в том числе и я, очень рады помочь, и если у вас есть какие-либо вопросы, вы можете свободно открыть вопрос или отправить электронное письмо.

Ответ 3

Есть несколько вариантов, которые "похожи", но не совпадают. Мои предложения будут...

  • React Native SVG - похоже на веб-компоненты SVG, с которыми мы все знакомы. С этой библиотекой вы можете многое сделать, даже анимации.

  • ART (найденная здесь версия React Native) - "React Native" версия библиотеки React ART, которая, в свою очередь, является расширением библиотеки ART, найденной здесь. Он поставляется с React Native, но я не думаю, что он еще был интегрирован в настройки по умолчанию, поэтому он находится в вашей папке node_modules и должен быть импортирован в XCode (обсуждение находится здесь). Я обычно перетаскиваю файл проекта из папки node_modules, где он находится (node_modules/react-native/Libraries/ART/Art.xcodeproj), в папку библиотек в вашем навигаторе проекта React Native XCode. Если появится запрос на копирование ресурсов, нажмите "Да". Затем перейдите в файл настроек вашего проекта → общие → Связанные фреймворки и библиотеки, затем нажмите значок плюса. Ищите АРТ и добавьте его в качестве зависимости.

Примечание. Если вы только что начали работать с native-native после официального руководства "Приступая к работе" за последние несколько месяцев, по умолчанию используется "expo". А React Native SVG по умолчанию включен в сборку expo. Так что использовать его было бы намного проще.

Ответ 4

Reaction-native-canvas выглядит полезным, но я не смог нарисовать за пределами прямоугольника 300x150. Весь холст действительно отображается в правильном цвете фона, но мои вызовы beginPath/moveTo/lineTo/stroke, кажется, ничего не делают за пределами 300x150 от верхнего левого края холста. Есть идеи? - Роджер 21 ноября 18 года в 2:44

Можно использовать ширину и высоту, заданную область рисования холста.

handleCanvas = canvas => {
    const ctx = canvas.getContext("2d");
    canvas.width = 300;
    canvas.height = 500;
    ctx.fillStyle = "purple";
    ctx.fillRect(0, 0, 250, 250);
};