Skip to content

Commit

Permalink
feat(h5): canvas系列api现在不强制传this了
Browse files Browse the repository at this point in the history
  • Loading branch information
Littly committed Apr 15, 2019
1 parent 7fb605d commit 4cbaab3
Show file tree
Hide file tree
Showing 7 changed files with 41 additions and 27 deletions.
5 changes: 4 additions & 1 deletion packages/taro-cli/src/h5.js
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,10 @@ const MAP_FROM_COMPONENTNAME_TO_ID = new Map([
])
const APIS_NEED_TO_APPEND_THIS = new Map([
['createVideoContext', 1],
['createCanvasContext', 1]
['createCanvasContext', 1],
['canvasGetImageData', 1],
['canvasPutImageData', 1],
['canvasToTempFilePath', 1]
])

if (projectConfig.hasOwnProperty(DEVICE_RATIO)) {
Expand Down
12 changes: 5 additions & 7 deletions packages/taro-components/src/components/canvas/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,19 +31,17 @@ class Canvas extends Taro.PureComponent {
props
width = 300
height = 150
getWrapRef = ref => {
const dom = findDOMNode(ref)
this.wrapDom = dom
getWrapRef = ref => {
if (ref) this.wrapDom = ref
}
getCanvasRef = ref => {
const dom = findDOMNode(ref)
this.canvasDom = dom
if (ref) this.canvasRef = ref
}
componentDidMount () {
if (!this.wrapDom) return
const { width, height } = this.wrapDom.getBoundingClientRect()
this.canvasDom.setAttribute('width', width)
this.canvasDom.setAttribute('height', height)
this.canvasRef.setAttribute('width', width)
this.canvasRef.setAttribute('height', height)
this.width = width
this.height = height
}
Expand Down
12 changes: 7 additions & 5 deletions packages/taro-h5/src/api/canvas/canvasGetImageData.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { findDOMNode } from 'nervjs'
import { findRef } from '../utils/index'

/**
* @typedef {Object} Param
Expand All @@ -15,13 +15,15 @@ import { findDOMNode } from 'nervjs'
/**
* 获取 canvas 区域隐含的像素数据。
* @param {Param} object 参数
* @param {Object} componentInstance
* @param {Object} componentInstance 在自定义组件下,当前组件实例的this,以操作组件内 <canvas> 组件
*/
const canvasGetImageData = ({ canvasId, success, fail, complete, x, y, width, height }, componentInstance=document.body) => {
const dom = findDOMNode(componentInstance)
const canvasGetImageData = ({ canvasId, success, fail, complete, x, y, width, height }, componentInstance) => {
const refId = `__taroref_${canvasId}`
const component = findRef(refId, componentInstance)

/** @type {HTMLCanvasElement} */
const canvas = dom.querySelector(`[canvasId=${canvasId}]`);
const canvas = component.vnode.dom.querySelector(`[canvasId=${canvasId}]`);

try {
const ctx = canvas.getContext('2d')
const data = ctx.getImageData(x, y, width, height)
Expand Down
10 changes: 6 additions & 4 deletions packages/taro-h5/src/api/canvas/canvasPutImageData.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { findDOMNode } from 'nervjs'
import { findRef } from '../utils/index'

/**
* @typedef {Object} Param
Expand All @@ -19,11 +19,13 @@ import { findDOMNode } from 'nervjs'
* @param {Object} componentInstance 在自定义组件下,当前组件实例的this,以操作组件内 <canvas> 组件
* @todo 暂未支持尺寸相关功能
*/
const canvasPutImageData = ({ canvasId, data, x, y, success, fail, complete }, componentInstance=document.body) => {
const dom = findDOMNode(componentInstance)
const canvasPutImageData = ({ canvasId, data, x, y, success, fail, complete }, componentInstance) => {
const refId = `__taroref_${canvasId}`
const component = findRef(refId, componentInstance)

/** @type {HTMLCanvasElement} */
const canvas = dom.querySelector(`[canvasId=${canvasId}]`);
const canvas = component.vnode.dom.querySelector(`[canvasId=${canvasId}]`);

try {
const ctx = canvas.getContext('2d')

Expand Down
9 changes: 5 additions & 4 deletions packages/taro-h5/src/api/canvas/canvasToTempFilePath.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { findDOMNode } from 'nervjs'
import { findRef } from '../utils/index'

/**
* @typedef {Object} Param
Expand All @@ -22,11 +22,12 @@ import { findDOMNode } from 'nervjs'
* @param {Object} componentInstance 在自定义组件下,当前组件实例的this,以操作组件内 <canvas> 组件
* @todo 暂未支持尺寸相关功能
*/
const canvasToTempFilePath = ({ canvasId, fileType, quality, success, fail, complete }, componentInstance=document.body) => {
const dom = findDOMNode(componentInstance)
const canvasToTempFilePath = ({ canvasId, fileType, quality, success, fail, complete }, componentInstance) => {
const refId = `__taroref_${canvasId}`
const component = findRef(refId, componentInstance)

/** @type {HTMLCanvasElement} */
const canvas = dom.querySelector(`[canvasId=${canvasId}]`);
const canvas = component.vnode.dom.querySelector(`[canvasId=${canvasId}]`);

try {
// /** @type {CanvasRenderingContext2D} */
Expand Down
11 changes: 6 additions & 5 deletions packages/taro-h5/src/api/canvas/createCanvasContext.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import { findDOMNode } from 'nervjs'
import { isFunction } from '../utils/index'
import { isFunction, findRef } from '../utils/index'

/**
* 创建 canvas 的绘图上下文 CanvasContext 对象
* @param {string} canvasId 要获取上下文的 <canvas> 组件 canvas-id 属性
* @param {Object} componentInstance 在自定义组件下,当前组件实例的this,表示在这个自定义组件下查找拥有 canvas-id 的 <canvas> ,如果省略则不在任何自定义组件内查找
*/
const createCanvasContext = (canvasId, componentInstance=document.body) => {
const dom = findDOMNode(componentInstance)
const createCanvasContext = (canvasId, componentInstance) => {
const refId = `__taroref_${canvasId}`
const component = findRef(refId, componentInstance)

/** @type {HTMLCanvasElement} */
const canvas = dom.querySelector(`[canvasId=${canvasId}]`);
const canvas = component.vnode.dom.querySelector(`[canvasId=${canvasId}]`);

/** @type {CanvasRenderingContext2D} */
const ctx = canvas.getContext('2d');
Expand Down
9 changes: 8 additions & 1 deletion packages/taro/types/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7819,6 +7819,13 @@ declare namespace Taro {
*/
complete?: Param0PropComplete
}

type Promised = {
/** errMsg */
errMsg: string
/** 生成文件的临时路径 */
tempFilePath: string
}
/**
* 接口调用成功的回调函数
*/
Expand Down Expand Up @@ -7857,7 +7864,7 @@ declare namespace Taro {
* ```
* @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/temp-file.html#wxcanvastotempfilepathobject-this
*/
function canvasToTempFilePath(OBJECT: canvasToTempFilePath.Param0, instance?: any): void
function canvasToTempFilePath(OBJECT: canvasToTempFilePath.Param0, instance?: any): Promise<canvasToTempFilePath.Promised>

namespace canvasGetImageData {
type Promised = {
Expand Down

0 comments on commit 4cbaab3

Please sign in to comment.