提交 ec92eb83 编写于 作者: lizhongyi_'s avatar lizhongyi_

Merge branch 'dev' of https://gitcode.net/dcloud/hello-uni-app-x into dev

<template> <template>
<view> <view>
<canvas class="child-canvas" id="canvas" style="height: 100px;border: 1px solid red;"></canvas> <canvas class="child-canvas" id="canvas" style="height: 100px;border: 1px solid red;"></canvas> <view>isCanvasContextNull: {{isCanvasContextNull}}</view>
</view> </view>
</template> </template>
<script> <script>
type getContext = {
ctx : boolean,
hasFillRect : boolean
}
export default { export default {
data() { data() {
return { return { isCanvasContextNull : false
context: null as CanvasRenderingContext2D | null
}
},
getContext() {
return {
ctx: typeof this.context,
hasFillRect: typeof this.context?.fillRect === 'function',
} }
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
uni.createCanvasContextAsync({ uni.createCanvasContextAsync({
id: 'canvas', id: 'canvas',
component: this, component: this,
success: (res : CanvasContext) => { success: (res : CanvasContext) => {
console.log('child component', res); const context = res.getContext('2d')!; this.isCanvasContextNull = true
this.context = res.getContext('2d');
// 若干绘制调用 // 若干绘制调用
// 绘制红色正方形 // 绘制红色正方形
this.context.fillStyle = "rgb(200, 0, 0)"; context.fillStyle = "rgb(200, 0, 0)";
this.context.fillRect(10, 10, 50, 50); context.fillRect(10, 10, 50, 50);
// 绘制蓝色半透明正方形 // 绘制蓝色半透明正方形
this.context.fillStyle = "rgba(0, 0, 200, 0.5)"; context.fillStyle = "rgba(0, 0, 200, 0.5)";
this.context.fillRect(30, 30, 50, 50); context.fillRect(30, 30, 50, 50);
this.context.draw(); context.draw();
},
fail: (err : UniError) => {
} }
}) })
}) })
} }
......
const PAGE_PATH = '/pages/API/create-canvas-context-async/create-canvas-context-async' const PAGE_PATH = '/pages/API/create-canvas-context-async/create-canvas-context-async'
describe('create-canvas-context-async', () => { describe('create-canvas-context-async', () => {
if (!process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
it('ios only', () => {
expect(1).toBe(1)
})
return
}
let page let page
beforeAll(async () => { beforeAll(async () => {
page = await program.reLaunch(PAGE_PATH) page = await program.reLaunch(PAGE_PATH)
...@@ -15,9 +9,8 @@ describe('create-canvas-context-async', () => { ...@@ -15,9 +9,8 @@ describe('create-canvas-context-async', () => {
it('page canvas', async () => { it('page canvas', async () => {
await page.waitFor(100) await page.waitFor(100)
const data = await page.callMethod('getContext') const data = await page.data()
expect(data.ctx).toBe('object') expect(data.isCanvasContextNull).toBe(true)
expect(data.hasFillRect).toBe(true)
}) })
it('component canvas', async () => { it('component canvas', async () => {
...@@ -25,8 +18,8 @@ describe('create-canvas-context-async', () => { ...@@ -25,8 +18,8 @@ describe('create-canvas-context-async', () => {
await page.waitFor(100) await page.waitFor(100)
// const element = await page.$('.node-child-component') // const element = await page.$('.node-child-component')
const element = await page.$('child-canvas') const element = await page.$('child-canvas')
const data = await page.callMethod('getContext') const data = await page.data()
expect(data.ctx).toBe('object') expect(data.isCanvasContextNull).toBe(true)
expect(data.hasFillRect).toBe(true)
}) })
}) })
\ No newline at end of file
...@@ -2,48 +2,45 @@ ...@@ -2,48 +2,45 @@
<view> <view>
<view>create canvas context async</view> <view>create canvas context async</view>
<canvas id="canvas" class="canvas-home" style="height: 100px;border: 1px solid blue;"></canvas> <canvas id="canvas" class="canvas-home" style="height: 100px;border: 1px solid blue;"></canvas>
<view style="margin-top: 30px;"></view> <view style="margin-top: 30px;"></view> <view>isCanvasContextNull: {{isCanvasContextNull}}</view>
<child-canvas class="node-child-component" /> <child-canvas class="node-child-component" />
</view> </view>
</template> </template>
<script> <script>
import childCanvas from './child-canvas.uvue'; import childCanvas from './child-canvas.uvue';
type getContext = {
ctx : boolean,
hasFillRect : boolean
}
export default { export default {
components: { components: {
childCanvas childCanvas
}, },
data() { data() {
return { return {
context: null as CanvasRenderingContext2D | null isCanvasContextNull: false
} }
}, },
methods: { methods: {
// 自动化测试
getContext() {
return {
ctx: typeof this.context,
hasFillRect: typeof this.context?.fillRect === 'function',
}
},
drawImage() { drawImage() {
console.log(876);
uni.createCanvasContextAsync({ uni.createCanvasContextAsync({
id: 'canvas', id: 'canvas',
component: null, component: null,
success: (res : CanvasContext) => { success: (res : CanvasContext) => {
this.context = res.getContext('2d'); const context = res.getContext('2d')!;
this.isCanvasContextNull = true
// 若干绘制调用 // 若干绘制调用
// 绘制红色正方形 // 绘制红色正方形
this.context.fillStyle = "rgb(200, 0, 0)"; context.fillStyle = "rgb(200, 0, 0)";
this.context.fillRect(10, 10, 50, 50); context.fillRect(10, 10, 50, 50);
// 绘制蓝色半透明正方形 // 绘制蓝色半透明正方形
this.context.fillStyle = "rgba(0, 0, 200, 0.5)"; context.fillStyle = "rgba(0, 0, 200, 0.5)";
this.context.fillRect(30, 30, 50, 50); context.fillRect(30, 30, 50, 50);
this.context.draw(); context.draw();
},
fail: (err : UniError) => {
} }
}) })
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册