react-canvas 中文文档
最近在项目中将要用到react-canvas,因此提前恶补一下canvas相关内容，顺便将react-canvas的文档翻译了一下。
react-canvas
React Canvas增加了React组件渲染到canvas而不是DOM的能力。
这个项目正在进行中。尽管大部分代码都是在flipboard.com上生产的，但是React画布绑定是相对较新的，而API可能会发生变化。
目的
构建面向移动设备的界面有悠久的历史，我们发现与本地应用程序相比，移动Web应用程序感觉缓慢的原因是DOM。 CSS动画和过渡是在Web上实现平滑动画的最快途径，但它们有一些限制。 React Canvas利用现代移动浏览器拥有硬件加速画布的事实。
虽然还有其他将画布绘图API绑定到React的尝试，但是它们更侧重于可视化和游戏。React Canvas的不同之处在于重点构建应用程序用户界面。事实上，它是对渲染到convas上行为的具体实现。
React Canvas带来了Web开发人员熟悉的一些API，并将它们与高性能绘图引擎混合在一起。
安装
React Canvas可通过npm获得：
npm install react-canvas
React Canvas 组件
React Canvas提供了一组标准的React组件，这些组件是底层渲染实现的抽象（封装）。
<Surface>
Surface 是顶级组件。你可以将它视为为绘图画布，并且可以在它里面放置其他组件。
<Layer>
Layer 是构建其他组件的基础组件。常见的样式和属性，如top，width，left，height，backgroundColor和zIndex在此级别表示。
<Group>
Group是容器组件。因为React强制所有组件在render（）中返回单个组件，所以Group可用于对一组子组件进行合并。Group也是优化滚动性能的重要组成部分，因为它允许渲染引擎缓存昂贵的绘图操作。
<Text>
Text 是一个灵活的组件，支持多行截断，这在DOM中历来是非常困难和昂贵的。
<Image>
Image 和平时使用的Image一样。然而，它增加了一些能力：隐藏图像，直到它被完全加载，并且可以在加载时淡入。
<Gradient>
Gradient可用于设置组或表面的背景。
render() {
...
return (
<Group style={this.getStyle()}>
<Gradient style={this.getGradientStyle()}
colorStops={this.getGradientColors()} />
</Group>
);
}
getGradientColors(){
return [
{ color: "transparent", position: 0 },
{ color: "#000", position: 1 }
]
}
<ListView>
ListView是一个触摸滚动容器，用于呈现列中的元素列表。你可以把它理解为web端的UITableView(注：UITableView是ios的表视图组件）。它使用了许多相同的优化，可以像iOS上的表视图和Android上的列表视图一样快速。
事件
React Canvas组件支持与正常的React组件相同的事件模型。但是，并不是所有的事件类型都被支持。
有关支持的事件的完整列表，请参阅EventTypes。
构建组件
这是一个将文本呈现在图像下方 的简单组件：
var React = require('react');
var ReactCanvas = require('react-canvas');
var Surface = ReactCanvas.Surface;
var Image = ReactCanvas.Image;
var Text = ReactCanvas.Text;
var MyComponent = React.createClass({
render: function () {
var surfaceWidth = window.innerWidth;
var surfaceHeight = window.innerHeight;
var imageStyle = this.getImageStyle();
var textStyle = this.getTextStyle();
return (
<Surface width={surfaceWidth} height={surfaceHeight} left={0} top={0}>
<Image style={imageStyle} src='...' />
<Text style={textStyle}>
Here is some text below an image.
</Text>
</Surface>
);
},
getImageHeight: function () {
return Math.round(window.innerHeight / 2);
},
getImageStyle: function () {
return {
top: 0,
left: 0,
width: window.innerWidth,
height: this.getImageHeight()
};
},
getTextStyle: function () {
return {
top: this.getImageHeight() + 10,
left: 0,
width: window.innerWidth,
height: 20,
lineHeight: 20,
fontSize: 12
};
}
});
ListView
许多移动界面都会用到无限长的滚动列表。 React Canvas提供了ListView组件来做到这一点。因为ListView在视图外虚拟元素，所以传递子对象不同于在render（）中声明子节点的正常的React组件。
numberOfItemsGetter, itemHeightGetter and itemGetter等 props 是必需的。
var ListView = ReactCanvas.ListView;
var MyScrollingListView = React.createClass({
render: function () {
return (
<ListView
numberOfItemsGetter={this.getNumberOfItems}
itemHeightGetter={this.getItemHeight}
itemGetter={this.renderItem} />
);
},
getNumberOfItems: function () {
// Return the total number of items in the list
},
getItemHeight: function () {
// Return the height of a single item
},
renderItem: function (index) {
// Render the item at the given index, usually a <Group>
},
});
请参阅时间轴示例以获取更完整的示例。
目前，ListView要求每个项目的高度相同。未来版本将支持可变高度项目。
Text sizing
React Canvas提供了用于计算文本度量的measureText函数。时间轴示例中的页面组件包含使用measureText实现精确多行折叠文本的示例。自定义字体当前不受支持，但将在以后的版本中添加。
css-layout
使用css-layout来设置React Canvas组件的样式，目前还处于的实验阶段。这是比使用标准CSS样式和flexbox定义组件样式更具表现力的方式。未来的版本可能不支持外部css-layout。在作为核心布局原则使用之前，仍需要对性能影响进行调研。
请参阅css-layout示例。
适配性
这方面需要进一步的探索。使用“后备内容”（convas DOM子树）允许屏幕阅读器（如VoiceOver）与内容进行交互。我们已经使用我们测试过的iOS设备看到了不同的结果。此外，还有一个标准的焦点管理，但浏览器不支持。Bespin在2009年提出的一种方法是保持与canvas中渲染的元素同步的并行DOM(parallel DOM)。
运行样例
npm install
npm start
这将启动一个位于端口8080的实时重加载服务器。要想覆盖默认服务器和实时重加载端口，请使用PORT和/或RELOAD_PORT环境变量运行npm启动即可。
使用 webpack
需要使用brfs转换后，才能使用webpack的项目。
npm install -g brfs
npm install --save-dev transform-loader brfs
然后将brfs转换添加到您的webpack config文件中
module: {
postLoaders: [
{ loader: "transform?brfs" }
]
}
贡献者
我们欢迎提供错误修复，新特性和改进React Canvas的意见或建议。在主要资料库的贡献者必须接受Flipboard的Apache风格的个人贡献者许可协议（CLA），才能合并任何更改。
以上译文由CocoaYog翻译，英文原文来自 react-convas README.md文件，如有任何问题请联系：cocoayog@163.com
网友评论