1# ArkUI子系统Changelog
2
3## cl.arkui.1 ChipGroup选项后缀图标属性变更
4
5**访问级别**
6
7公开接口
8
9**变更原因**
10
11 ChipGroup 选项后缀图标需要支持配置无障碍信息以实现屏幕朗读功能，而前缀图标不需要实现屏幕朗读功能，同时后缀图标配置参数（suffixIcon）与前缀图标配置参数（prefixIcon）共用了同一个数据类型（IconOptions），不可以直接扩展IconOptions参数。因此决定废弃suffixIcon配置参数，并提供suffixImageIcon替代。
12
13**变更影响**
14
15该变更为不兼容性变更。
16
17变更前：使用suffixIcon配置ChipGroup选项的后缀图标信息；
18
19变更后：使用suffixImageIcon配置ChipGroup选项的后缀图标信息。
20
21**起始API Level**
22
2312
24
25**变更发生版本**
26
27从OpenHarmony SDK 5.0.0.51开始
28
29**变更的接口/组件**
30
31废弃suffixIcon配置参数，并新增suffixImageIcon替代。
32
33**适配指导**
34
35使用suffixImageIcon配置ChipGroup选项的后缀图标信息。示例如下:
36
37```ts
38import { ChipGroup, IconGroupSuffix, SymbolGlyphModifier } from '@kit.ArkUI';
39
40@Builder function DefaultFunction(): void {}
41
42@Component
43struct SectionGroup {
44  @Prop
45  @Require
46  title: ResourceStr;
47  @BuilderParam
48  @Require
49  content: () => void = DefaultFunction;
50
51  build() {
52    Column({ space: 4 }) {
53      Text(this.title)
54        .fontColor('#FF666666')
55        .fontSize(12)
56      Column({ space: 8 }) {
57        this.content()
58      }
59    }
60    .alignItems(HorizontalAlign.Start)
61    .width('100%')
62  }
63}
64@Component
65struct SectionItem {
66  @Prop
67  @Require
68  title: ResourceStr;
69  @BuilderParam
70  @Require
71  content: () => void = DefaultFunction;
72
73  build() {
74    Column({ space: 12 }) {
75      Text(this.title)
76      this.content()
77    }
78    .backgroundColor('#FFFFFFFF')
79    .borderRadius(12)
80    .padding(12)
81    .width('100%')
82  }
83}
84
85@Entry
86@Component
87export struct ChipGroupExample2 {
88  @LocalBuilder
89  Suffix() {
90    IconGroupSuffix({
91      items: [
92        {
93          icon: { src: $r('sys.media.ohos_ic_public_more'), },
94          accessibilityText: '更多',
95          accessibilityDescription: '新手提醒',
96          action: () => {
97            this.getUIContext().getPromptAction().showToast({
98              message: '更多按钮被点击！'
99            });
100          }
101        },
102        {
103          symbol: new SymbolGlyphModifier($r('sys.symbol.more'))
104            .accessibilityText('更多')
105            .accessibilityDescription('新手提醒'),
106          action: () => {
107            this.getUIContext().getPromptAction().showToast({
108              message: '更多按钮被点击！'
109            });
110          }
111        },
112        {
113          icon: { src: $r('sys.media.ohos_ic_public_more'), },
114          accessibilityText: '更多',
115          accessibilityDescription: '新手提醒',
116          accessibilityLevel: 'no',
117          action: () => {
118            this.getUIContext().getPromptAction().showToast({
119              message: '更多按钮被点击！'
120            });
121          }
122        }
123      ]
124    })
125  }
126
127  build() {
128    NavDestination() {
129      Scroll() {
130        Column({ space: 12 }) {
131          SectionGroup({ title: '可用的' }) {
132            SectionItem({ title: '单选 无后缀区域' }) {
133              ChipGroup({
134                items: [
135                  {
136                    prefixIcon: {
137                      src: $r('app.media.startIcon')
138                    },
139                    label: { text: "选项1" },
140                    suffixImageIcon: {
141                      src: $r('sys.media.save_button_picture'),
142                      accessibilityText: '保存',
143                      action: () => {
144                        this.getUIContext().getPromptAction().showToast({
145                          message: '后缀图标被点击！'
146                        });
147                      },
148                    }
149                  },
150                  {
151                    label: { text: "选项2" },
152                    suffixSymbol: {
153                      normal: new SymbolGlyphModifier($r('sys.symbol.save')),
154                      activated: new SymbolGlyphModifier($r('sys.symbol.save'))
155                    },
156                    suffixSymbolOptions: {
157                      normalAccessibility: {
158                        accessibilityText: '保存'
159                      },
160                      action: () => {
161                        this.getUIContext().getPromptAction().showToast({
162                          message: '后缀图标被点击！'
163                        });
164                      }
165                    }
166                  },
167                  {
168                    label: { text: "选项3" },
169                    suffixIcon: { src: $r('sys.media.save_button_picture'), }
170                  },
171                  { label: { text: "选项4" } },
172                  { label: { text: "选项5" } },
173                  { label: { text: "选项6" } },
174                  { label: { text: "选项7" } },
175                  { label: { text: "选项8" } },
176                  { label: { text: "选项9" } },
177                ]
178              })
179            }
180          }
181        }
182      }
183    }
184    .title('基础用法')
185    .backgroundColor('#F1F3F5')
186  }
187}
188```
189
190## cl.arkui.2 ImageAttributeModifier支持new方式创建ColorFilter对象传入colorFilter接口变更
191
192**访问级别**
193
194公开接口
195
196**变更原因**
197
198ImageAttributeModifier不支持new方式创建ColorFilter对象传入colorFilter接口，修复后即可增加colorFilter接口的支持范围，并且ColorFilter在业务代码中传递更加便捷。
199
200**变更影响**
201
202该变更为不兼容变更。
203
204变更前：ImageAttributeModifier不支持new方式创建ColorFilter对象传入colorFilter接口。
205
206变更后：ImageAttributeModifier支持new方式创建ColorFilter对象传入colorFilter接口。
207
208**起始API Level**
209
210API 9
211
212**变更发生版本**
213
214从OpenHarmony SDK 5.0.0.51开始。
215
216**变更的接口/组件**
217
218ImageAttributeModifier的colorFilter接口。
219
220**适配指导**
221
222使用ImageAttributeModifier的colorFilter接口时，已经支持new方式创建ColorFilter对象传入接口中。示例如下:
223
224```ts
225class ColorFilterModifier implements AttributeModifier<ImageAttribute> {
226  private colorFilter: ColorFilter | undefined = undefined
227
228  constructor(colorFilter: ColorFilter) {
229    this.colorFilter = colorFilter
230  }
231
232  applyNormalAttribute(instance: ImageAttribute): void {
233    instance.colorFilter(this.colorFilter)
234  }
235}
236
237
238@Entry
239@Component
240struct ColorFilters {
241  @State modifier: ColorFilterModifier = new ColorFilterModifier(new ColorFilter([0.1, 0.1, 0.1, 0.1, 0.1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.8, 0,]))
242
243  build() {
244    Column() {
245      Image($r('app.media.startIcon'))
246        .width(100)
247        .height(100)
248        .attributeModifier(this.modifier)
249    }
250    .height('100%')
251    .width('100%')
252  }
253}
254```
255
256## cl.arkui.3  CanvasRenderingContext2D的drawImage接口默认单位变更
257
258**访问级别**
259
260公开接口
261
262**变更原因**
263
264当drawImage传入9个参数时，若首个参数（image）为PixelMap类型，则第2至第5个参数（sx、sy、sw和sh）以px为单位进行解析。与文档描述不一致，且绘制得到的图片大小存在问题。
265
266**变更影响**
267
268该变更为不兼容变更。
269
270当drawImage传入9个参数时，且首个参数为PixelMap类型时：
271
272- 变更前：第2至第5个参数都会以px为单位进行解析。
273- 变更后：
274  - API version 13及以前，第2至第5个参数会以px为单位进行解析；
275  - API version 14及以后，第2至第5个参数会以vp为单位进行解析。
276
277|               变更前                |              变更后               |
278| :---------------------------------: | :-------------------------------: |
279| ![](figures/before_drawimage_change.jpeg) | ![](figures/after_drawimage_change.jpeg) |
280
281**起始API Level**
282
2839
284
285**变更发生版本**
286
287从OpenHarmony SDK 5.0.0.51 版本开始。
288
289**变更的接口/组件**
290
291CanvasRenderingContext2D的drawImage接口
292
293**适配指导**
294
295API version 14及以后，使用drawImage接口时，若传入9个参数，且首个参数为PixelMap类型时，要注意第2至第5个参数会以vp为单位进行解析。
296
297**示例**
298
299```ts
300import { image } from '@kit.ImageKit'
301
302@Entry
303@Component
304struct Demo {
305  private settings: RenderingContextSettings = new RenderingContextSettings(true)
306  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
307
308  build() {
309    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
310      Canvas(this.context)
311        .width('100%')
312        .height('100%')
313        .onReady(() => {
314          let context = getContext(this)
315          let imageSourceApi = image.createImageSource(context.filesDir + "/view.jpg")
316          let pixelmap = imageSourceApi.createPixelMapSync();
317          let imageInfo = pixelmap.getImageInfoSync()
318          let width = px2vp(imageInfo.size.width)
319          let height = px2vp(imageInfo.size.height)
320          this.context.drawImage(pixelmap, 0, 0, width, height, 50, 50, 250, 200)
321          this.context.drawImage(pixelmap, 0, 0, imageInfo.size.width, imageInfo.size.height, 50, 300, 250, 200)
322        })
323    }
324    .width('100%')
325    .height('100%')
326  }
327}
328```