Canvas
描述
- 在 Weex 上依赖 gcanvas
- 在支付宝小程序中依赖 canvas
- 在 Web 和 Weex 中可以通过 ref 获取画布实例，在小程序中需要通过 createCanvasContext 和画布的 id 获取 canvas 上下文
安装
$ npm install rax-canvas --save属性
| 属性 | 类型 | 默认值 | 必填 | 描述 | 支持 |
|---|---|---|---|---|---|
| style | Object | - | ✘ | 通过内联的方式设置画布样式 |     |
| className | Object | - | ✘ | 设置画布的样式 |     |
| width | number | 0 | ✘ | 设置画布的宽度 |     |
| height | number | 0 | ✘ | 设置画布的高度 |     |
| onClick | function | - | ✘ | 点击画布时触发的事件 |     |
| onLongPress | function | - | ✘ | 长按画布时触发的事件 |     |
| onTouchStart | function | - | ✘ | 触摸画布时触发的事件 |     |
| onTouchMove | function | - | ✘ | 手指在画布上移动时触发的事件 |     |
| onTouchEnd | function | - | ✘ | 结束触摸时触发的事件 |     |
| onTouchCancel | function | - | ✘ | 触摸事件取消的时候触发的事件 |     |
注：基础属性、事件及图片含义见组件概述。
方法
获取到画布实例后，可以使用实例上的方法。
注意
直接指定 width 或者 height 的优先级高于在 style 和 className 中指定的宽高。
示例
import { createElement, Component, render, createRef } from 'rax';
import Canvas from 'rax-canvas';
import DriverUniversal from "driver-universal"
class CanvasSample extends Component {
constructor(props) {
super(props);
this.raxCanvasDemo = createRef()
}
componentDidMount() {
const context = this.raxCanvasDemo.current.getContext();
context.fillStyle = 'red';
context.fillRect(0, 0, 100, 100);
}
render() {
return <Canvas style={{
width: 750,
height: 750
}} ref={this.raxCanvasDemo} />;
}
}
render(<CanvasSample />, document.body, { driver: DriverUniversal });