相当于 React Native 中的“画布”

Posted 2023-03-12

【中文标题】相当于 React Native 中的“画布”

【英文标题】：equivalent of "canvas" in React Native

【发布时间】：2017-02-19 17:48:34

【问题描述】：

我目前正在开发基于 React-Native 的图像处理移动应用程序。但是，我在 React-Native 官方网站上找不到任何关于图像裁剪、缩放、平移和保存功能（可以通过 html5 画布元素轻松实现）的相关文档。

我也做了一些谷歌搜索，但只找到一个“未维护”的 react-native-canvas (https://github.com/lwansbrough/react-native-canvas)。 React Native 中是否有任何等效的“画布”？

【问题讨论】：

react-native-canvas 似乎得到了维护——2017 年发布了一个新版本，最近发布了一个错误修复。但是，根据我的经验，它非常慢，因此除了最简单的应用程序外，它可能对任何其他应用都没有用。

@Jules 反应中矢量的正确方法是什么？ svg？帆布？ ?我想用没有质量损失的三角形制作背景图像，同时又很轻

【参考方案1】：

有一些选项“相似”但不完全相同。我的建议是……

React Native SVG - 感觉很像我们都熟悉的 SVG Web 组件。你可以用这个库做很多事情，甚至是动画。

ART（React Native 版本 found here）- React ART 库的“React Native”版本，它又是库 ART found here 的扩展。它与 React Native 一起提供，但我认为它尚未集成到默认设置中，因此它位于您的 node_modules 文件夹中，需要导入 XCode（讨论是 found here）。我通常将项目文件从它所在的 node_modules 文件夹 (node_modules/react-native/Libraries/ART/Art.xcodeproj) 拖到 React Native XCode 项目导航器中的库文件夹中。如果它要求复制资源，请单击是。之后，进入您的项目设置文件 -> 常规 -> 链接框架和库，然后按加号图标。搜索 ART 并将其添加为依赖项。

注意：如果您在过去几个月中刚刚按照官方“入门”指南开始使用 react-native，则默认指南是使用“expo”。 React Native SVG 默认包含在 expo 构建中。所以使用起来会容易很多。

【讨论】：

React Native ART 的主要问题是它似乎完全没有文档记录。有一个项目可以为它编写文档here，这可能很有用。

现在似乎有 一些 文档用于 ART，但还需要一些工作。

【参考方案2】：

嗯，两年后，你有一个新的选择：

https://alibaba.github.io/GCanvas/

此“GCanvas”专为本地环境设计，可运行 canvas2d 和 WebGL API。

见

https://alibaba.github.io/GCanvas/docs/Integrate%20GCanvas%20on%20ReactNative.html

【讨论】：

它看起来像一个有趣的项目，但它似乎还没有真正准备好用于生产用途。我一直无法让它在 ios 或 android 上编译，而且文档有点稀疏。不过，当它准备好时可能会非常好。

@Jules 您能否提供有关构建失败的更多信息？环境和错误信息会很好。

它是否管理触摸事件？从文档中看起来不是

@ShaofeiCheng 我一直试图在 ReactNative 上为我们制作这个 GCanvas，但我也无法让它运行。我刚刚遇到构建错误，RTCGCanvasView.h 找不到 React/RTCView.h。文档会过时吗？我很想试试这个库，因为我需要 RN->Canvas 通信性能..

我已经设法编译并使用了这个 fork：github.com/flyskywhy/react-native-gcanvas。到目前为止，性能似乎很出色。

【参考方案3】：

react-native-canvas 维护者在这里。自从提出这个问题以来，库中发生了很大变化：它是 React Native 最完整和兼容的画布组件，具有 Path2D 和渐变等高级功能，并且与默认的 Web 视图画布不同，它以高 DPI 呈现。

与其他 React Native 组件相比，该组件速度较慢，因为它在后台使用 WebView 进行渲染。与它的通信经过优化，在许多方面类似于 React Native 呈现原生视图的方式。折衷方案是该库不需要任何本机安装，仅依赖于 React Native javascript 运行时和本机 WebView

有一个想法是在 React Native JavaScript 运行时中渲染画布，尽管之前没有人在 JavaScript 运行时上制作过完整的非 DOM 画布，因此需要付出相当大的努力才能实现。

根据我们在 K Health 的经验，可以为响应式用户交互渲染足够快的图形，但对于完整的动画效果却不够快。该组件在我们拥有数千名用户的应用中使用。

react-native-canvas 的贡献者和用户，包括我自己，都非常愿意提供帮助，如果您有任何问题，可以随时打开问题或发送电子邮件。

【讨论】：

我正在创建一个 RN 项目，该项目从相机胶卷中获取图像并对其进行pixel sorting。在浏览器中，这通常是通过获取图像数据、对其进行操作并显然将其写入画布来完成的。你认为你的库是我可以用来在 React Native 中实现这一目标的东西吗？我可以做一些其他的黑客攻击并使用 phantomjs 处理图像并保存它们然后获取它们，但我宁愿在 RN 中完成所有操作。

是的，我想你可以。

非常感谢您的回复！我会继续尝试。

react-native-canvas 看起来很有用，但我无法绘制超过 300x150 的矩形。整个画布确实以正确的背景颜色显示，但我的 beginPath/moveTo/lineTo/stroke 调用似乎在画布左上角的 300x150 之外没有做任何事情。有什么想法吗？

要设置高度和重量，只需为画布设置它们：canvas.height = 400; canvas.width = 600;

【参考方案4】：

由于阿里巴巴 GCanvas feat: delete weex bridge & reactive bridge 和它的最终版本打破了在 Android 上的编译，这里来了 @flyskywhy/react-native-gcanvas npm 包。

经过几个月的努力，@flyskywhy/react-native-gcanvas 在 Android 和 iOS 上运行良好，修复了几个错误并添加了Changelog.md 中描述的feat: support drawImage() from require('some.png') on Android, iOS and Web，在 README.md 中使用详细的Example As Usage 进行重构。

使用Performance Test Result 和Convenient With Browser-like canvas APIs 以及易于移植的<canvas/> 示例react-native-particles-bg 在Android、iOS 和Web 上运行，@flyskywhy/react-native-gcanvas 是目前的最佳选择：P