From 9687312f7af54fbb5effef4a807bb6d0f0aea232 Mon Sep 17 00:00:00 2001
From: littly <544028951@qq.com>
Date: Wed, 3 Apr 2019 10:43:59 +0800
Subject: [PATCH] =?UTF-8?q?fix(components):=20=E4=BF=AE=E5=A4=8D=E5=9C=A8d?=
 =?UTF-8?q?idMount=E4=B8=AD=E7=BB=98=E5=88=B6=E7=9A=84canvas=E4=BC=9A?=
 =?UTF-8?q?=E8=A2=AB=E6=B8=85=E7=A9=BA=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/canvas/index.js            | 29 ++++++++++---------
 .../src/api/canvas/canvasPutImageData.js      |  1 +
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/taro-components/src/components/canvas/index.js b/packages/taro-components/src/components/canvas/index.js
index 10e63c8e0d59..858497719548 100644
--- 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
index 41176752a056..3f87bc59bbaa 100644
--- 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)