Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
9cde7de7
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看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
9cde7de7
编写于
3月 27, 2023
作者:
O
openharmony_ci
提交者:
Gitee
3月 27, 2023
浏览文件
操作
浏览文件
下载
差异文件
!16580 挑单
Merge pull request !16580 from LiAn/OpenHarmony-3.2-Beta5
上级
3887503e
d7929f48
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
12 addition
and
9 deletion
+12
-9
zh-cn/application-dev/reference/arkui-ts/figures/coordinates.png
...pplication-dev/reference/arkui-ts/figures/coordinates.png
+0
-0
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md
...erence/arkui-ts/ts-universal-attributes-transformation.md
+12
-9
未找到文件。
zh-cn/application-dev/reference/arkui-ts/figures/coordinates.png
0 → 100644
浏览文件 @
9cde7de7
6.7 KB
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md
浏览文件 @
9cde7de7
...
@@ -9,13 +9,16 @@
...
@@ -9,13 +9,16 @@
## 属性
## 属性
| 名称
| 参数类型 | 描述
|
| 名称
| 参数类型 | 描述
|
| --------- | ----------------------------------------
-------------------- | --------------------
---------------------------------------- |
| --------- | ----------------------------------------
|
---------------------------------------- |
| rotate | {
<br/>
x?:
number,
<br/>
y?:
number,
<br/>
z?:
number,
<br/>
angle
?:
number
\|
string,
<br/>
centerX?:
number
\|
string,
<br/>
centerY?:
number
\|
string
<br/>
} | (x,
y,
z)指定一个矢量,表示旋转轴,正角度为顺时针转动,负角度为逆时针转动,默认值为0,同时可以通过centerX和centerY设置旋转的中心点。
<br>
默认值:
<br>
{
<br/>
x:
0,
<br/>
y:
0,
<br/>
z:
0,
<br/>
angle:
0,
<br/>
centerX:
'50%',
<br/>
centerY:
'50%'
<br/>
}
|
| rotate | {
<br/>
x?:
number,
<br/>
y?:
number,
<br/>
z?:
number,
<br/>
angle
:
number
\|
string,
<br/>
centerX?:
number
\|
string,
<br/>
centerY?:
number
\|
string
<br/>
} | 可使组件在以组件左上角为坐标原点的坐标系中进行旋转(坐标系如下图所示)。其中,(x,
y,
z)指定一个矢量,作为旋转轴。
<br>
- angle:旋转角度。取值为正时相对于旋转轴方向顺时针转动,取值为负时相对于旋转轴方向逆时针转动。取值可为string类型,如'90deg'。
<br>
- centerX和centerY用于指定旋转的中心点。
<br>
旋转轴和旋转中心点都基于坐标系设定,组件发生位移时,坐标系不会随之移动。
<br>
默认值:
<br>
{
<br/>
x:
0,
<br/>
y:
0,
<br/>
z:
0,
<br/>
centerX:
'50%',
<br/>
centerY:
'50%'
<br/>
}
<br/>
![
coordinates
](
figures/coordinates.png
)
<br>
从API version 9开始,该接口支持在ArkTS卡片中使用。
|
| translate | {
<br/>
x?:
number
\|
string,
<br/>
y?:
number
\|
string,
<br/>
z?
:
number
\|
string
<br/>
} | 可
以分别设置X轴、Y轴、Z轴的平移距离,距离的正负控制平移的方向。不支持百分比形式的输入。
<br>
默认值:
<br>
{
<br/>
x:
0,
<br/>
y:
0,
<br/>
z:
0
<br/>
}
|
| translate | {
<br/>
x?:
number
\|
string,
<br/>
y?:
number
\|
string,
<br/>
z?
:
number
\|
string
<br/>
} | 可
使组件在以组件左上角为坐标原点的坐标系中进行移动(坐标系如下图所示)。其中,x,y,z的值分别表示在对应轴移动的距离,值为正时表示向对应轴的正向移动,值为负时表示向对应轴的反向移动。移动距离支持数字和字符串(比如'10px',‘10%’)两种类型。
<br>
默认值:
<br>
{
<br/>
x:
0,
<br/>
y:
0,
<br/>
z:
0
<br/>
}
<br/>
![
coordinates
](
figures/coordinates.png
)
<br>
从API version 9开始,该接口支持在ArkTS卡片中使用。
|
| scale | {
<br/>
x?:
number,
<br/>
y?:
number,
<br/>
z?:
number,
<br/>
centerX?:
number
\|
string,
<br/>
centerY?:
number
\|
string
<br/>
} | 可以分别设置X轴、Y轴、Z轴的缩放比例,默认值为1,同时可以通过centerX和centerY设置缩放的中心点。
<br>
默认值:
<br>
{
<br/>
x:
1,
<br/>
y:
1,
<br/>
z:
1,
<br/>
centerX:'50%',
<br/>
centerY:'50%'
<br/>
} |
| scale | {
<br/>
x?:
number,
<br/>
y?:
number,
<br/>
z?:
number,
<br/>
centerX?:
number
\|
string,
<br/>
centerY?:
number
\|
string
<br/>
} | 可以分别设置X轴、Y轴、Z轴的缩放比例,默认值为1,同时可以通过centerX和centerY设置缩放的中心点。
<br>
默认值:
<br>
{
<br/>
x:
1,
<br/>
y:
1,
<br/>
z:
1,
<br/>
centerX:'50%',
<br/>
centerY:'50%'
<br/>
}
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。
|
| transform |
[
Matrix4Transit
](
../apis/js-apis-matrix4.md
)
| 设置当前组件的变换矩阵。
|
| transform |
[
Matrix4Transit
](
../apis/js-apis-matrix4.md
)
| 设置当前组件的变换矩阵。
|
> **说明:**
>
> 当组件同时设置了rotate和scale属性时,centerX和centerY的取值会发生冲突,此时centerX和centerY的值以后设定属性的值为准。
## 示例
## 示例
...
@@ -31,13 +34,13 @@ struct TransformExample {
...
@@ -31,13 +34,13 @@ struct TransformExample {
Text
(
'
rotate
'
).
width
(
'
90%
'
).
fontColor
(
0xCCCCCC
).
padding
(
15
).
fontSize
(
14
)
Text
(
'
rotate
'
).
width
(
'
90%
'
).
fontColor
(
0xCCCCCC
).
padding
(
15
).
fontSize
(
14
)
Row
()
Row
()
.
rotate
({
.
rotate
({
x
:
1
,
x
:
0
,
y
:
1
,
y
:
0
,
z
:
1
,
z
:
1
,
centerX
:
'
50%
'
,
centerX
:
'
50%
'
,
centerY
:
'
50%
'
,
centerY
:
'
50%
'
,
angle
:
300
angle
:
300
})
// 组件以矢量(
1,1
,1)为旋转轴,绕中心点顺时针旋转300度
})
// 组件以矢量(
0,0
,1)为旋转轴,绕中心点顺时针旋转300度
.
width
(
100
).
height
(
100
).
backgroundColor
(
0xAFEEEE
)
.
width
(
100
).
height
(
100
).
backgroundColor
(
0xAFEEEE
)
Text
(
'
translate
'
).
width
(
'
90%
'
).
fontColor
(
0xCCCCCC
).
padding
(
10
).
fontSize
(
14
)
Text
(
'
translate
'
).
width
(
'
90%
'
).
fontColor
(
0xCCCCCC
).
padding
(
10
).
fontSize
(
14
)
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录