canvas - for - react native vs
equivalente a “canvas” en React Native (4)
Bueno, después de dos años, hay una nueva opción para usted:
https://alibaba.github.io/GCanvas/
Este "GCanvas" está diseñado para que el entorno nativo ejecute las API de canvas2d y WebGL.
Ver
https://alibaba.github.io/GCanvas/docs/Integrate%20GCanvas%20on%20ReactNative.html
Actualmente estoy trabajando en una aplicación móvil de procesamiento de imágenes basada en React-Native. Sin embargo, no puedo encontrar ningún documento relacionado con las funciones de recorte de imagen, zoom, paneo y guardar (que se puede lograr fácilmente con el elemento de lienzo HTML5) en el sitio oficial React-Native.
También hago algunas búsquedas en Google, pero solo encuentro un lienzo nativo "no mantenido" ( https://github.com/lwansbrough/react-native-canvas ). ¿Hay algún equivalente del "lienzo" en React Native?
Hay algunas opciones que son "similares" pero no exactamente iguales. Mis sugerencias serían ...
Reaccionar con SVG nativo : se parece mucho a los componentes web de SVG con los que todos estamos familiarizados. Puedes hacer mucho con esta biblioteca incluso animaciones.
ART (la versión React Native se ART ) - Una versión "React Native" de la biblioteca React ART, que a su vez es una extensión de la biblioteca ART que se encuentra aquí . Se suministra con React Native, pero no creo que se haya integrado en la configuración predeterminada, por lo que se encuentra en la carpeta node_modules y debe importarse a XCode (la discusión se encuentra aquí ). Por lo general, arrastro el archivo de proyecto de la carpeta node_modules donde está ubicado (
node_modules/react-native/Libraries/ART/Art.xcodeproj) a la carpeta de bibliotecas en su navegador de proyectos React Native XCode. Si le pide copiar recursos haga clic en sí. Luego, vaya al archivo de configuración del proyecto -> general -> Marcos y bibliotecas vinculadas, luego presione el icono más. Busca ART y añádelo como una dependencia.
react-native-canvas parece útil, pero no pude dibujar más allá de un rectángulo de 300x150. El lienzo completo aparece en el color de fondo correcto, pero mis llamadas beginPath / moveTo / lineTo / stroke parecen no hacer nada más allá de 300x150 desde la parte superior izquierda del lienzo. ¿Algunas ideas? - Roger Nov 21 ''18 a las 2:44
Se puede utilizar el ancho y la altura del área de dibujo del lienzo.
handleCanvas = canvas => {
const ctx = canvas.getContext("2d");
canvas.width = 300;
canvas.height = 500;
ctx.fillStyle = "purple";
ctx.fillRect(0, 0, 250, 250);
};
react-native-canvas mantenedor de react-native-canvas aquí. Desde que se hizo esta pregunta, la biblioteca ha cambiado mucho: es el componente de lienzo más completo y compatible para React Native con características avanzadas como Path2D y gradientes, y, a diferencia del lienzo de vista web predeterminado, se muestra en alto DPI.
El componente es más lento en comparación con otros componentes React Native porque entre bambalinas usa un WebView para renderizar. Sin embargo, la comunicación con él está optimizada y se asemeja en muchos aspectos a la forma en que React Native muestra las vistas nativas. La compensación es que la biblioteca no requiere ninguna instalación nativa y solo se basa en el tiempo de ejecución de React Native JavaScript y en el WebView nativo
Hubo una idea de representar el lienzo en el tiempo de ejecución de JavaScript de React Native, aunque nadie ha realizado antes un lienzo sin DOM completo en un tiempo de ejecución de JavaScript, por lo que se necesitará un esfuerzo decente para implementarlo.
Desde nuestra experiencia en K Health, es posible generar gráficos lo suficientemente rápidos para una interacción receptiva del usuario, pero no lo suficientemente rápido para una animación completa. El componente se utiliza en nuestra aplicación que tiene miles de usuarios.
Los contribuidores y usuarios de react-native-canvas , incluyéndome a mí, estamos muy dispuestos a ayudar y si tiene alguna pregunta, no dude en abrir un problema o enviar un correo electrónico.