Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
80db5b26
D
Docs
项目概览
OpenHarmony
/
Docs
12 个月 前同步成功
通知
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看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
80db5b26
编写于
5月 25, 2022
作者:
O
openharmony_ci
提交者:
Gitee
5月 25, 2022
浏览文件
操作
浏览文件
下载
差异文件
!4360 第一次样本修改+VOD修改
Merge pull request !4360 from LiAn/master
上级
daa331ce
63ae5a3f
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
127 addition
and
116 deletion
+127
-116
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
...ation-dev/reference/arkui-ts/ts-basic-components-image.md
+78
-56
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md
...n-dev/reference/arkui-ts/ts-basic-components-textclock.md
+20
-15
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md
...tion-dev/reference/arkui-ts/ts-drawing-components-path.md
+26
-41
zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md
...application-dev/reference/arkui-ts/ts-gesture-settings.md
+1
-1
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md
...ation-dev/reference/arkui-ts/ts-universal-events-click.md
+1
-1
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md
...ation-dev/reference/arkui-ts/ts-universal-events-touch.md
+1
-1
zh-cn/application-dev/ui/ts-component-based-preview.md
zh-cn/application-dev/ui/ts-component-based-preview.md
+0
-1
未找到文件。
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
浏览文件 @
80db5b26
# Image
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
图片组件,支持本地图片和网络图片的渲染展示。
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
图片组件,用来渲染展示图片。
## 权限说明
## 权限列表
使用网络图片时,需要在config.json(FA模型)或者module.json5(Stage模型)对应的"abilities"中添加网络使用权限ohos.permission.INTERNET。
ohos.permission.INTERNET(使用网络图片)
```
"abilities": [
{
...
"permissions": ["ohos.permission.INTERNET"],
...
}
]
```
## 子组件
...
...
@@ -21,61 +30,71 @@ ohos.permission.INTERNET(使用网络图片)
Image(src: string | PixelMap | Resource)
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| src | string
\|
[PixelMap](../apis/js-apis-image.md#pixelmap7)\|
[
Resource
](
../../ui/ts-types.md#resource类型
)
| 是 | - | 图片的数据源,支持本地图片和网络图片。
<br/>
\-
支持的图片格式包括png、jpg、bmp、svg和gif。
<br/>
\-
支持
`Base64`
字符串。格式
`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`
, 其中
`[base64 data]`
为
`Base64`
字符串数据。
<br/>
\-
支持
`dataability://`
路径前缀的字符串,用于访问通过data
ability提供的图片路径。 |
通过图片数据源获取图片,用于后续渲染展示。
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| src | string
\|
[PixelMap](../apis/js-apis-image.md#pixelmap7)\|
[
Resource
](
../../ui/ts-types.md#resource类型
)
| 是 | - | 图片的数据源,支持本地图片和网络图片。
<br/>
\-
支持的图片格式包括png、jpg、bmp、svg和gif。
<br/>
\-
支持
`Base64`
字符串。格式
`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`
, 其中
`[base64 data]`
为
`Base64`
字符串数据。
<br/>
\-
支持
`dataability://`
路径前缀的字符串,用于访问通过data
ability提供的图片路径。 |
## 属性
除支持
[
通用属性
](
ts-universal-attributes-size.md
)
外,还支持以下属性:
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| alt | string
| - | 加载时显示的占位图。支持本地图片和网络路径
。 |
| objectFit |
ImageFit |
Cover | 设置图片的缩放类型。 |
| objectRepeat |
[
ImageRepeat
](
ts-appendix-enums.md#imagerepeat
枚举说明
)
| NoRepeat | 设置图片的重复样式。
<br/>
>
![icon-note.gif](public_sys-resources/icon-note.gif)
**说明:**
<br/>
>
-
SVG
类型图源不支持该属性。 |
| interpolation |
ImageInterpolation | None | 设置图片的插值效果,仅针对图片放大插值。
<br/>
>
![icon-note.gif](public_sys-resources/icon-note.gif)
**说明:**
<br/>
>
-
SVG类型图源不支持该属性。
<br/>
>
<br/>
>
-
PixelMap资源不支持该属性。 |
| renderMode |
ImageRenderMode | Original | 设置图片渲染的模式。
<br/>
>
![icon-note.gif](public_sys-resources/icon-note.gif)
**说明:**
<br/>
>
-
SVG
类型图源不支持该属性。 |
| sourceSize | {
<br/>
width:
number,
<br/>
height:
number
<br/>
} | - | 设置图片
解码尺寸,将原始图片解码成指定尺寸的图片,number类型单位为px。
<br/>
>
![icon-note.gif](public_sys-resources/icon-note.gif)
**说明:**
<br/>
>
PixelMap资源不支持该属性。 |
| alt | string
\|
[
Resource
](
../../ui/ts-types.md#resource类型
)
| - | 加载时显示的占位图,支持本地图片和网络图片
。 |
| objectFit |
[
ImageFit
](
#imagefit枚举说明
)
| ImageFit.
Cover | 设置图片的缩放类型。 |
| objectRepeat |
[
ImageRepeat
](
ts-appendix-enums.md#imagerepeat
)
| NoRepeat | 设置图片的重复样式。
<br/>
>
**说明:**
<br/>
>
-
svg
类型图源不支持该属性。 |
| interpolation |
[
ImageInterpolation
](
#imageInterpolation
)
| ImageInterpolation.None | 设置图片的插值效果,仅针对图片放大插值。
<br/>
>
**说明:**
<br/>
>
-
svg类型图源不支持该属性。
<br/>
>
-
PixelMap资源不支持该属性。 |
| renderMode |
[
ImageRenderMode
](
#imagerendermode
)
| ImageRenderMode.Original | 设置图片渲染的模式。
<br/>
>
**说明:**
<br/>
>
-
svg
类型图源不支持该属性。 |
| sourceSize | {
<br/>
width:
number,
<br/>
height:
number
<br/>
} | - | 设置图片
裁剪尺寸,将原始图片解码成pixelMap,指定尺寸的图片,单位为px。
<br/>
>
**说明:**
<br/>
>
PixelMap资源不支持该属性。 |
| syncLoad
<sup>
8+
</sup>
| boolean | false | 设置是否同步加载图片,默认是异步加载。同步加载时阻塞UI线程,不会显示占位图。 |
-
ImageFit枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Cover | 保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界。 |
| Contain | 保持宽高比进行缩小或者放大,使得图片完全显示在显示边界内。 |
| Fill | 不保持宽高比进行放大缩小,使得图片填充满显示边界。 |
| None | 保持原有尺寸显示。通常配合objectRepeat属性一起使用。 |
| ScaleDown | 保持宽高比显示,图片缩小或者保持不变。 |
-
ImageInterpolation枚举说明
| 名称 | 描述 |
| -------- | -------- |
| None | 不使用插值图片数据。 |
| High | 高度使用插值图片数据,可能会影响图片渲染的速度。 |
| Medium | 中度使用插值图片数据。 |
| Low | 低度使用插值图片数据。 |
-
ImageRenderMode枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Original | 按照原图进行渲染,包括颜色。 |
| Template | 将图像渲染为模板图像,忽略图片的颜色信息。 |
### ImageFit
| 名称 | 描述 |
| -------- | -------- |
| Cover | 保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界。 |
| Contain | 保持宽高比进行缩小或者放大,使得图片完全显示在显示边界内。 |
| Fill | 不保持宽高比进行放大缩小,使得图片充满显示边界。 |
| None | 保持原有尺寸显示,通常配合objectRepeat属性一起使用。 |
| ScaleDown | 保持宽高比显示,图片缩小或者保持不变。 |
##
事件
##
# ImageInterpolation
| 名称 |
功能描述 |
| 名称 |
描述 |
| -------- | -------- |
| onComplete(callback:
(event?:
{
width:
number,
height:
number,
componentWidth:
number,
<br>
componentHeight:
number,
loadingStatus:
number
})
=
>
void) | 图片成功加载时触发该回调,返回成功加载的图源尺寸。 |
| onError(callback:
(event?:
{
componentWidth:
number,
componentHeight:
number
})
=
>
void) | 图片加载出现异常时触发该回调。 |
| onFinish(callback:
()
=
>
void) | 当加载的源文件为带动效的svg图片时,当svg动效播放完成时会触发这个回调,如果动效为无限循环动效,则不会触发这个回调。 |
| None | 不使用插值图片数据。 |
| High | 插值图片数据的使用率高,可能会影响图片渲染的速度。 |
| Medium | 插值图片数据的使用率中。 |
| Low | 插值图片数据的使用率低。 |
### ImageRenderMode
| 名称 | 描述 |
| -------- | -------- |
| Original | 按照原图进行渲染,包括颜色。 |
| Template | 将图片渲染为模板图片,忽略图片的颜色信息。 |
## 事件
除支持
[
通用事件
](
ts-universal-events-click.md
)
外,还支持以下事件:
| 名称 | 功能描述 |
| -------- | -------- |
| onComplete(callback:
(event?:
{
width:
number,
height:
number,
componentWidth:
number,
<br>
componentHeight:
number,
loadingStatus:
number
})
=
>
void) | 图片成功加载时触发该回调,返回成功加载的图片尺寸。
<br>
- width:图片的宽,单位为像素。
<br/>
- height:图片的高,单位为像素。
<br/>
- componentWidth:组件的宽,单位为像素。
<br/>
- componentHeight:组件的高,单位为像素。
<br/>
- loadingStatus:图片加载成功的状态。(几为成功)
<br/>
|
| onError(callback:
(event?:
{
componentWidth:
number,
componentHeight:
number
})
=
>
void) | 图片加载出现异常时触发该回调。
<br>
- componentWidth:组件的宽,单位为像素。
<br/>
- componentHeight:组件的高,单位为像素。
<br/>
|
| onFinish(callback:
()
=
>
void) | 当加载的源文件为带动效的svg图片时,当svg动效播放完成时会触发这个回调,如果动效为无限循环动效,则不会触发这个回调。 |
## 示例
```
// Image1
### 图片加载
加载显示不同类型的图片,并设置图片的缩放类型。
```
ts
@
Entry
@
Component
struct
ImageExample1
{
...
...
@@ -141,8 +160,9 @@ struct ImageExample1 {
![
zh-cn_image_0000001250492613
](
figures/zh-cn_image_0000001250492613.gif
)
```
// Image2
### 设置属性
```
ts
@
Entry
@
Component
struct
ImageExample2
{
...
...
@@ -162,12 +182,12 @@ struct ImageExample2 {
.
border
({
width
:
1
}).
borderStyle
(
BorderStyle
.
Dashed
)
.
overlay
(
'
Template
'
,
{
align
:
Alignment
.
Bottom
,
offset
:
{
x
:
0
,
y
:
20
}
})
}
Text
(
'
alt
'
).
fontSize
(
12
).
fontColor
(
0xcccccc
).
width
(
'
96%
'
).
height
(
30
)
Image
(
''
)
.
alt
(
$r
(
'
app.media.Image_none
'
))
.
width
(
100
).
height
(
100
).
border
({
width
:
1
}).
borderStyle
(
BorderStyle
.
Dashed
)
Text
(
'
sourceSize
'
).
fontSize
(
12
).
fontColor
(
0xcccccc
).
width
(
'
96%
'
)
Row
({
space
:
50
})
{
Image
(
$r
(
'
app.media.img_example
'
))
...
...
@@ -187,7 +207,7 @@ struct ImageExample2 {
.
border
({
width
:
1
}).
borderStyle
(
BorderStyle
.
Dashed
)
.
overlay
(
'
w:200 h:200
'
,
{
align
:
Alignment
.
Bottom
,
offset
:
{
x
:
0
,
y
:
20
}
})
}
Text
(
'
objectRepeat
'
).
fontSize
(
12
).
fontColor
(
0xcccccc
).
width
(
'
96%
'
).
height
(
30
)
Row
({
space
:
5
})
{
Image
(
$r
(
'
app.media.ic_health_heart
'
))
...
...
@@ -210,17 +230,18 @@ struct ImageExample2 {
![
zh-cn_image_0000001205812616
](
figures/zh-cn_image_0000001205812616.png
)
```
// Image3
### 事件调用
```
ts
@
Entry
@
Component
struct
ImageExample3
{
@
State
width
:
number
=
0
@
State
height
:
number
=
0
private on: Resource = $r('app.media.
wifi
_on')
private off: Resource = $r('app.media.
wifi
_off')
private on2off: Resource = $r('app.media.
wifi
_on2off')
private off2on: Resource = $r('app.media.
wifi
_off2on')
private
on
:
Resource
=
$r
(
'
app.media.
image
_on
'
)
private
off
:
Resource
=
$r
(
'
app.media.
image
_off
'
)
private
on2off
:
Resource
=
$r
(
'
app.media.
image
_on2off
'
)
private
off2on
:
Resource
=
$r
(
'
app.media.
image
_off2on
'
)
@
State
src
:
Resource
=
this
.
on
build
()
{
...
...
@@ -235,6 +256,7 @@ struct ImageExample3 {
})
.
objectFit
(
ImageFit
.
Cover
)
.
height
(
180
).
width
(
180
)
// 图片加载完成后,获取图片尺寸。
.
onComplete
((
msg
:
{
width
:
number
,
height
:
number
})
=>
{
this
.
width
=
msg
.
width
this
.
height
=
msg
.
height
...
...
@@ -247,7 +269,7 @@ struct ImageExample3 {
offset
:
{
x
:
0
,
y
:
20
}
})
}
// 为图片添加点击事件,点击完成后加载特定图片。
Image
(
this
.
src
)
.
width
(
120
).
height
(
120
)
.
onClick
(()
=>
{
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md
浏览文件 @
80db5b26
# TextClock
> ![](public_sys-resources/icon-note.gif) **说明:** 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本
。
TextClock组件通过文本将当前系统时间显示在设备上。支持不同时区的时间显示,最高精度到秒级
。
TextClock通过文本显示当前系统时间,支持不同时区的时间显示,时间显示最高精度到秒级。
>**说明:**
>该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
...
...
@@ -14,36 +15,39 @@ TextClock通过文本显示当前系统时间,支持不同时区的时间显
## 接口
TextClock(options?: {
timeZoneOffset?: number, contorller?: TextClockController
})
TextClock(options?: {
timeZoneOffset?: number, controller?: TextClockController
})
-
参数
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | ---- | ------------------ | ------------------------------------------------------------ |
| timeZoneOffset | number | 否 | 时区偏移量 | 设置时区偏移量。取值范围为[-14, 12],表示东十二区到西十二区,其中负值表示东时区,正值表示西时区,比如东八区为-8;对横跨国际日界线的国家或地区,用-13(UTC+13)和-14
(UTC+14)来保证整个国家或者区域处在相同的时间。 |
| contorller |
[
TextClockContorller
](
#TextClockC
ontroller
)
| 否 | null | 绑定一个控制器,用来控制文本时钟的状态。|
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | ---- | ------------------ | ------------------------------------------------------------ |
| timeZoneOffset | number | 否 | 时区偏移量 | 设置时区偏移量。
<br>
取值范围为[-14:00, 12:00],表示东十二区到西十二区,其中负值表示东时区,正值表示西时区,比如东八区为-8:00。
<br>
对横跨国际日界线的国家或地区,用-13:00(UTC+13)和-14:00
(UTC+14)来保证整个国家或者区域处在相同的时间。 |
| contorller |
[
TextClockContorller
](
#textclockc
ontroller
)
| 否 | null | 绑定一个控制器,用来控制文本时钟的状态。|
## 属性
除支持
[
通用属性
](
ts-universal-attributes-size.md
)
外,还支持以下属性:
| 名称 | 参数类型 | 默认值 | 描述 |
| ------ | -------- | -------- | ------------------------------------------------------------ |
| format | string | 'hhmmss' | 设置显示时间格式,如“yyyy/mm/dd”、“yyyy-mm-dd”等。
支持的时间格式化字符串:
<ul><li>
yyyy(年份)
</li><li>
mm(英文月份简写)
</li><li>
mmm(英文月份简写)
</li><li>
mmmm(英文月份全称)
</li><li>
dd(英文星期简写)
</li><li>
ddd(英文星期简写)
</li><li>
dddd(英文星期全称)
</li><li>
HH(24小时制)
</li><li>
hh(12小时制)
</li><li>
MM/mm(分钟)
</li><li>
SS/ss(秒)
</li></ul>
|
| format | string | 'hhmmss' | 设置显示时间格式,如“yyyy/mm/dd”、“yyyy-mm-dd”等。
<br>
支持的时间格式化字符串:
<br>
- yyyy:年份。
<br/>
- mm:英文月份简写。
<br/>
- mmm:英文月份简写。
<br/>
- mmmm:英文月份全称。
<br/>
- dd:英文星期简写。
<br/>
- ddd:英文星期简写。
<br/>
- dddd:英文星期全称。
<br/>
- HH:24小时制。
<br/>
- hh:12小时制。
<br/>
- MM/mm:分钟。
<br/>
- SS/ss:秒。
|
## 事件
除支持
[
通用事件
](
ts-universal-events-click.md
)
外,还支持以下事件:
| 名称 | 功能描述 |
| -------------------------------------------- | ------------------------------------------------------------ |
| onDateChange(event: (value: number) => void) | 提供时间变化回调
,该事件最小回调间隔为秒。
<br
/>
value: Unix Time Stamp,即自1970年1月1日(UTC)起经过的毫秒数。 |
| onDateChange(event: (value: number) => void) | 提供时间变化回调
,该事件最小回调间隔为秒。
<br
/>
-
value: Unix Time Stamp,即自1970年1月1日(UTC)起经过的毫秒数。 |
## TextClockController
TextClock容器组件的控制器,可以将此对象绑定
至TextClock组件,然后通过它控制文本时钟状态
的启动与停止。
TextClock容器组件的控制器,可以将此对象绑定
到TextClock组件,再通过它控制文本时钟
的启动与停止。
### 导入对象
```
```
ts
controller
:
TextClockController
=
new
TextClockController
()
```
### start
...
...
@@ -61,7 +65,7 @@ stop()
## 示例
```
```
ts
@
Entry
@
Component
struct
Second
{
...
...
@@ -70,8 +74,9 @@ struct Second {
build
()
{
Flex
({
direction
:
FlexDirection
.
Column
,
alignItems
:
ItemAlign
.
Center
,
justifyContent
:
FlexAlign
.
Center
})
{
Text('
current milliseconds is
' + this.accumulateTime)
Text
(
'
Current milliseconds is
'
+
this
.
accumulateTime
)
.
fontSize
(
20
)
// 以12小时制显示东八区的系统时间,精确到秒。
TextClock
({
timeZoneOffset
:
-
8
,
controller
:
this
.
controller
})
.
format
(
'
hhmmss
'
)
.
onDateChange
((
value
:
number
)
=>
{
...
...
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md
浏览文件 @
80db5b26
# Path
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
路径绘制组件,根据绘制路径生成封闭的自定义形状。
路径绘制组件。
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
...
...
@@ -16,69 +15,55 @@
无
## 属性
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 0 | 否 | 路径所在矩形的宽度。 |
| height | Length | 0 | 否 | 路径所在矩形的高度。 |
| commands | string | '' | 是 | 路径绘制的命令字符串。 |
支持的绘制命令如下:
-
M = moveto
-
L = lineto
除支持
[
通用属性
](
ts-universal-attributes-size.md
)
外,还支持以下属性:
-
H = horizontal lineto
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | --------------------------------------- | ------ | ---- | ------------------------------------------------------------ |
| width |
[
Length
](
../../ui/ts-types.md#长度类型
)
| 0 | 否 | 路径所在矩形画布的宽度。 |
| height |
[
Length
](
../../ui/ts-types.md#长度类型
)
| 0 | 否 | 路径所在矩形画布的高度。 |
| commands | string | '' | 是 | 路径绘制的命令字符串,单位为px。像素单位转换方法请参考
[
像素单位转换
](
../../ui/ts-pixel-units.md
)
。 |
-
V = vertical lineto
commands支持的绘制命令如下:
-
C = curveto
-
S = smooth curveto
-
Q = quadratic Belzier curve
-
T = smooth quadratic Belzier curveto
-
A = elliptical Arc
-
Z = closepath
如 commands('M0 20 L50 50 L50 100 Z')定义了一条路径,开始于位置(0,20),到达位置(50,50)后再到(50,100),最后在(0,20)处关闭路径。
| 命令 | 名称 | 参数 | 说明 |
| ---- | -------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------ |
| M | moveto | (x y) | 在给定的 (x, y) 坐标处开始一个新的子路径。例如,
`M 0 0`
表示将(0, 0)点作为新子路径的起始点。 |
| L | lineto | (x y) | 从当前点到给定的 (x, y) 坐标画一条线,该坐标成为新的当前点。例如,
`L 50 50`
表示绘制当前点到(50, 50)点的直线,并将(50, 50)点作为新子路径的起始点。 |
| H | horizontal lineto | x | 从当前点绘制一条水平线,等效于将y坐标指定为0的L命令。例如,
`H 50 `
表示绘制当前点到(50, 0)点的直线,并将(50, 0)点作为新子路径的起始点。 |
| V | vertical lineto | y | 从当前点绘制一条垂直线,等效于将x坐标指定为0的L命令。例如,
`V 50 `
表示绘制当前点到(0, 50)点的直线,并将(0, 50)点作为新子路径的起始点。 |
| C | curveto | (x1 y1 x2 y2 x y) | 使用 (x1, y1) 作为曲线起点的控制点, (x2, y2) 作为曲线终点的控制点,从当前点到 (x, y) 绘制三次贝塞尔曲线。例如,
`C100 100 250 100 250 200 `
表示绘制当前点到(250, 200)点的三次贝塞尔曲线,并将(250, 200)点作为新子路径的起始点。 |
| S | smooth curveto | (x2 y2 x y) | (x2, y2) 作为曲线终点的控制点,绘制从当前点到 (x, y) 绘制三次贝塞尔曲线。若前一个命令是C或S,则起点控制点是上一个命令的终点控制点相对于起点的映射。 例如,
`C100 100 250 100 250 200 S400 300 400 200`
第二段贝塞尔曲线的起点控制点为(250, 300)。如果没有前一个命令或者前一个命令不是 C或S,则第一个控制点与当前点重合。 |
| Q | quadratic Belzier curve | (x1 y1 x y) | 使用 (x1, y1) 作为控制点,从当前点到 (x, y) 绘制二次贝塞尔曲线。例如,
`Q400 50 600 300 `
表示绘制当前点到(600, 300)点的二次贝塞尔曲线,并将(600, 300)点作为新子路径的起始点。 |
| T | smooth quadratic Belzier curveto | (x y) | 绘制从当前点到 (x, y) 绘制二次贝塞尔曲线。若前一个命令是Q或T,则控制点是上一个命令的终点控制点相对于起点的映射。 例如,
`Q400 50 600 300 T1000 300`
第二段贝塞尔曲线的控制点为(800, 350)。 如果没有前一个命令或者前一个命令不是 Q或T,则第一个控制点与当前点重合。 |
| A | elliptical Arc | (rx ry x-axis-rotation large-arc-flag sweep-flag x y) | 从当前点到 (x, y) 绘制一条椭圆弧。椭圆的大小和方向由两个半径 (rx, ry) 和x-axis-rotation定义,指示整个椭圆相对于当前坐标系如何旋转(以度为单位)。 large-arc-flag 和 sweep-flag确定弧的绘制方式。 |
| Z | closepath | none | 通过将当前路径连接回当前子路径的初始点来关闭当前子路径。 |
例如: commands('M0 20 L50 50 L50 100 Z')定义了一个三角形,起始于位置(0,20),接着绘制点(0,20)到点(50,50)的直线,再绘制点(50,50)到点(50,100)的直线,最后绘制点(50,100)到(0,20)的直线关闭路径,形成封闭三角形。
## 示例
```
```
ts
@
Entry
@
Component
struct
PathExample
{
build
()
{
Column
({
space
:
5
})
{
Text
(
'
Straight line
'
).
fontSize
(
9
).
fontColor
(
0xCCCCCC
).
width
(
'
90%
'
)
// 绘制一条长900px,宽3vp的直线。
Path
().
width
(
300
).
height
(
10
).
commands
(
'
M0 0 L900 0
'
).
stroke
(
Color
.
Black
).
strokeWidth
(
3
)
Text
(
'
Straight line graph
'
).
fontSize
(
9
).
fontColor
(
0xCCCCCC
).
width
(
'
90%
'
)
Flex
({
justifyContent
:
FlexAlign
.
SpaceAround
})
{
// 先后执行MoveTo(150, 0), LineTo(300, 300), LineTo(0, 300), ClosePath()
Path
().
width
(
100
).
height
(
100
).
commands
(
'
M150 0 L300 300 L0 300 Z
'
)
// 先后执行MoveTo(0, 0), HorizontalLineto(300), VerticalLineto(300), HorizontalLineto(0), ClosePath()
Path
().
width
(
100
).
height
(
100
).
commands
(
'
M0 0 H300 V300 H0 Z
'
)
// 先后执行MoveTo(150, 0), LineTo(0, 150), LineTo(60, 300), LineTo(240, 300), LineTo(300, 150), ClosePath()
Path
().
width
(
100
).
height
(
100
).
commands
(
'
M150 0 L0 150 L60 300 L240 300 L300 150 Z
'
)
}.
width
(
'
100%
'
)
Text
(
'
Curve graphics
'
).
fontSize
(
9
).
fontColor
(
0xCCCCCC
).
width
(
'
90%
'
)
Flex
({
justifyContent
:
FlexAlign
.
SpaceAround
})
{
// 先后执行MoveTo(0, 300),(150, 0)(300, 300)两点之间画曲线, ClosePath()
Path
().
width
(
100
).
height
(
100
).
commands
(
"
M0 300 S150 0 300 300 Z
"
)
// 先后执行MoveTo(0, 150),(0, 150)(150, 0)(300, 150)三点之间依次画曲线, LineTo(150, 300),ClosePath()
Path
().
width
(
100
).
height
(
100
).
commands
(
'
M0 150 C0 150 150 0 300 150 L150 300 Z
'
)
}
}.
width
(
'
100%
'
).
margin
({
top
:
5
})
...
...
@@ -86,4 +71,4 @@ struct PathExample {
}
```
![
zh-cn_image_0000001219744193
](
figures/zh-cn_image_0000001219744193.png
)
![
zh-cn_image_0000001219744193
](
figures/zh-cn_image_0000001219744193.png
)
\ No newline at end of file
zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md
浏览文件 @
80db5b26
...
...
@@ -79,7 +79,7 @@ struct GestureSettingsExample {
TapGesture()
.onAction((event: GestureEvent) => {
this.value = 'priorityGesture onAction' + '\ncomponent globalPos:('
+ event.target.area.globalPos
.x + ',' + event.target.area.globalPos
.y + ')\nwidth:'
+ event.target.area.globalPos
ition.x + ',' + event.target.area.globalPosition
.y + ')\nwidth:'
+ event.target.area.width + '\nheight:' + event.target.area.height
}), GestureMask.IgnoreInternal
)
...
...
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md
浏览文件 @
80db5b26
...
...
@@ -59,7 +59,7 @@ struct ClickExample {
.onClick((event: ClickEvent) => {
console.info(this.text = 'Click Point:' + '\n screenX:' + event.screenX + '\n screenY:' + event.screenY
+ '\n x:' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos:('
+ event.target.area.globalPos
.x + ',' + event.target.area.globalPos
.y + ')\n width:'
+ event.target.area.globalPos
ition.x + ',' + event.target.area.globalPosition
.y + ')\n width:'
+ event.target.area.width + '\n height:' + event.target.area.height)
})
Text(this.text).padding(15)
...
...
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md
浏览文件 @
80db5b26
...
...
@@ -78,7 +78,7 @@ struct TouchExample {
}
console.info(this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
+ event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\ncomponent globalPos:('
+ event.target.area.globalPos
.x + ',' + event.target.area.globalPos
.y + ')\nwidth:'
+ event.target.area.globalPos
ition.x + ',' + event.target.area.globalPosition
.y + ')\nwidth:'
+ event.target.area.width + '\nheight:' + event.target.area.height)
})
Text(this.text)
...
...
zh-cn/application-dev/ui/ts-component-based-preview.md
浏览文件 @
80db5b26
...
...
@@ -11,7 +11,6 @@
```
// Display only Hello Component1 on the preview. The content under MyComponent is displayed on the real device.
@Entry
@Component
struct MyComponent {
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录