Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
ec92eb83
H
hello uni-app x
项目概览
DCloud
/
hello uni-app x
通知
5995
Star
90
Fork
162
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
18
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello uni-app x
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
18
Issue
18
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
ec92eb83
编写于
7月 26, 2024
作者:
lizhongyi_
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'dev' of
https://gitcode.net/dcloud/hello-uni-app-x
into dev
上级
ae73164d
9f3821e1
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
52 addition
and
65 deletion
+52
-65
pages/API/create-canvas-context-async/child-canvas.uvue
pages/API/create-canvas-context-async/child-canvas.uvue
+16
-19
pages/API/create-canvas-context-async/create-canvas-context-async.test.js
...-canvas-context-async/create-canvas-context-async.test.js
+20
-27
pages/API/create-canvas-context-async/create-canvas-context-async.uvue
...ate-canvas-context-async/create-canvas-context-async.uvue
+16
-19
未找到文件。
pages/API/create-canvas-context-async/child-canvas.uvue
浏览文件 @
ec92eb83
<template>
<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>
</template>
<script>
type getContext = {
ctx : boolean,
hasFillRect : boolean
}
export default {
data() {
return {
context: null as CanvasRenderingContext2D | null
}
},
getContext() {
return {
ctx: typeof this.context,
hasFillRect: typeof this.context?.fillRect === 'function',
return { isCanvasContextNull : false
}
},
mounted() {
this.$nextTick(() => {
uni.createCanvasContextAsync({
id: 'canvas',
component: this,
success: (res : CanvasContext) => {
console.log('child component', res);
this.context = res.getContext('2d');
const context = res.getContext('2d')!; this.isCanvasContextNull = true
// 若干绘制调用
// 绘制红色正方形
this.
context.fillStyle = "rgb(200, 0, 0)";
this.
context.fillRect(10, 10, 50, 50);
context.fillStyle = "rgb(200, 0, 0)";
context.fillRect(10, 10, 50, 50);
// 绘制蓝色半透明正方形
this.context.fillStyle = "rgba(0, 0, 200, 0.5)";
this.context.fillRect(30, 30, 50, 50);
this.context.draw();
},
fail: (err : UniError) => {
context.fillStyle = "rgba(0, 0, 200, 0.5)";
context.fillRect(30, 30, 50, 50);
context.draw();
}
})
})
}
}
</script>
</script>
\ No newline at end of file
...
...
pages/API/create-canvas-context-async/create-canvas-context-async.test.js
浏览文件 @
ec92eb83
const
PAGE_PATH
=
'
/pages/API/create-canvas-context-async/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
beforeAll
(
async
()
=>
{
page
=
await
program
.
reLaunch
(
PAGE_PATH
)
await
page
.
waitFor
(
'
view
'
)
})
let
page
beforeAll
(
async
()
=>
{
page
=
await
program
.
reLaunch
(
PAGE_PATH
)
await
page
.
waitFor
(
'
view
'
)
})
it
(
'
page canvas
'
,
async
()
=>
{
await
page
.
waitFor
(
100
)
const
data
=
await
page
.
callMethod
(
'
getContext
'
)
expect
(
data
.
ctx
).
toBe
(
'
object
'
)
expect
(
data
.
hasFillRect
).
toBe
(
true
)
})
it
(
'
page canvas
'
,
async
()
=>
{
await
page
.
waitFor
(
100
)
const
data
=
await
page
.
data
()
expect
(
data
.
isCanvasContextNull
).
toBe
(
true
)
})
it
(
'
component canvas
'
,
async
()
=>
{
// child-canvas
await
page
.
waitFor
(
100
)
// const element = await page.$('.node-child-component')
const
element
=
await
page
.
$
(
'
child-canvas
'
)
const
data
=
await
page
.
callMethod
(
'
getContext
'
)
expect
(
data
.
ctx
).
toBe
(
'
object
'
)
expect
(
data
.
hasFillRect
).
toBe
(
true
)
})
})
it
(
'
component canvas
'
,
async
()
=>
{
// child-canvas
await
page
.
waitFor
(
100
)
// const element = await page.$('.node-child-component')
const
element
=
await
page
.
$
(
'
child-canvas
'
)
const
data
=
await
page
.
data
(
)
expect
(
data
.
isCanvasContextNull
).
toBe
(
true
)
})
})
\ No newline at end of file
pages/API/create-canvas-context-async/create-canvas-context-async.uvue
浏览文件 @
ec92eb83
...
...
@@ -2,48 +2,45 @@
<view>
<view>create canvas context async</view>
<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" />
</view>
</template>
<script>
import childCanvas from './child-canvas.uvue';
type getContext = {
ctx : boolean,
hasFillRect : boolean
}
export default {
components: {
childCanvas
},
data() {
return {
context: null as CanvasRenderingContext2D | null
isCanvasContextNull: false
}
},
methods: {
// 自动化测试
getContext() {
return {
ctx: typeof this.context,
hasFillRect: typeof this.context?.fillRect === 'function',
}
},
drawImage() {
console.log(876);
uni.createCanvasContextAsync({
id: 'canvas',
component: null,
success: (res : CanvasContext) => {
this.context = res.getContext('2d');
const context = res.getContext('2d')!;
this.isCanvasContextNull = true
// 若干绘制调用
// 绘制红色正方形
this.
context.fillStyle = "rgb(200, 0, 0)";
this.
context.fillRect(10, 10, 50, 50);
context.fillStyle = "rgb(200, 0, 0)";
context.fillRect(10, 10, 50, 50);
// 绘制蓝色半透明正方形
this.context.fillStyle = "rgba(0, 0, 200, 0.5)";
this.context.fillRect(30, 30, 50, 50);
this.context.draw();
},
fail: (err : UniError) => {
context.fillStyle = "rgba(0, 0, 200, 0.5)";
context.fillRect(30, 30, 50, 50);
context.draw();
}
})
}
...
...
@@ -52,4 +49,4 @@
this.drawImage()
}
}
</script>
</script>
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录