fix(components): 修复在didMount中绘制的canvas会被清空的问题

NervJS · Apr 3, 2019 · 9687312 · 9687312
1 parent 17d804d
commit 9687312
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 13 deletions.
diff --git a/packages/taro-components/src/components/canvas/index.js b/packages/taro-components/src/components/canvas/index.js
@@ -1,7 +1,7 @@
+import Taro from '@tarojs/taro-h5'
 import Nerv, { findDOMNode } from 'nervjs'
 import touchable from '../../utils/touchable'
 import classnames from 'classnames'
-import { isNumber } from '../../utils/index'
 
 import './style/index.css'
 
@@ -15,16 +15,14 @@ import './style/index.css'
 // binderror EventHandle 当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'}
 
 @touchable()
-export default class Canvas extends Nerv.Component {
+export default class Canvas extends Taro.PureComponent {
   static defaultProps = {
     canvasId: '',
     disableScroll: false,
     bindError: null
   }
-  state = {
-    width: 300,
-    height: 150
-  }
+  width = 300
+  height = 150
   getWrapRef = ref => { 
     const dom = findDOMNode(ref)
     this.wrapDom = dom
@@ -36,14 +34,19 @@ export default class Canvas extends Nerv.Component {
   componentDidMount () {
     if (!this.wrapDom) return
     const { width, height } = this.wrapDom.getBoundingClientRect()
-    this.setState({
-      width,
-      height
+    this.canvasDom.setAttribute('width', width)
+    this.canvasDom.setAttribute('height', height)
+    this.width = width
+    this.height = height
+  }
+  componentDidCatch (e) {
+    const bindError = this.props.bindError
+    bindError && bindError({
+      errMsg: e.message
     })
   }
   render () {
     const { canvasId, onTouchStart, onTouchMove, onTouchEnd, onTouchCancel, className } = this.props
-    const { width, height } = this.state
     const wrapProps = {
       className: classnames('taro-canvas', className),
       ref: this.getWrapRef
@@ -54,9 +57,9 @@ export default class Canvas extends Nerv.Component {
       onTouchMove,
       onTouchEnd,
       onTouchCancel,
-      width,
-      height,
-      ref: this.canvasRef
+      width: this.width,
+      height: this.height,
+      ref: this.getCanvasRef
     }
     return (
       <div {...wrapProps}>

diff --git a/packages/taro-h5/src/api/canvas/canvasPutImageData.js b/packages/taro-h5/src/api/canvas/canvasPutImageData.js
@@ -17,6 +17,7 @@ import { findDOMNode } from 'nervjs'
  * 将像素数据绘制到画布。在自定义组件下，第二个参数传入自定义组件实例 this，以操作组件内 <canvas> 组件
  * @param {Param} object 参数
  * @param {Object} componentInstance 在自定义组件下，当前组件实例的this，以操作组件内 <canvas> 组件
+ * @todo 暂未支持尺寸相关功能
  */
 const canvasPutImageData = ({ canvasId, data, x, y, success, fail, complete }, componentInstance=document.body) => {
   const dom = findDOMNode(componentInstance)