• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# ArkUI子系统Changelog
2
3## cl.arkui.1  CanvasRenderingContext2D的drawImage接口默认单位变更
4
5**访问级别**
6
7公开接口
8
9**变更原因**
10
11当drawImage传入9个参数时,若首个参数(image)为PixelMap类型,则第2至第5个参数(sx、sy、sw和sh)以px为单位进行解析。与文档描述不一致,且绘制得到的图片大小存在问题。
12
13**变更影响**
14
15该变更涉及应用适配。
16
17当drawImage传入9个参数时,且首个参数为PixelMap类型时:
18
19- 变更前:第2至第5个参数都会以px为单位进行解析。
20- 变更后:第2至第5个参数会以vp为单位进行解析。
21
22||               变更前                |              变更后               |
23| :-: | :---------------------------------: | :-------------------------------: |
24| 第2至第5个参数以vp为单位传入 | ![](figures/before_drawimage_change_1.jpeg) | ![](figures/after_drawimage_change_1.jpeg) |
25| 第2至第5个参数以px为单位传入 | ![](figures/before_drawimage_change_2.jpeg) | ![](figures/after_drawimage_change_2.jpeg) |
26
27**起始API Level**
28
299
30
31**变更发生版本**
32
33从OpenHarmony SDK 5.1.0.48 版本开始。
34
35**变更的接口/组件**
36
37CanvasRenderingContext2D的drawImage接口
38
39**适配指导**
40
41变更后,使用drawImage接口时,若传入9个参数,且首个参数为PixelMap类型时,要注意第2至第5个参数会以vp为单位进行解析。
42
43**示例**
44
45```ts
46import { image } from '@kit.ImageKit'
47
48@Entry
49@Component
50struct Demo {
51  private settings: RenderingContextSettings = new RenderingContextSettings(true)
52  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
53
54  build() {
55    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
56      Canvas(this.context)
57        .width('100%')
58        .height('100%')
59        .onReady(() => {
60          let context = getContext(this)
61          let imageSourceApi = image.createImageSource(context.filesDir + "/view.jpg")
62          let pixelmap = imageSourceApi.createPixelMapSync();
63          let imageInfo = pixelmap.getImageInfoSync()
64          let width = px2vp(imageInfo.size.width)
65          let height = px2vp(imageInfo.size.height)
66          this.context.drawImage(pixelmap, 0, 0, width, height, 50, 50, 250, 200)
67          this.context.drawImage(pixelmap, 0, 0, imageInfo.size.width, imageInfo.size.height, 50, 300, 250, 200)
68        })
69    }
70    .width('100%')
71    .height('100%')
72  }
73}
74```
75
76## cl.arkui.3 CanvasRenderingContext2D和Path2D未指定起始点时由默认(0, 0)为绘制起点变更为前两位参数作为绘制起点
77
78**访问级别**
79
80公开接口
81
82**变更原因**
83
84CanvasRenderingContext2D绘制路径时,如果没有使用moveTo方法指定路径起始点,会默认从画布左上角(0,0)开始绘制路径,与W3C行为不一致。
85
86**变更影响**
87
88变更前:CanvasRenderingContext2D绘制路径时,如果没有使用moveTo方法指定路径起始点,会默认从画布左上角(0,0)开始绘制路径。
89
90变更后:CanvasRenderingContext2D绘制路径时,如果没有使用moveTo方法指定路径起始点,会以第一个有效的路径绘制方法的前两位number参数作为路径起始点。
91
92| 接口 | 示例 | 变更前 | 变更后 |
93|---------|---------|---------|---------|
94| lineTo | context.lineTo(100, 100)<br>context.lineTo(200, 100) |![变更前路径从左上角开始](figures/Canvas_lineTo_before.png)|![变更后路径从第一个绘制方法的前两位参数开始](figures/Canvas_lineTo_after.png)|
95| arcTo | context.arcTo(150, 20, 150, 70, 50) |![变更前路径从左上角开始](figures/Canvas_arcTo_before.png)|![变更后路径从第一个绘制方法的前两位参数开始](figures/Canvas_arcTo_after.png)|
96| bezierCurveTo | context.bezierCurveTo(20, 100, 200, 100, 200, 20)|![变更前路径从左上角开始](figures/Canvas_bezierCurveTo_before.png)|![变更后路径从第一个绘制方法的前两位参数开始](figures/Canvas_bezierCurveTo_after.png)|
97| quadraticCurveTo | context.quadraticCurveTo(100, 100, 200, 20)|![变更前路径从左上角开始](figures/Canvas_quadraticCurveTo_before.png)|![变更后路径从第一个绘制方法的前两位参数开始](figures/Canvas_quadraticCurveTo_after.png)|
98
99**起始API Level**
100
101API 9
102
103**变更发生版本**
104
105从OpenHarmony 5.1.0.48 版本开始。
106
107**变更的接口/组件**
108
109CanvasRenderingContext2D的lineTo, arcTo, bezierCurveTo, quadraticCurveTo接口
110
111Path2D的lineTo, arcTo, bezierCurveTo, quadraticCurveTo接口
112
113**适配指导**
114
115如需路径起点从(0, 0)出发,可以在开始绘制路径后使用moveTo(0, 0)。
116
117```ts
118// xxx.ets
119@Entry
120@Component
121struct LineTo {
122  private settings: RenderingContextSettings = new RenderingContextSettings(true)
123  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
124
125  build() {
126    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
127      Canvas(this.context)
128        .width('100%')
129        .height('100%')
130        .backgroundColor('#ffff00')
131        .onReady(() =>{
132          this.context.beginPath()
133          this.context.moveTo(0, 0)
134          this.context.lineTo(280, 160)
135          this.context.stroke()
136        })
137    }
138    .width('100%')
139    .height('100%')
140  }
141}
142```
143
144## cl.arkui.4 CanvasRenderingContext2D方法传NaN和Infinity值后执行的其他绘制方法由不绘制变更为正常绘制
145
146**访问级别**
147
148公开接口
149
150**变更原因**
151
152CanvasRenderingContext2D绘制路径时,若存在方法的number类型参数传入NaN或Infinity值,部分内容无法绘制或绘制异常,与Html5的行为不一致。
153
154**变更影响**
155
156变更前:绘制路径时,若存在路径方法的number类型参数传入NaN或Infinity值,整个路径无法绘制;对画布进行缩放、旋转、移动或使用变换矩阵进行图形变化时,number类型参数传入NaN或Infinity值,后面执行的方法无法绘制。
157
158变更后:绘制路径时,传入NaN或Infinity值的方法不做处理,根据有效的路径参数进行绘制;对画布进行缩放、旋转、移动或使用变换矩阵进行图形变化时,number类型参数传入NaN或Infinity值,其他传入有效参数的方法正常绘制。
159
160具体接口的差异如下:
161
162| 方法 | 变更前 | 变更后 |
163|---------|---------|---------|
164|moveTo|任一路径绘制方法的number类型参数传入NaN或Infinity值时,整个路径无法绘制。|路径绘制方法的number类型参数传入NaN或Infinity值时,该方法不生效。其他传入有效参数的路径绘制方法正常绘制。|
165|lineTo|任一路径绘制方法的number类型参数传入NaN或Infinity值时,整个路径无法绘制。|路径绘制方法的number类型参数传入NaN或Infinity值时,该方法不生效。其他传入有效参数的路径绘制方法正常绘制。|
166|bezierCurveTo|任一路径绘制方法的number类型参数传入NaN或Infinity值时,整个路径无法绘制。|路径绘制方法的number类型参数传入NaN或Infinity值时,该方法不生效。其他传入有效参数的路径绘制方法正常绘制。|
167|quadraticCurveTo|任一路径绘制方法的number类型参数传入NaN或Infinity值时,整个路径无法绘制。|路径绘制方法的number类型参数传入NaN或Infinity值时,该方法不生效。其他传入有效参数的路径绘制方法正常绘制。|
168|arc|任一路径绘制方法的number类型参数传入NaN或Infinity值时,整个路径无法绘制。|路径绘制方法的number类型参数传入NaN或Infinity值时,该方法不生效。其他传入有效参数的路径绘制方法正常绘制。|
169|ellipse|任一路径绘制方法的number类型参数传入NaN或Infinity值时,整个路径无法绘制。|路径绘制方法的number类型参数传入NaN或Infinity值时,该方法不生效。其他传入有效参数的路径绘制方法正常绘制。|
170|rect|任一路径绘制方法的number类型参数传入NaN或Infinity值时,整个路径无法绘制。|路径绘制方法的number类型参数传入NaN或Infinity值时,该方法不生效。其他传入有效参数的路径绘制方法正常绘制。|
171|arcTo|任一路径绘制方法的number类型参数传入NaN或Infinity值时,整个路径无法绘制。|路径绘制方法的number类型参数传入NaN或Infinity值时,该方法不生效。其他传入有效参数的路径绘制方法正常绘制。|
172|globalAlpha|绘制方法的number类型参数传入NaN或Infinity值,在该方法后执行的绘制方法无法绘制。|number类型参数传入NaN或Infinity值参数时该方法不生效。其他传入有效参数的绘制方法正常绘制。|
173|rotate|绘制方法的number类型参数传入NaN或Infinity值,在该方法后执行的绘制方法无法绘制。|number类型参数传入NaN或Infinity值参数时该方法不生效。其他传入有效参数的绘制方法正常绘制。|
174|scale|绘制方法的number类型参数传入NaN或Infinity值,在该方法后执行的绘制方法无法绘制。|number类型参数传入NaN或Infinity值参数时该方法不生效。其他传入有效参数的绘制方法正常绘制。|
175|transform|绘制方法的number类型参数传入NaN或Infinity值,在该方法后执行的绘制方法无法绘制。|number类型参数传入NaN或Infinity值参数时该方法不生效。其他传入有效参数的绘制方法正常绘制。|
176|setTransform|绘制方法的number类型参数传入NaN或Infinity值,在该方法后执行的绘制方法无法绘制。|number类型参数传入NaN或Infinity值参数时该方法不生效。其他传入有效参数的绘制方法正常绘制。|
177|translate|绘制方法的number类型参数传入NaN或Infinity值,在该方法后执行的绘制方法无法绘制。|number类型参数传入NaN或Infinity值参数时该方法不生效。其他传入有效参数的绘制方法正常绘制。|
178|lineDashOffset|设置了虚线样式的线条绘制出来是实线。|设置了虚线样式的线条绘制出来是虚线。|
179
180| 示例 | 变更前 | 变更后 |
181|---------|---------|---------|
182| context.moveTo(100, 100)<br>context.lineTo(NaN, 100)<br>context.lineTo(200, 200)<br>context.stroke() | 无绘制内容 | ![NaN_after](figures/NaN_after.png) |
183
184**起始API Level**
185
186API 9
187
188**变更发生版本**
189
190从OpenHarmony 5.1.0.48 版本开始。
191
192**变更的接口/组件**
193
194CanvasRenderingContext2D
195
196OffscreenCanvasRenderingContext2D
197
198Path2D
199
200**适配指导**
201
202默认行为变更,无需适配,但应注意变更后的行为是否对整体应用逻辑产生影响。