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为单位传入 |  |  | 25| 第2至第5个参数以px为单位传入 |  |  | 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.2 Canvas路径绘制未指定起始点和绘制方法number类型参数传NaN和Infinity值的行为变更。 77 78**访问级别** 79 80公开接口 81 82**变更原因** 83 84使用Canvas绘制路径时，如果没有使用moveTo方法指定路径起始点，会默认从画布左上角(0,0)开始绘制路径；某些绘制方法的number类型参数传入NaN或Infinity值时，部分内容无法绘制。这些行为与W3C的行为不一致。 85 86**变更影响** 87 88此变更涉及应用适配。 89 90变更前：使用Canvas绘制路径时，如果没有使用moveTo方法指定路径起始点，会默认从画布左上角(0,0)开始绘制路径；任一路径绘制方法的number类型参数传入NaN或Infinity值时，整个路径无法绘制。对画布进行缩放、旋转、移动或使用变换矩阵进行图形变化时，number类型参数传入NaN或Infinity值，后面执行的方法无法绘制。 91 92变更后：使用Canvas绘制路径时，如果没有使用moveTo方法指定路径起始点，会以第一个有效的路径绘制方法的前两位number参数作为路径起始点；传入NaN或Infinity值的路径绘制方法不做处理，根据有效的路径参数进行绘制。对画布进行缩放、旋转、移动或使用变换矩阵进行图形变化时，number类型参数传入NaN或Infinity值，其他传入有效参数的方法正常绘制。 93 94具体接口的差异如下： 95 96| 方法 | 变更前 | 变更后 | 97|---------|---------|---------| 98|lineTo|如果没有使用moveTo方法指定路径起始点，会默认从画布左上角(0,0)开始绘制路径；<br>任一路径绘制方法的number类型参数传入NaN或Infinity值时，整个路径无法绘。|如果没有使用moveTo方法指定路径起始点，会以第一个有效的路径绘制方法的前两位number参数作为路径起始点；<br>路径绘制方法的number类型参数传入NaN或Infinity值时，该方法不生效。其他传入有效参数的路径绘制方法正常绘制。| 99|arcTo|如果没有使用moveTo方法指定路径起始点，会默认从画布左上角(0,0)开始绘制路径；<br>任一路径绘制方法的number类型参数传入NaN或Infinity值时，整个路径无法绘制。|如果没有使用moveTo方法指定路径起始点，会以第一个有效的路径绘制方法的前两位number参数作为路径起始点；<br>路径绘制方法的number类型参数传入NaN或Infinity值时，该方法不生效。其他传入有效参数的路径绘制方法正常绘制。| 100|bezierCurveTo|如果没有使用moveTo方法指定路径起始点，会默认从画布左上角(0,0)开始绘制路径；<br>任一路径绘制方法的number类型参数传入NaN或Infinity值时，整个路径无法绘制。|如果没有使用moveTo方法指定路径起始点，会以第一个有效的路径绘制方法的前两位number参数作为路径起始点；<br>路径绘制方法的number类型参数传入NaN或Infinity值时，该方法不生效。其他传入有效参数的路径绘制方法正常绘制。| 101|quadraticCurveTo|如果没有使用moveTo方法指定路径起始点，会默认从画布左上角(0,0)开始绘制路径；<br>任一路径绘制方法的number类型参数传入NaN或Infinity值时，整个路径无法绘制。|如果没有使用moveTo方法指定路径起始点，会以第一个有效的路径绘制方法的前两位number参数作为路径起始点；<br>路径绘制方法的number类型参数传入NaN或Infinity值时，该方法不生效。其他传入有效参数的路径绘制方法正常绘制。| 102|moveTo|任一路径绘制方法的number类型参数传入NaN或Infinity值时，整个路径无法绘制。|路径绘制方法的number类型参数传入NaN或Infinity值时，该方法不生效。其他传入有效参数的路径绘制方法正常绘制。| 103|arc|任一路径绘制方法的number类型参数传入NaN或Infinity值时，整个路径无法绘制。|路径绘制方法的number类型参数传入NaN或Infinity值时，该方法不生效。其他传入有效参数的路径绘制方法正常绘制。| 104|ellipse|任一路径绘制方法的number类型参数传入NaN或Infinity值时，整个路径无法绘制。|路径绘制方法的number类型参数传入NaN或Infinity值时，该方法不生效。其他传入有效参数的路径绘制方法正常绘制。| 105|rect|任一路径绘制方法的number类型参数传入NaN或Infinity值时，整个路径无法绘制。|路径绘制方法的number类型参数传入NaN或Infinity值时，该方法不生效。其他传入有效参数的路径绘制方法正常绘制。| 106|globalAlpha|绘制方法的number类型参数传入NaN或Infinity值，在该方法后执行的绘制方法无法绘制。|number类型参数传入NaN或Infinity值参数时该方法不生效。其他传入有效参数的绘制方法正常绘制。| 107|rotate|绘制方法的number类型参数传入NaN或Infinity值，在该方法后执行的绘制方法无法绘制。|number类型参数传入NaN或Infinity值参数时该方法不生效。其他传入有效参数的绘制方法正常绘制。| 108|scale|绘制方法的number类型参数传入NaN或Infinity值，在该方法后执行的绘制方法无法绘制。|number类型参数传入NaN或Infinity值参数时该方法不生效。其他传入有效参数的绘制方法正常绘制。| 109|transform|绘制方法的number类型参数传入NaN或Infinity值，在该方法后执行的绘制方法无法绘制。|number类型参数传入NaN或Infinity值参数时该方法不生效。其他传入有效参数的绘制方法正常绘制。| 110|setTransform|绘制方法的number类型参数传入NaN或Infinity值，在该方法后执行的绘制方法无法绘制。|number类型参数传入NaN或Infinity值参数时该方法不生效。其他传入有效参数的绘制方法正常绘制。| 111|translate|绘制方法的number类型参数传入NaN或Infinity值，在该方法后执行的绘制方法无法绘制。|number类型参数传入NaN或Infinity值参数时该方法不生效。其他传入有效参数的绘制方法正常绘制。| 112|lineDashOffset|设置了虚线样式的线条绘制出来是实线。|设置了虚线样式的线条绘制出来是虚线。| 113 114| 说明 | 示例 | 变更前 | 变更后 | 115|---------|---------|---------|---------| 116| 路径绘制方法传NaN| context.moveTo(0, 0)<br>context.lineTo(NaN, 100)<br>context.lineTo(100, 100)<br>context.lineTo(200, 100) | 无绘制内容 |  | 117| lineTo未指定起始点 | context.lineTo(100, 100)<br>context.lineTo(200, 100) ||| 118| arcTo未指定起始点 | context.arcTo(150, 20, 150, 70, 50) ||| 119| bezierCurveTo未指定起始点 | context.bezierCurveTo(20, 100, 200, 100, 200, 20)||| 120| quadraticCurveTo未指定起始点 | context.quadraticCurveTo(100, 100, 200, 20)||| 121 122**起始API Level** 123 124API 9 125 126**变更发生版本** 127 128从OpenHarmony 5.1.0.48 版本开始。 129 130**变更的接口/组件** 131 132CanvasRenderingContext2D 133 134OffscreenCanvasRenderingContext2D 135 136Path2D 137 138**适配指导** 139 140number类型参数传入NaN和Infinity值时，属于异常值处理。变更后的行为可能影响整体应用逻辑，若出现不需要的绘制内容，请删除对应的绘制逻辑。若需路径起点从(0, 0)出发，可使用moveTo(0, 0)。 141 142```ts 143// xxx.ets 144@Entry 145@Component 146struct LineTo { 147 private settings: RenderingContextSettings = new RenderingContextSettings(true) 148 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 149 150 build() { 151 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 152 Canvas(this.context) 153 .width('100%') 154 .height('100%') 155 .backgroundColor('#ffff00') 156 .onReady(() =>{ 157 this.context.beginPath() 158 this.context.moveTo(0, 0) // 指定绘制路径的起点为(0, 0) 159 this.context.lineTo(280, 160) 160 this.context.stroke() 161 }) 162 } 163 .width('100%') 164 .height('100%') 165 } 166} 167```
