Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
26ef3cce
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,发现更多精彩内容 >>
未验证
提交
26ef3cce
编写于
7月 11, 2023
作者:
O
openharmony_ci
提交者:
Gitee
7月 11, 2023
浏览文件
操作
浏览文件
下载
差异文件
!20636 【ace_engine_standard部件】OffScreenCanvas接口增强例子代码
Merge pull request !20636 from limeng/OffscreenCanvas
上级
a3314d66
ff239d51
变更
2
展开全部
显示空白变更内容
内联
并排
Showing
2 changed file
with
487 addition
and
362 deletion
+487
-362
zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
...eference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
+475
-352
zh-cn/application-dev/ui/arkts-drawing-customization-on-canvas.md
...plication-dev/ui/arkts-drawing-customization-on-canvas.md
+12
-10
未找到文件。
zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
浏览文件 @
26ef3cce
此差异已折叠。
点击以展开。
zh-cn/application-dev/ui/arkts-drawing-customization-on-canvas.md
浏览文件 @
26ef3cce
...
...
@@ -53,8 +53,8 @@ Canvas提供画布组件,用于自定义绘制图形,开发者使用CanvasRe
//用来配置CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象的参数,包括是否开启抗锯齿。true表明开启抗锯齿
private
settings
:
RenderingContextSettings
=
new
RenderingContextSettings
(
true
)
private
context
:
CanvasRenderingContext2D
=
new
CanvasRenderingContext2D
(
this
.
settings
)
//用来创建OffscreenCanvas
RenderingContext2D
对象,width为离屏画布的宽度,height为离屏画布的高度。通过在canvas中调用OffscreenCanvasRenderingContext2D对象来绘制。
private
offC
ontext
:
OffscreenCanvasRenderingContext2D
=
new
OffscreenCanvasRenderingContext2D
(
600
,
600
,
this
.
settings
)
//用来创建OffscreenCanvas对象,width为离屏画布的宽度,height为离屏画布的高度。通过在canvas中调用OffscreenCanvasRenderingContext2D对象来绘制。
private
offC
anvas
:
OffscreenCanvas
=
new
OffscreenCanvas
(
600
,
600
)
build
()
{
Flex
({
direction
:
FlexDirection
.
Column
,
alignItems
:
ItemAlign
.
Center
,
justifyContent
:
FlexAlign
.
Center
})
{
...
...
@@ -63,10 +63,11 @@ Canvas提供画布组件,用于自定义绘制图形,开发者使用CanvasRe
.
height
(
'
100%
'
)
.
backgroundColor
(
'
#F5DC62
'
)
.
onReady
(()
=>
{
var
offContext
=
this
.
offCanvas
.
getContext
(
"
2d
"
,
this
.
settings
)
//可以在这里绘制内容
this
.
offContext
.
strokeRect
(
50
,
50
,
200
,
150
);
offContext
.
strokeRect
(
50
,
50
,
200
,
150
);
//将离屏绘值渲染的图像在普通画布上显示
let
image
=
this
.
offC
ontext
.
transferToImageBitmap
();
let
image
=
this
.
offC
anvas
.
transferToImageBitmap
();
this
.
context
.
transferFromImageBitmap
(
image
);
})
}
...
...
@@ -211,7 +212,7 @@ OffscreenCanvasRenderingContext2D对象和CanvasRenderingContext2D对象提供
struct
GetImageData
{
private
settings
:
RenderingContextSettings
=
new
RenderingContextSettings
(
true
)
private
context
:
CanvasRenderingContext2D
=
new
CanvasRenderingContext2D
(
this
.
settings
)
private
offC
ontext
:
OffscreenCanvasRenderingContext2D
=
new
OffscreenCanvasRenderingContext2D
(
600
,
600
,
this
.
settings
)
private
offC
anvas
:
OffscreenCanvas
=
new
OffscreenCanvas
(
600
,
600
)
private
img
:
ImageBitmap
=
new
ImageBitmap
(
"
/common/images/1234.png
"
)
build
()
{
...
...
@@ -221,14 +222,15 @@ OffscreenCanvasRenderingContext2D对象和CanvasRenderingContext2D对象提供
.
height
(
'
100%
'
)
.
backgroundColor
(
'
#F5DC62
'
)
.
onReady
(()
=>
{
var
offContext
=
this
.
offCanvas
.
getContext
(
"
2d
"
,
this
.
settings
)
// 使用drawImage接口将图片画在(0,0)为起点,宽高130的区域
this
.
offContext
.
drawImage
(
this
.
img
,
0
,
0
,
130
,
130
);
offContext
.
drawImage
(
this
.
img
,
0
,
0
,
130
,
130
);
// 使用getImageData接口,获得canvas组件区域中,(50,50)为起点,宽高130范围内的绘制内容
let
imagedata
=
this
.
offContext
.
getImageData
(
50
,
50
,
130
,
130
);
let
imagedata
=
offContext
.
getImageData
(
50
,
50
,
130
,
130
);
// 使用putImageData接口将得到的ImageData画在起点为(150, 150)的区域中
this
.
offContext
.
putImageData
(
imagedata
,
150
,
150
);
offContext
.
putImageData
(
imagedata
,
150
,
150
);
// 将离屏绘制的内容画到canvas组件上
let
image
=
this
.
offC
ontext
.
transferToImageBitmap
();
let
image
=
this
.
offC
anvas
.
transferToImageBitmap
();
this
.
context
.
transferFromImageBitmap
(
image
);
})
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录