rax-canvas

描述： 画布组件.

在 Weex 上依赖 gcanvas 在支付宝小程序中依赖 canvas 在 Web 和 Weex 中可以通过 ref 获取画布实例，在小程序中需要通过 createCanvasContext 和画布的 id 获取 canvas 上下文

安装

$ npm install rax-canvas --save

引用

import Canvas from 'rax-canvas';

属性

注： 1、支持列表中的 代表 Web 代表 weex 代表阿里小程序代表微信小程序

属性	类型	默认值	必填	描述	支持
style	Object	-	✘	通过内联的方式设置画布样式	代表微信小程序
className	Object	-	✘	设置画布的样式	代表微信小程序
width	Number	0	✘	设置画布的宽度	代表微信小程序
height	Number	0	✘	设置画布的高度	代表微信小程序
onClick	Function	-	✘	点击画布时触发的事件	代表微信小程序
onLongPress	Function	-	✘	长按画布时触发的事件	代表微信小程序
onTouchStart	Function	-	✘	触摸画布时触发的事件	代表微信小程序
onTouchMove	Function	-	✘	手指在画布上移动时触发的事件	代表微信小程序
onTouchEnd	Function	-	✘	结束触摸时触发的事件	代表微信小程序
onTouchCancel	Function	-	✘	触摸事件取消的时候触发的事件	代表微信小程序

方法

获取到画布实例后，可以使用实例上的方法。

示例

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 });

注意

直接指定 width 或者 height 的优先级高于在 style 和 className 中指定的宽高。