Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
7accd9a5
D
Docs
项目概览
OpenHarmony
/
Docs
1 年多 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
未验证
提交
7accd9a5
编写于
6月 25, 2023
作者:
O
openharmony_ci
提交者:
Gitee
6月 25, 2023
浏览文件
操作
浏览文件
下载
差异文件
!20067 优化ArkTS卡片自定义绘制的Demo
Merge pull request !20067 from zhongjianfei/mm0621
上级
b0a20005
18ff0141
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
35 addition
and
22 deletion
+35
-22
zh-cn/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md
...application-models/arkts-ui-widget-page-custom-drawing.md
+35
-22
zh-cn/application-dev/application-models/figures/WidgetCanvasDemo.jpeg
...tion-dev/application-models/figures/WidgetCanvasDemo.jpeg
+0
-0
zh-cn/application-dev/application-models/figures/WidgetCanvasDemo.png
...ation-dev/application-models/figures/WidgetCanvasDemo.png
+0
-0
未找到文件。
zh-cn/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md
浏览文件 @
7accd9a5
...
...
@@ -6,7 +6,7 @@ ArkTS卡片开放了自定义绘制的能力,在卡片上可以通过[Canvas](
```
ts
@
Entry
@
Component
struct
Card
{
struct
Widget
Card
{
private
canvasWidth
:
number
=
0
;
private
canvasHeight
:
number
=
0
;
// 初始化CanvasRenderingContext2D和RenderingContextSettings
...
...
@@ -26,9 +26,9 @@ struct Card {
this
.
canvasWidth
=
this
.
context
.
width
;
this
.
canvasHeight
=
this
.
context
.
height
;
// 绘制画布的背景
this
.
context
.
fillStyle
=
'
rgba(203, 154, 126, 1.00)
'
;
this
.
context
.
fillStyle
=
'
#EEF0FF
'
;
this
.
context
.
fillRect
(
0
,
0
,
this
.
canvasWidth
,
this
.
canvasHeight
);
// 在画布的中心绘制一个
红色的
圆
// 在画布的中心绘制一个圆
this
.
context
.
beginPath
();
let
radius
=
this
.
context
.
width
/
3
;
let
circleX
=
this
.
context
.
width
/
2
;
...
...
@@ -36,35 +36,48 @@ struct Card {
this
.
context
.
moveTo
(
circleX
-
radius
,
circleY
);
this
.
context
.
arc
(
circleX
,
circleY
,
radius
,
2
*
Math
.
PI
,
0
,
true
);
this
.
context
.
closePath
();
this
.
context
.
fillStyle
=
'
red
'
;
this
.
context
.
fillStyle
=
'
#5A5FFF
'
;
this
.
context
.
fill
();
// 绘制笑脸的左眼
let
leftR
=
radius
/
4
;
let
leftX
=
circleX
-
(
radius
/
2
);
let
leftY
=
circleY
-
(
radius
/
3
.5
);
let
leftR
=
radius
/
13
;
let
leftX
=
circleX
-
(
radius
/
2
.3
);
let
leftY
=
circleY
-
(
radius
/
4
.5
);
this
.
context
.
beginPath
();
this
.
context
.
arc
(
leftX
,
leftY
,
leftR
,
0
,
Math
.
PI
,
true
);
this
.
context
.
strokeStyle
=
'
#
ffff00
'
;
this
.
context
.
lineWidth
=
1
0
;
this
.
context
.
arc
(
leftX
,
leftY
,
leftR
,
0
,
2
*
Math
.
PI
,
true
);
this
.
context
.
strokeStyle
=
'
#
FFFFFF
'
;
this
.
context
.
lineWidth
=
1
5
;
this
.
context
.
stroke
();
// 绘制笑脸的右眼
let
rightR
=
radius
/
4
;
let
rightX
=
circleX
+
(
radius
/
2
);
let
rightY
=
circleY
-
(
radius
/
3
.5
);
let
rightR
=
radius
/
13
;
let
rightX
=
circleX
+
(
radius
/
2
.3
);
let
rightY
=
circleY
-
(
radius
/
4
.5
);
this
.
context
.
beginPath
();
this
.
context
.
arc
(
rightX
,
rightY
,
rightR
,
0
,
Math
.
PI
,
true
);
this
.
context
.
strokeStyle
=
'
#ffff00
'
;
this
.
context
.
lineWidth
=
10
;
this
.
context
.
arc
(
rightX
,
rightY
,
rightR
,
0
,
2
*
Math
.
PI
,
true
);
this
.
context
.
strokeStyle
=
'
#FFFFFF
'
;
this
.
context
.
lineWidth
=
15
;
this
.
context
.
stroke
();
// 绘制笑脸的鼻子
let
startX
=
circleX
;
let
startY
=
circleY
-
20
;
this
.
context
.
beginPath
();
this
.
context
.
moveTo
(
startX
,
startY
);
this
.
context
.
lineTo
(
startX
-
8
,
startY
+
40
);
this
.
context
.
lineTo
(
startX
+
8
,
startY
+
40
);
this
.
context
.
strokeStyle
=
'
#FFFFFF
'
;
this
.
context
.
lineWidth
=
15
;
this
.
context
.
lineCap
=
'
round
'
this
.
context
.
lineJoin
=
'
round
'
this
.
context
.
stroke
();
// 绘制笑脸的嘴巴
let
mouthR
=
radius
/
2
.5
;
let
mouthR
=
radius
/
2
;
let
mouthX
=
circleX
;
let
mouthY
=
circleY
+
(
radius
/
3
)
;
let
mouthY
=
circleY
+
10
;
this
.
context
.
beginPath
();
this
.
context
.
arc
(
mouthX
,
mouthY
,
mouthR
,
Math
.
PI
,
0
,
true
);
this
.
context
.
strokeStyle
=
'
#
ffff00
'
;
this
.
context
.
lineWidth
=
1
0
;
this
.
context
.
arc
(
mouthX
,
mouthY
,
mouthR
,
Math
.
PI
/
1.4
,
Math
.
PI
/
3.4
,
true
);
this
.
context
.
strokeStyle
=
'
#
FFFFFF
'
;
this
.
context
.
lineWidth
=
1
5
;
this
.
context
.
stroke
();
this
.
context
.
closePath
();
})
}
}.
height
(
'
100%
'
).
width
(
'
100%
'
)
...
...
@@ -73,4 +86,4 @@ struct Card {
```
运行效果如下图所示。
![
WidgetCanvasDemo
](
figures/WidgetCanvasDemo.
pn
g
)
![
WidgetCanvasDemo
](
figures/WidgetCanvasDemo.
jpe
g
)
\ No newline at end of file
zh-cn/application-dev/application-models/figures/WidgetCanvasDemo.jpeg
0 → 100644
浏览文件 @
7accd9a5
57.4 KB
zh-cn/application-dev/application-models/figures/WidgetCanvasDemo.png
已删除
100644 → 0
浏览文件 @
b0a20005
400.8 KB
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录