Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
ee8ac74d
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,发现更多精彩内容 >>
未验证
提交
ee8ac74d
编写于
7月 12, 2023
作者:
O
openharmony_ci
提交者:
Gitee
7月 12, 2023
浏览文件
操作
浏览文件
下载
差异文件
!20712 [canvas]补充ImageSmoothingQuality和CanvasDirection枚举说明
Merge pull request !20712 from 冯峰/dev_canvas_iqcd
上级
ad36c2b8
a1890fd8
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
152 addition
and
165 deletion
+152
-165
zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md
...n/application-dev/reference/arkui-ts/ts-appendix-enums.md
+20
-0
zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
...ion-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
+132
-165
未找到文件。
zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md
浏览文件 @
ee8ac74d
...
...
@@ -565,3 +565,23 @@
| ------- | ------------------------------------------------------------ |
| DEFAULT | 默认风格,光标宽1.5vp,光标高度与文本选中底板高度和字体大小相关。 |
| INLINE | 内联输入风格。文本选中底板高度与输入框高度相同。 |
## ImageSmoothingQuality<sup>8+</sup>
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| -------- | -------------- |
| low | 低画质 |
| medium | 中画质 |
| high | 高画质 |
## CanvasDirection<sup>8+</sup>
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| -------- | -------------- |
| inherit | 继承canvas组件已设定的文本方向 |
| ltr | 从左往右 |
| rtl | 从右往左 |
\ No newline at end of file
zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
浏览文件 @
ee8ac74d
...
...
@@ -59,8 +59,8 @@ RenderingContextSettings(antialias?: boolean)
|
[
imageSmoothingEnabled
](
#imagesmoothingenabled
)
| boolean | 用于设置绘制图片时是否进行图像平滑度调整,true为启用,false为不启用。
<br/>
默认值:true
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
|
[
height
](
#height
)
| number | 组件高度。
<br/>
单位:vp
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
|
[
width
](
#width
)
| number | 组件宽度。
<br/>
单位:vp
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
|
[
imageSmoothingQuality
](
#imagesmoothingquality
)
| ImageSmoothingQuality | imageSmoothingEnabled为true时,用于设置图像平滑度。可选值为:
<br/>
- 'low':低画质
<br/>
- 'medium':中画质
<br/>
- 'high':高画质。
<br/>
默认值:
low
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
|
[
direction
](
#direction
)
| CanvasDirection | 用于设置绘制文字时使用的文字方向。可选值为:
<br/>
- 'inherit':继承canvas组件已设定的文本方向
<br/>
- 'ltr':从左往右
<br/>
- 'rtl':从右往左。
<br/>
默认值:
inherit
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
|
[
imageSmoothingQuality
](
#imagesmoothingquality
)
|
[
ImageSmoothingQuality
](
ts-appendix-enums.md#imagesmoothingquality8
)
| imageSmoothingEnabled为true时,用于设置图像平滑度。
<br/>
默认值:ImageSmoothingQuality.
low
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
|
[
direction
](
#direction
)
|
[
CanvasDirection
](
ts-appendix-enums.md#canvasdirection8
)
| 用于设置绘制文字时使用的文字方向。
<br/>
默认值:CanvasDirection.
inherit
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
|
[
filter
](
#filter
)
| string | 用于设置图像的滤镜。支持的滤镜效果如下:
<br/>
- 'none': 无滤镜效果
<br/>
- 'blur':给图像设置高斯模糊
<br/>
- 'brightness':给图片应用一种线性乘法,使其看起来更亮或更暗
<br/>
- 'contrast':调整图像的对比度
<br/>
- 'grayscale':将图像转换为灰度图像
<br/>
- 'hue-rotate':给图像应用色相旋转
<br/>
- 'invert':反转输入图像
<br/>
- 'opacity':转化图像的透明程度
<br/>
- 'saturate':转换图像饱和度
<br/>
- 'sepia':将图像转换为深褐色
<br/>
默认值:'none'
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
> **说明:**
...
...
@@ -719,6 +719,136 @@ struct WidthExample {
![
zh-cn_image_canvas_width
](
figures/zh-cn_image_canvas_width.png
)
### imageSmoothingQuality
```
ts
// xxx.ets
@
Entry
@
Component
struct
ImageSmoothingQualityDemo
{
private
settings
:
RenderingContextSettings
=
new
RenderingContextSettings
(
true
);
private
context
:
CanvasRenderingContext2D
=
new
CanvasRenderingContext2D
(
this
.
settings
);
private
img
:
ImageBitmap
=
new
ImageBitmap
(
"
common/images/example.jpg
"
);
build
()
{
Flex
({
direction
:
FlexDirection
.
Column
,
alignItems
:
ItemAlign
.
Center
,
justifyContent
:
FlexAlign
.
Center
})
{
Canvas
(
this
.
context
)
.
width
(
'
100%
'
)
.
height
(
'
100%
'
)
.
backgroundColor
(
'
#ffff00
'
)
.
onReady
(()
=>
{
let
ctx
=
this
.
context
ctx
.
imageSmoothingEnabled
=
true
ctx
.
imageSmoothingQuality
=
'
high
'
ctx
.
drawImage
(
this
.
img
,
0
,
0
,
400
,
200
)
})
}
.
width
(
'
100%
'
)
.
height
(
'
100%
'
)
}
}
```
![
ImageSmoothingQualityDemo
](
figures/ImageSmoothingQualityDemo.jpeg
)
### direction
```
ts
// xxx.ets
@
Entry
@
Component
struct
DirectionDemo
{
private
settings
:
RenderingContextSettings
=
new
RenderingContextSettings
(
true
);
private
context
:
CanvasRenderingContext2D
=
new
CanvasRenderingContext2D
(
this
.
settings
);
build
()
{
Flex
({
direction
:
FlexDirection
.
Column
,
alignItems
:
ItemAlign
.
Center
,
justifyContent
:
FlexAlign
.
Center
})
{
Canvas
(
this
.
context
)
.
width
(
'
100%
'
)
.
height
(
'
100%
'
)
.
backgroundColor
(
'
#ffff00
'
)
.
onReady
(()
=>
{
let
ctx
=
this
.
context
ctx
.
font
=
'
48px serif
'
;
ctx
.
textAlign
=
'
start
'
ctx
.
fillText
(
"
Hi ltr!
"
,
200
,
50
);
ctx
.
direction
=
"
rtl
"
;
ctx
.
fillText
(
"
Hi rtl!
"
,
200
,
100
);
})
}
.
width
(
'
100%
'
)
.
height
(
'
100%
'
)
}
}
```
![
directionDemo
](
figures/directionDemo.jpeg
)
### filter
```
ts
// xxx.ets
@
Entry
@
Component
struct
FilterDemo
{
private
settings
:
RenderingContextSettings
=
new
RenderingContextSettings
(
true
);
private
context
:
CanvasRenderingContext2D
=
new
CanvasRenderingContext2D
(
this
.
settings
);
private
img
:
ImageBitmap
=
new
ImageBitmap
(
"
common/images/example.jpg
"
);
build
()
{
Flex
({
direction
:
FlexDirection
.
Column
,
alignItems
:
ItemAlign
.
Center
,
justifyContent
:
FlexAlign
.
Center
})
{
Canvas
(
this
.
context
)
.
width
(
'
100%
'
)
.
height
(
'
100%
'
)
.
backgroundColor
(
'
#ffff00
'
)
.
onReady
(()
=>
{
let
ctx
=
this
.
context
let
img
=
this
.
img
ctx
.
drawImage
(
img
,
0
,
0
,
100
,
100
);
ctx
.
filter
=
'
grayscale(50%)
'
;
ctx
.
drawImage
(
img
,
100
,
0
,
100
,
100
);
ctx
.
filter
=
'
sepia(60%)
'
;
ctx
.
drawImage
(
img
,
200
,
0
,
100
,
100
);
ctx
.
filter
=
'
saturate(30%)
'
;
ctx
.
drawImage
(
img
,
0
,
100
,
100
,
100
);
ctx
.
filter
=
'
hue-rotate(90degree)
'
;
ctx
.
drawImage
(
img
,
100
,
100
,
100
,
100
);
ctx
.
filter
=
'
invert(100%)
'
;
ctx
.
drawImage
(
img
,
200
,
100
,
100
,
100
);
ctx
.
filter
=
'
opacity(25%)
'
;
ctx
.
drawImage
(
img
,
0
,
200
,
100
,
100
);
ctx
.
filter
=
'
brightness(0.4)
'
;
ctx
.
drawImage
(
img
,
100
,
200
,
100
,
100
);
ctx
.
filter
=
'
contrast(200%)
'
;
ctx
.
drawImage
(
img
,
200
,
200
,
100
,
100
);
ctx
.
filter
=
'
blur(5px)
'
;
ctx
.
drawImage
(
img
,
0
,
300
,
100
,
100
);
let
result
=
ctx
.
toDataURL
()
console
.
info
(
result
)
})
}
.
width
(
'
100%
'
)
.
height
(
'
100%
'
)
}
}
```
![
filterDemo
](
figures/filterDemo.jpeg
)
## 方法
...
...
@@ -1802,82 +1932,6 @@ clip(path: Path2D, fillRule?: CanvasFillRule): void
!
[
zh-cn_image_000000127777779
](
figures/zh-cn_image_000000127777779.png
)
### filter
filter(filter: string): void
为Canvas图形设置各类滤镜效果。
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------ | ---- | ---- | ---------------------------------------- |
| filter | string | 是 | - | 接受各类滤镜效果的函数。支持的滤镜效果如下:
<br/>
- 'none': 无滤镜效果
<br/>
- 'blur':给图像设置高斯模糊
<br/>
- 'brightness':给图片应用一种线性乘法,使其看起来更亮或更暗
<br/>
- 'contrast':调整图像的对比度
<br/>
- 'grayscale':将图像转换为灰度图像
<br/>
- 'hue-rotate':给图像应用色相旋转
<br/>
- 'invert':反转输入图像
<br/>
- 'opacity':转化图像的透明程度
<br/>
- 'saturate':转换图像饱和度
<br/>
- 'sepia':将图像转换为深褐色
<br/>
默认值:'none' |
**示例:**
```
ts
// xxx.ets
@
Entry
@
Component
struct
FilterDemo
{
private
settings
:
RenderingContextSettings
=
new
RenderingContextSettings
(
true
);
private
context
:
CanvasRenderingContext2D
=
new
CanvasRenderingContext2D
(
this
.
settings
);
private
img
:
ImageBitmap
=
new
ImageBitmap
(
"
common/images/example.jpg
"
);
build
()
{
Flex
({
direction
:
FlexDirection
.
Column
,
alignItems
:
ItemAlign
.
Center
,
justifyContent
:
FlexAlign
.
Center
})
{
Canvas
(
this
.
context
)
.
width
(
'
100%
'
)
.
height
(
'
100%
'
)
.
backgroundColor
(
'
#ffff00
'
)
.
onReady
(()
=>
{
let
ctx
=
this
.
context
let
img
=
this
.
img
ctx
.
drawImage
(
img
,
0
,
0
,
100
,
100
);
ctx
.
filter
=
'
grayscale(50%)
'
;
ctx
.
drawImage
(
img
,
100
,
0
,
100
,
100
);
ctx
.
filter
=
'
sepia(60%)
'
;
ctx
.
drawImage
(
img
,
200
,
0
,
100
,
100
);
ctx
.
filter
=
'
saturate(30%)
'
;
ctx
.
drawImage
(
img
,
0
,
100
,
100
,
100
);
ctx
.
filter
=
'
hue-rotate(90degree)
'
;
ctx
.
drawImage
(
img
,
100
,
100
,
100
,
100
);
ctx
.
filter
=
'
invert(100%)
'
;
ctx
.
drawImage
(
img
,
200
,
100
,
100
,
100
);
ctx
.
filter
=
'
opacity(25%)
'
;
ctx
.
drawImage
(
img
,
0
,
200
,
100
,
100
);
ctx
.
filter
=
'
brightness(0.4)
'
;
ctx
.
drawImage
(
img
,
100
,
200
,
100
,
100
);
ctx
.
filter
=
'
contrast(200%)
'
;
ctx
.
drawImage
(
img
,
200
,
200
,
100
,
100
);
ctx
.
filter
=
'
blur(5px)
'
;
ctx
.
drawImage
(
img
,
0
,
300
,
100
,
100
);
let
result
=
ctx
.
toDataURL
()
console
.
info
(
result
)
})
}
.
width
(
'
100%
'
)
.
height
(
'
100%
'
)
}
}
```
![
filterDemo
](
figures/filterDemo.jpeg
)
### getTransform
getTransform(): Matrix2D
...
...
@@ -1902,47 +1956,6 @@ resetTransform(): void
从API version 9开始,该接口支持在ArkTS卡片中使用。
### direction
direction(direction: CanvasDirection): void
绘制文本时,描述当前文本方向的属性。
从API version 9开始,该接口支持在ArkTS卡片中使用。
**示例:**
```
ts
// xxx.ets
@
Entry
@
Component
struct
DirectionDemo
{
private
settings
:
RenderingContextSettings
=
new
RenderingContextSettings
(
true
);
private
context
:
CanvasRenderingContext2D
=
new
CanvasRenderingContext2D
(
this
.
settings
);
build
()
{
Flex
({
direction
:
FlexDirection
.
Column
,
alignItems
:
ItemAlign
.
Center
,
justifyContent
:
FlexAlign
.
Center
})
{
Canvas
(
this
.
context
)
.
width
(
'
100%
'
)
.
height
(
'
100%
'
)
.
backgroundColor
(
'
#ffff00
'
)
.
onReady
(()
=>
{
let
ctx
=
this
.
context
ctx
.
font
=
'
48px serif
'
;
ctx
.
textAlign
=
'
start
'
ctx
.
fillText
(
"
Hi ltr!
"
,
200
,
50
);
ctx
.
direction
=
"
rtl
"
;
ctx
.
fillText
(
"
Hi rtl!
"
,
200
,
100
);
})
}
.
width
(
'
100%
'
)
.
height
(
'
100%
'
)
}
}
```
![
directionDemo
](
figures/directionDemo.jpeg
)
### rotate
rotate(angle: number): void
...
...
@@ -2536,52 +2549,6 @@ getLineDash(): number[]
![
zh-cn_image_000000127777778
](
figures/zh-cn_image_000000127777778.png
)
### imageSmoothingQuality
imageSmoothingQuality(quality: imageSmoothingQuality)
用于设置图像平滑度。
从API version 9开始,该接口支持在ArkTS卡片中使用。
**参数:**
| 参数 | 类型 | 描述 |
| ------- | --------------------- | ---------------------------------------- |
| quality | imageSmoothingQuality | 支持如下三种类型:
<br/>
- 'low':低画质
<br/>
- 'medium':中画质
<br/>
- 'high':高画质 |
**示例:**
```
ts
// xxx.ets
@
Entry
@
Component
struct
ImageSmoothingQualityDemo
{
private
settings
:
RenderingContextSettings
=
new
RenderingContextSettings
(
true
);
private
context
:
CanvasRenderingContext2D
=
new
CanvasRenderingContext2D
(
this
.
settings
);
private
img
:
ImageBitmap
=
new
ImageBitmap
(
"
common/images/example.jpg
"
);
build
()
{
Flex
({
direction
:
FlexDirection
.
Column
,
alignItems
:
ItemAlign
.
Center
,
justifyContent
:
FlexAlign
.
Center
})
{
Canvas
(
this
.
context
)
.
width
(
'
100%
'
)
.
height
(
'
100%
'
)
.
backgroundColor
(
'
#ffff00
'
)
.
onReady
(()
=>
{
let
ctx
=
this
.
context
ctx
.
imageSmoothingEnabled
=
true
ctx
.
imageSmoothingQuality
=
'
high
'
ctx
.
drawImage
(
this
.
img
,
0
,
0
,
400
,
200
)
})
}
.
width
(
'
100%
'
)
.
height
(
'
100%
'
)
}
}
```
![
ImageSmoothingQualityDemo
](
figures/ImageSmoothingQualityDemo.jpeg
)
### transferFromImageBitmap
transferFromImageBitmap(bitmap: ImageBitmap): void
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录