React Native中与"canvas"等效的内容

Question

我目前正在开发一款基于React-Native的图像处理移动应用。然而，我在React-Native官方网站上找不到有关图像裁剪、缩放、平移和保存功能的相关文档（这些功能在HTML5画布元素中可以轻松实现）。

我也进行了一些谷歌搜索，但只找到一个“未维护”的react-native-canvas（https://github.com/lwansbrough/react-native-canvas）。在React Native中是否有类似“canvas”的东西呢？

- user6318446

---

react-native-canvas 似乎正在得到维护 -- 2017 年发布了新版本并最近发布了一个错误修复。然而，根据我的经验，它非常缓慢，因此可能仅适用于最简单的应用程序。 - Jules

@Jules，在React中使用向量图的正确方法是什么？SVG？Canvas？PNG？我想制作一个带有三角形的背景图像，既没有质量损失，同时又非常轻量级。 - Mr-Programs

Answer 1

我是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的贡献者和用户，包括我自己，非常愿意提供帮助，如果您有任何问题，请随时提出问题或发送电子邮件。

- Iddan Aaronsohn

---

我正在创建一个RN项目，从相机胶卷中获取图像并对它们进行像素排序。在浏览器中，这通常是通过获取图像数据、操作它，并将其写入画布来完成的。您认为您的库是否可以用于在React Native中实现此功能？我可以使用一些其他技巧，使用phantomjs处理图像并保存它们，然后再获取它们，但我宁愿在RN中全部完成。 - Stephen Tetreault

是的，我认为你可以。 - Iddan Aaronsohn

要设置画布的高度和宽度，只需为画布设置相应的值即可：canvas.height = 400; canvas.width = 600; - Iddan Aaronsohn

虽然以前没有人在JavaScript运行时创建过一个功能完整的无DOM画布，但是https://github.com/phoboslab/Ejecta 怎么样？虽然只能在iOS上使用，但是这是一个很好的起点。我只是想插一句话。 - Chris Kowalski

@IddanAaronsohn 有没有相关的教程？我想做一个绘图应用，需要画矩形、正方形等自由形状。这是否可行？有没有任何教程或提示可以帮助我完成？ - Vikas Acharya

Answer 2

好的，经过两年的时间，现在有一个新的选择：

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

这个“GCanvas”是为本地环境设计的，可以运行canvas2d和WebGL API。

请参见：

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

- Shaofei Cheng

---

这个项目看起来很有趣，但似乎还没有准备好供生产使用。我无法在iOS或Android上编译它，而且文档有点少。不过当它准备好后可能会非常好用。 - Jules

@Jules，你能提供更多关于构建失败的信息吗？环境和错误消息会很有帮助。 - Shaofei Cheng

它是否管理触摸事件？从文档上看似乎不是。 - Claudio Ferraro

@ShaofeiCheng，我一直在尝试在ReactNative上创建GCanvas，但无法运行。构建时出现错误，RTCGCanvasView.h找不到React/RTCView.h。文档可能过时了吗？我很想尝试这个库，因为我需要RN->Canvas通信性能.. - Benjamin Beaumont

我已经成功地将这个编译并且使用了这个分支：https://github.com/flyskywhy/react-native-gcanvas。目前性能表现非常出色。 - ArtHare

Answer 3

有几个选项“类似”，但并不完全相同。我的建议是...

• React Native SVG - 感觉很像我们都熟悉的SVG Web组件。您可以使用此库执行许多操作，甚至包括动画。

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

注意：如果您刚开始使用react-native，并遵循最近几个月的官方“入门”指南，则默认指南是使用“expo”。而React Native SVG默认包含在expo构建中。因此，使用它会更加容易。

- GoreDefex

---

React Native ART 的主要问题在于它似乎完全没有文档记录。这里有一个编写文档的项目（链接：https://github.com/react-native-china/react-native-ART-doc/blob/master/doc.md），可能会很有用。 - Jules

似乎现在有一些关于ART的文档，但仍需要一些工作。 - Stephen Tetreault

Answer 4

自从阿里巴巴 GCanvas 删除了 weex bridge 和 reactive bridge 并进行了最终发布，导致在 Android 上编译失败。因此，现在有了 @flyskywhy/react-native-gcanvas npm 包。

经过数月的工作，@flyskywhy/react-native-gcanvas 在 Android 和 iOS 上运行良好，修复了一些错误，并添加了支持 drawImage() 方法的特性，可以从 require('some.png') 上获取图片。更多详情请见 Changelog.md，在 README.md 中有详细的 Example As Usage。

根据 Performance Test Result 和 Convenient With Browser-like canvas APIs，使用轻松的 编写的 react-native-particles-bg 例子可以在 Android、iOS 和 Web 上运行。所以，@flyskywhy/react-native-gcanvas 是目前最佳选择 :P

- Li Zheng