1# Class (Canvas) 2<!--Kit: ArkGraphics 2D--> 3<!--Subsystem: Graphic--> 4<!--Owner: @hangmengxin--> 5<!--Designer: @wangyanglan--> 6<!--Tester: @nobuggers--> 7<!--Adviser: @ge-yafang--> 8 9> **说明：** 10> 11> - 本模块首批接口从API version 11开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 12> 13> - 本模块使用屏幕物理像素单位px。 14> 15> - 本模块为单线程模型策略，需要调用方自行管理线程安全和上下文状态的切换。 16 17承载绘制内容与绘制状态的载体。 18 19> **说明：** 20> 21> 画布自带一个默认画刷，该画刷为黑色，开启反走样，不具备其他任何样式效果。当画布中没有主动设置画刷和画笔时，该默认画刷生效。 22 23## 导入模块 24 25```ts 26import { drawing } from '@kit.ArkGraphics2D'; 27``` 28 29## constructor 30 31constructor(pixelmap: image.PixelMap) 32 33创建一个以PixelMap作为绘制目标的Canvas对象。 34 35**系统能力：** SystemCapability.Graphics.Drawing 36 37**参数：** 38 39| 参数名 | 类型 | 必填 | 说明 | 40| -------- | -------------------------------------------- | ---- | -------------- | 41| pixelmap | [image.PixelMap](../apis-image-kit/arkts-apis-image-PixelMap.md) | 是 | 构造函数入参。 | 42 43**错误码：** 44 45以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 46 47| 错误码ID | 错误信息 | 48| ------- | --------------------------------------------| 49| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 50 51**示例：** 52 53```ts 54import { drawing } from '@kit.ArkGraphics2D'; 55import { image } from '@kit.ImageKit'; 56 57const color = new ArrayBuffer(96); 58let opts : image.InitializationOptions = { 59 editable: true, 60 pixelFormat: 3, 61 size: { 62 height: 4, 63 width: 6 64 } 65} 66image.createPixelMap(color, opts).then((pixelMap) => { 67 const canvas = new drawing.Canvas(pixelMap); 68}) 69``` 70 71## drawRect 72 73drawRect(rect: common2D.Rect): void 74 75绘制一个矩形，默认使用黑色填充。 76 77**系统能力：** SystemCapability.Graphics.Drawing 78 79**参数：** 80 81| 参数名 | 类型 | 必填 | 说明 | 82| ------ | -------------------------------------------------- | ---- | -------------- | 83| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 绘制的矩形区域。 | 84 85**错误码：** 86 87以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 88 89| 错误码ID | 错误信息 | 90| ------- | --------------------------------------------| 91| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 92 93**示例：** 94 95```ts 96import { RenderNode } from '@kit.ArkUI'; 97import { common2D, drawing } from '@kit.ArkGraphics2D'; 98 99class DrawingRenderNode extends RenderNode { 100 draw(context : DrawContext) { 101 const canvas = context.canvas; 102 const pen = new drawing.Pen(); 103 pen.setStrokeWidth(5); 104 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 105 canvas.attachPen(pen); 106 canvas.drawRect({ left : 0, right : 10, top : 0, bottom : 10 }); 107 canvas.detachPen(); 108 } 109} 110``` 111 112## drawRect<sup>12+</sup> 113 114drawRect(left: number, top: number, right: number, bottom: number): void 115 116绘制一个矩形，默认使用黑色填充。性能优于[drawRect](#drawrect)接口，推荐使用本接口。 117 118**系统能力：** SystemCapability.Graphics.Drawing 119 120**参数：** 121 122| 参数名 | 类型 | 必填 | 说明 | 123| ------ | ------ | ---- | -------------- | 124| left | number | 是 | 矩形的左上角x轴坐标，该参数为浮点数。 | 125| top | number | 是 | 矩形的左上角y轴坐标，该参数为浮点数。 | 126| right | number | 是 | 矩形的右下角x轴坐标，该参数为浮点数。 | 127| bottom | number | 是 | 矩形的右下角y轴坐标，该参数为浮点数。 | 128 129**错误码：** 130 131以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 132 133| 错误码ID | 错误信息 | 134| ------- | --------------------------------------------| 135| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 136 137**示例：** 138 139```ts 140import { RenderNode } from '@kit.ArkUI'; 141import { drawing } from '@kit.ArkGraphics2D'; 142 143class DrawingRenderNode extends RenderNode { 144 145 draw(context : DrawContext) { 146 const canvas = context.canvas; 147 const pen = new drawing.Pen(); 148 pen.setStrokeWidth(5); 149 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 150 canvas.attachPen(pen); 151 canvas.drawRect(0, 0, 10, 10); 152 canvas.detachPen(); 153 } 154} 155``` 156 157## drawRoundRect<sup>12+</sup> 158 159drawRoundRect(roundRect: RoundRect): void 160 161画一个圆角矩形。 162 163**系统能力：** SystemCapability.Graphics.Drawing 164 165**参数** 166 167| 参数名 | 类型 | 必填 | 说明 | 168| ---------- | ----------------------- | ---- | ------------ | 169| roundRect | [RoundRect](arkts-apis-graphics-drawing-RoundRect.md) | 是 | 圆角矩形对象。| 170 171**错误码：** 172 173以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 174 175| 错误码ID | 错误信息 | 176| ------- | --------------------------------------------| 177| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 178 179**示例：** 180 181```ts 182import { RenderNode } from '@kit.ArkUI'; 183import { common2D, drawing } from '@kit.ArkGraphics2D'; 184 185class DrawingRenderNode extends RenderNode { 186 draw(context : DrawContext) { 187 const canvas = context.canvas; 188 let rect: common2D.Rect = { left : 100, top : 100, right : 400, bottom : 500 }; 189 let roundRect = new drawing.RoundRect(rect, 10, 10); 190 canvas.drawRoundRect(roundRect); 191 } 192} 193``` 194 195## drawNestedRoundRect<sup>12+</sup> 196 197drawNestedRoundRect(outer: RoundRect, inner: RoundRect): void 198 199绘制两个嵌套的圆角矩形，外部矩形边界必须包含内部矩形边界，否则无绘制效果。 200 201**系统能力：** SystemCapability.Graphics.Drawing 202 203**参数** 204 205| 参数名 | 类型 | 必填 | 说明 | 206| ------ | ----------------------- | ---- | ------------ | 207| outer | [RoundRect](arkts-apis-graphics-drawing-RoundRect.md) | 是 | 圆角矩形对象，表示外部圆角矩形边界。| 208| inner | [RoundRect](arkts-apis-graphics-drawing-RoundRect.md) | 是 | 圆角矩形对象，表示内部圆角矩形边界。| 209 210**错误码：** 211 212以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 213 214| 错误码ID | 错误信息 | 215| ------- | --------------------------------------------| 216| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 217 218**示例：** 219 220```ts 221import { RenderNode } from '@kit.ArkUI'; 222import { common2D, drawing } from '@kit.ArkGraphics2D'; 223 224class DrawingRenderNode extends RenderNode { 225 draw(context : DrawContext) { 226 const canvas = context.canvas; 227 let inRect: common2D.Rect = { left : 200, top : 200, right : 400, bottom : 500 }; 228 let outRect: common2D.Rect = { left : 100, top : 100, right : 400, bottom : 500 }; 229 let outRoundRect = new drawing.RoundRect(outRect, 10, 10); 230 let inRoundRect = new drawing.RoundRect(inRect, 10, 10); 231 canvas.drawNestedRoundRect(outRoundRect, inRoundRect); 232 canvas.drawRoundRect(outRoundRect); 233 } 234} 235``` 236 237## drawBackground<sup>12+</sup> 238 239drawBackground(brush: Brush): void 240 241使用画刷填充画布的可绘制区域。 242 243**系统能力：** SystemCapability.Graphics.Drawing 244 245**参数** 246 247| 参数名 | 类型 | 必填 | 说明 | 248| ------ | --------------- | ---- | ---------- | 249| brush | [Brush](arkts-apis-graphics-drawing-Brush.md) | 是 | 画刷对象。 | 250 251**错误码：** 252 253以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 254 255| 错误码ID | 错误信息 | 256| ------- | --------------------------------------------| 257| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 258 259**示例：** 260 261```ts 262import { RenderNode } from '@kit.ArkUI'; 263import { common2D, drawing } from '@kit.ArkGraphics2D'; 264 265class DrawingRenderNode extends RenderNode { 266 draw(context : DrawContext) { 267 const canvas = context.canvas; 268 const brush = new drawing.Brush(); 269 const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 270 brush.setColor(color); 271 canvas.drawBackground(brush); 272 } 273} 274``` 275 276## drawShadow<sup>12+</sup> 277 278drawShadow(path: Path, planeParams: common2D.Point3d, devLightPos: common2D.Point3d, lightRadius: number, ambientColor: common2D.Color, spotColor: common2D.Color, flag: ShadowFlag) : void 279 280绘制射灯类型阴影，使用路径描述环境光阴影的轮廓。 281 282**系统能力：** SystemCapability.Graphics.Drawing 283 284**参数：** 285 286| 参数名 | 类型 | 必填 | 说明 | 287| ------------ | ---------------------------------------- | ---- | ---------- | 288| path | [Path](arkts-apis-graphics-drawing-Path.md) | 是 | 路径对象，可生成阴影。 | 289| planeParams | [common2D.Point3d](js-apis-graphics-common2D.md#point3d12) | 是 | 表示一个三维向量，用于计算遮挡物相对于画布在z轴上的偏移量，其值取决于x与y坐标。 | 290| devLightPos | [common2D.Point3d](js-apis-graphics-common2D.md#point3d12) | 是 | 光线相对于画布的位置。 | 291| lightRadius | number | 是 | 圆形灯半径，该参数为浮点数。 | 292| ambientColor | [common2D.Color](js-apis-graphics-common2D.md#color) | 是 | 环境阴影颜色。 | 293| spotColor | [common2D.Color](js-apis-graphics-common2D.md#color) | 是 | 点阴影颜色。 | 294| flag | [ShadowFlag](arkts-apis-graphics-drawing-e.md#shadowflag12) | 是 | 阴影标志枚举。 | 295 296**错误码：** 297 298以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 299 300| 错误码ID | 错误信息 | 301| ------- | --------------------------------------------| 302| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 303 304**示例：** 305 306```ts 307import { RenderNode } from '@kit.ArkUI'; 308import { common2D, drawing } from '@kit.ArkGraphics2D'; 309 310class DrawingRenderNode extends RenderNode { 311 draw(context : DrawContext) { 312 const canvas = context.canvas; 313 const path = new drawing.Path(); 314 path.addCircle(100, 200, 100, drawing.PathDirection.CLOCKWISE); 315 let pen = new drawing.Pen(); 316 pen.setAntiAlias(true); 317 let pen_color : common2D.Color = { alpha: 0xFF, red: 0xFF, green: 0x00, blue: 0x00 }; 318 pen.setColor(pen_color); 319 pen.setStrokeWidth(10.0); 320 canvas.attachPen(pen); 321 let brush = new drawing.Brush(); 322 let brush_color : common2D.Color = { alpha: 0xFF, red: 0x00, green: 0xFF, blue: 0x00 }; 323 brush.setColor(brush_color); 324 canvas.attachBrush(brush); 325 let point1 : common2D.Point3d = {x: 100, y: 80, z:80}; 326 let point2 : common2D.Point3d = {x: 200, y: 10, z:40}; 327 let color1 : common2D.Color = {alpha: 0xFF, red:0, green:0, blue:0xFF}; 328 let color2 : common2D.Color = {alpha: 0xFF, red:0xFF, green:0, blue:0}; 329 let shadowFlag : drawing.ShadowFlag = drawing.ShadowFlag.ALL; 330 canvas.drawShadow(path, point1, point2, 30, color1, color2, shadowFlag); 331 } 332} 333``` 334 335## drawShadow<sup>18+</sup> 336 337drawShadow(path: Path, planeParams: common2D.Point3d, devLightPos: common2D.Point3d, lightRadius: number, ambientColor: common2D.Color | number, spotColor: common2D.Color | number, flag: ShadowFlag) : void 338 339绘制射灯类型阴影，使用路径描述环境光阴影的轮廓。 340 341**系统能力：** SystemCapability.Graphics.Drawing 342 343**参数：** 344 345| 参数名 | 类型 | 必填 | 说明 | 346| ------------ | ---------------------------------------- | ---- | ---------- | 347| path | [Path](arkts-apis-graphics-drawing-Path.md) | 是 | 路径对象，可生成阴影。 | 348| planeParams | [common2D.Point3d](js-apis-graphics-common2D.md#point3d12) | 是 | 表示一个三维向量，用于计算z轴方向的偏移量。 | 349| devLightPos | [common2D.Point3d](js-apis-graphics-common2D.md#point3d12) | 是 | 光线相对于画布的位置。 | 350| lightRadius | number | 是 | 圆形灯半径，该参数为浮点数。 | 351| ambientColor |[common2D.Color](js-apis-graphics-common2D.md#color) \| number | 是 | 环境阴影颜色，可以用16进制ARGB格式的32位无符号整数表示。 | 352| spotColor |[common2D.Color](js-apis-graphics-common2D.md#color) \| number | 是 | 点阴影颜色，可以用16进制ARGB格式的32位无符号整数表示。 | 353| flag | [ShadowFlag](arkts-apis-graphics-drawing-e.md#shadowflag12) | 是 | 阴影标志枚举。 | 354 355**错误码：** 356 357以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 358 359| 错误码ID | 错误信息 | 360| ------- | --------------------------------------------| 361| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 362 363**示例：** 364 365```ts 366import { RenderNode } from '@kit.ArkUI'; 367import { common2D, drawing } from '@kit.ArkGraphics2D'; 368 369class DrawingRenderNode extends RenderNode { 370 draw(context : DrawContext) { 371 const canvas = context.canvas; 372 const path = new drawing.Path(); 373 path.addCircle(300, 600, 100, drawing.PathDirection.CLOCKWISE); 374 let point1 : common2D.Point3d = {x: 100, y: 80, z:80}; 375 let point2 : common2D.Point3d = {x: 200, y: 10, z:40}; 376 let shadowFlag : drawing.ShadowFlag = drawing.ShadowFlag.ALL; 377 canvas.drawShadow(path, point1, point2, 30, 0xFF0000FF, 0xFFFF0000, shadowFlag); 378 } 379} 380``` 381 382## getLocalClipBounds<sup>12+</sup> 383 384getLocalClipBounds(): common2D.Rect 385 386获取画布裁剪区域的边界。 387 388**系统能力：** SystemCapability.Graphics.Drawing 389 390**返回值：** 391 392| 类型 | 说明 | 393| ---------------------------------------- | -------- | 394| [common2D.Rect](js-apis-graphics-common2D.md#rect) | 返回画布裁剪区域的矩形边界。 | 395 396**示例：** 397 398```ts 399import { RenderNode } from '@kit.ArkUI'; 400import { common2D, drawing } from '@kit.ArkGraphics2D'; 401 402class DrawingRenderNode extends RenderNode { 403 draw(context : DrawContext) { 404 const canvas = context.canvas; 405 let clipRect: common2D.Rect = { 406 left : 150, top : 150, right : 300, bottom : 400 407 }; 408 canvas.clipRect(clipRect,drawing.ClipOp.DIFFERENCE, true); 409 console.info("test rect.left: " + clipRect.left); 410 console.info("test rect.top: " + clipRect.top); 411 console.info("test rect.right: " + clipRect.right); 412 console.info("test rect.bottom: " + clipRect.bottom); 413 canvas.getLocalClipBounds(); 414 } 415} 416``` 417 418## getTotalMatrix<sup>12+</sup> 419 420getTotalMatrix(): Matrix 421 422获取画布矩阵。 423 424**系统能力：** SystemCapability.Graphics.Drawing 425 426**返回值：** 427 428| 类型 | 说明 | 429| ----------------- | -------- | 430| [Matrix](arkts-apis-graphics-drawing-Matrix.md) |返回画布矩阵。 | 431 432**示例：** 433 434```ts 435import { RenderNode } from '@kit.ArkUI'; 436import { drawing } from '@kit.ArkGraphics2D'; 437 438class DrawingRenderNode extends RenderNode { 439 draw(context : DrawContext) { 440 const canvas = context.canvas; 441 let matrix = new drawing.Matrix(); 442 matrix.setMatrix([5, 0, 0, 0, 1, 1, 0, 0, 1]); 443 canvas.setMatrix(matrix); 444 let matrixResult =canvas.getTotalMatrix(); 445 } 446} 447``` 448 449## drawCircle 450 451drawCircle(x: number, y: number, radius: number): void 452 453绘制一个圆形。如果半径小于等于零，则不绘制。默认使用黑色填充。 454 455**系统能力：** SystemCapability.Graphics.Drawing 456 457**参数：** 458 459| 参数名 | 类型 | 必填 | 说明 | 460| ------ | ------ | ---- | ------------------- | 461| x | number | 是 | 圆心的x坐标，该参数为浮点数。 | 462| y | number | 是 | 圆心的y坐标，该参数为浮点数。 | 463| radius | number | 是 | 圆的半径，大于0的浮点数。 | 464 465**错误码：** 466 467以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 468 469| 错误码ID | 错误信息 | 470| ------- | --------------------------------------------| 471| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 472 473**示例：** 474 475```ts 476import { RenderNode } from '@kit.ArkUI'; 477import { drawing } from '@kit.ArkGraphics2D'; 478 479class DrawingRenderNode extends RenderNode { 480 draw(context : DrawContext) { 481 const canvas = context.canvas; 482 const pen = new drawing.Pen(); 483 pen.setStrokeWidth(5); 484 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 485 canvas.attachPen(pen); 486 canvas.drawCircle(10, 10, 2); 487 canvas.detachPen(); 488 } 489} 490``` 491 492## drawImage 493 494drawImage(pixelmap: image.PixelMap, left: number, top: number, samplingOptions?: SamplingOptions): void 495 496画一张图片，图片的左上角坐标为(left, top)。 497 498**系统能力：** SystemCapability.Graphics.Drawing 499 500**参数：** 501 502| 参数名 | 类型 | 必填 | 说明 | 503| -------- | -------------------------------------------- | ---- | ------------------------------- | 504| pixelmap | [image.PixelMap](../apis-image-kit/arkts-apis-image-PixelMap.md) | 是 | 图片的PixelMap。 | 505| left | number | 是 | 图片位置的左上角x轴坐标，该参数为浮点数。 | 506| top | number | 是 | 图片位置的左上角y轴坐标，该参数为浮点数。 | 507| samplingOptions<sup>12+</sup> | [SamplingOptions](arkts-apis-graphics-drawing-SamplingOptions.md) | 否 | 采样选项对象，默认为不使用任何参数构造的原始采样选项对象。 | 508 509**错误码：** 510 511以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 512 513| 错误码ID | 错误信息 | 514| ------- | --------------------------------------------| 515| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 516 517**示例：** 518 519```ts 520import { RenderNode } from '@kit.ArkUI'; 521import { image } from '@kit.ImageKit'; 522import { drawing } from '@kit.ArkGraphics2D'; 523 524class DrawingRenderNode extends RenderNode { 525 draw(context : DrawContext) { 526 const width = 1000; 527 const height = 1000; 528 const bufferSize = width * height * 4; 529 const color: ArrayBuffer = new ArrayBuffer(bufferSize); 530 531 const colorData = new Uint8Array(color); 532 for (let i = 0; i < colorData.length; i += 4) { 533 colorData[i] = 255; 534 colorData[i+1] = 156; 535 colorData[i+2] = 0; 536 colorData[i+3] = 255; 537 } 538 539 let opts : image.InitializationOptions = { 540 editable: true, 541 pixelFormat: 3, 542 size: { height, width } 543 } 544 545 let pixelMap: image.PixelMap = image.createPixelMapSync(color, opts); 546 const canvas = context.canvas; 547 let options = new drawing.SamplingOptions(drawing.FilterMode.FILTER_MODE_NEAREST); 548 if (pixelMap != null) { 549 canvas.drawImage(pixelMap, 0, 0, options); 550 } 551 } 552} 553``` 554 555## drawImageRect<sup>12+</sup> 556 557drawImageRect(pixelmap: image.PixelMap, dstRect: common2D.Rect, samplingOptions?: SamplingOptions): void 558 559将图片绘制到画布的指定区域上。 560 561**系统能力：** SystemCapability.Graphics.Drawing 562 563**参数：** 564 565| 参数名 | 类型 | 必填 | 说明 | 566| -------- | -------------------------------------------- | ---- | ------------------------------- | 567| pixelmap | [image.PixelMap](../apis-image-kit/arkts-apis-image-PixelMap.md) | 是 | 图片的PixelMap。 | 568| dstRect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 矩形对象，用于指定画布上图片的绘制区域。 | 569| samplingOptions | [SamplingOptions](arkts-apis-graphics-drawing-SamplingOptions.md) | 否 | 采样选项对象，默认为不使用任何参数构造的原始采样选项对象。 | 570 571**错误码：** 572 573以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 574 575| 错误码ID | 错误信息 | 576| ------- | --------------------------------------------| 577| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 578 579**示例：** 580 581```ts 582import { RenderNode } from '@kit.ArkUI'; 583import { image } from '@kit.ImageKit'; 584import { common2D, drawing } from '@kit.ArkGraphics2D'; 585 586class DrawingRenderNode extends RenderNode { 587 draw(context : DrawContext) { 588 const width = 1000; 589 const height = 1000; 590 const bufferSize = width * height * 4; 591 const color: ArrayBuffer = new ArrayBuffer(bufferSize); 592 593 const colorData = new Uint8Array(color); 594 for (let i = 0; i < colorData.length; i += 4) { 595 colorData[i] = 255; 596 colorData[i+1] = 156; 597 colorData[i+2] = 0; 598 colorData[i+3] = 255; 599 } 600 601 let opts : image.InitializationOptions = { 602 editable: true, 603 pixelFormat: 3, 604 size: { height, width } 605 } 606 607 let pixelMap: image.PixelMap = image.createPixelMapSync(color, opts); 608 const canvas = context.canvas; 609 let pen = new drawing.Pen(); 610 canvas.attachPen(pen); 611 let rect: common2D.Rect = { left: 0, top: 0, right: 200, bottom: 200 }; 612 canvas.drawImageRect(pixelMap, rect); 613 canvas.detachPen(); 614 } 615} 616``` 617 618## drawImageRectWithSrc<sup>12+</sup> 619 620drawImageRectWithSrc(pixelmap: image.PixelMap, srcRect: common2D.Rect, dstRect: common2D.Rect, samplingOptions?: SamplingOptions, constraint?: SrcRectConstraint): void 621 622将图片的指定区域绘制到画布的指定区域。 623 624**系统能力：** SystemCapability.Graphics.Drawing 625 626**参数：** 627 628| 参数名 | 类型 | 必填 | 说明 | 629| -------- | -------------------------------------------- | ---- | ------------------------------- | 630| pixelmap | [image.PixelMap](../apis-image-kit/arkts-apis-image-PixelMap.md) | 是 | 图片的PixelMap。 | 631| srcRect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 矩形对象，用于指定图片的待绘制区域。 | 632| dstRect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 矩形对象，用于指定画布上图片的绘制区域。 | 633| samplingOptions | [SamplingOptions](arkts-apis-graphics-drawing-SamplingOptions.md) | 否 | 采样选项对象，默认为不使用任何参数构造的原始采样选项对象。 | 634| constraint | [SrcRectConstraint](arkts-apis-graphics-drawing-e.md#srcrectconstraint12) | 否 | 源矩形区域约束类型，默认为STRICT。 | 635 636**错误码：** 637 638以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 639 640| 错误码ID | 错误信息 | 641| ------- | --------------------------------------------| 642| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 643 644**示例：** 645 646```ts 647import { RenderNode } from '@kit.ArkUI'; 648import { image } from '@kit.ImageKit'; 649import { common2D, drawing } from '@kit.ArkGraphics2D'; 650 651class DrawingRenderNode extends RenderNode { 652 draw(context : DrawContext) { 653 const width = 1000; 654 const height = 1000; 655 const bufferSize = width * height * 4; 656 const color: ArrayBuffer = new ArrayBuffer(bufferSize); 657 658 const colorData = new Uint8Array(color); 659 for (let i = 0; i < colorData.length; i += 4) { 660 colorData[i] = 255; 661 colorData[i+1] = 156; 662 colorData[i+2] = 0; 663 colorData[i+3] = 255; 664 } 665 666 let opts : image.InitializationOptions = { 667 editable: true, 668 pixelFormat: 3, 669 size: { height, width } 670 } 671 672 let pixelMap: image.PixelMap = image.createPixelMapSync(color, opts); 673 const canvas = context.canvas; 674 let pen = new drawing.Pen(); 675 canvas.attachPen(pen); 676 let srcRect: common2D.Rect = { left: 0, top: 0, right: 100, bottom: 100 }; 677 let dstRect: common2D.Rect = { left: 100, top: 100, right: 200, bottom: 200 }; 678 canvas.drawImageRectWithSrc(pixelMap, srcRect, dstRect); 679 canvas.detachPen(); 680 } 681} 682``` 683 684## drawColor 685 686drawColor(color: common2D.Color, blendMode?: BlendMode): void 687 688使用指定颜色并按照指定的[BlendMode](arkts-apis-graphics-drawing-e.md#blendmode)对画布当前可绘制区域进行填充。 689 690**系统能力：** SystemCapability.Graphics.Drawing 691 692**参数：** 693 694| 参数名 | 类型 | 必填 | 说明 | 695| --------- | ---------------------------------------------------- | ---- | -------------------------------- | 696| color | [common2D.Color](js-apis-graphics-common2D.md#color) | 是 | ARGB格式的颜色，每个颜色通道的值是0到255之间的整数。 | 697| blendMode | [BlendMode](arkts-apis-graphics-drawing-e.md#blendmode) | 否 | 颜色混合模式，默认模式为SRC_OVER。 | 698 699**错误码：** 700 701以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 702 703| 错误码ID | 错误信息 | 704| ------- | --------------------------------------------| 705| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 706 707**示例：** 708 709```ts 710import { RenderNode } from '@kit.ArkUI'; 711import { common2D, drawing } from '@kit.ArkGraphics2D'; 712 713class DrawingRenderNode extends RenderNode { 714 draw(context : DrawContext) { 715 const canvas = context.canvas; 716 let color: common2D.Color = { 717 alpha : 255, 718 red: 0, 719 green: 10, 720 blue: 10 721 } 722 canvas.drawColor(color, drawing.BlendMode.CLEAR); 723 } 724} 725``` 726 727## drawColor<sup>12+</sup> 728 729drawColor(alpha: number, red: number, green: number, blue: number, blendMode?: BlendMode): void 730 731使用指定颜色并按照指定的[BlendMode](arkts-apis-graphics-drawing-e.md#blendmode)对画布当前可绘制区域进行填充。性能优于[drawColor](#drawcolor)接口，推荐使用本接口。 732 733**系统能力：** SystemCapability.Graphics.Drawing 734 735**参数：** 736 737| 参数名 | 类型 | 必填 | 说明 | 738| --------- | ----------------------- | ---- | ------------------------------------------------- | 739| alpha | number | 是 | ARGB格式颜色的透明度通道值，该参数是0到255之间的整数，传入范围内的浮点数会向下取整。 | 740| red | number | 是 | ARGB格式颜色的红色通道值，该参数是0到255之间的整数，传入范围内的浮点数会向下取整。 | 741| green | number | 是 | ARGB格式颜色的绿色通道值，该参数是0到255之间的整数，传入范围内的浮点数会向下取整。 | 742| blue | number | 是 | ARGB格式颜色的蓝色通道值，该参数是0到255之间的整数，传入范围内的浮点数会向下取整。 | 743| blendMode | [BlendMode](arkts-apis-graphics-drawing-e.md#blendmode) | 否 | 颜色混合模式，默认模式为SRC_OVER。 | 744 745**错误码：** 746 747以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 748 749| 错误码ID | 错误信息 | 750| ------- | --------------------------------------------| 751| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 752 753**示例：** 754 755```ts 756import { RenderNode } from '@kit.ArkUI'; 757import { drawing } from '@kit.ArkGraphics2D'; 758 759class DrawingRenderNode extends RenderNode { 760 draw(context : DrawContext) { 761 const canvas = context.canvas; 762 canvas.drawColor(255, 0, 10, 10, drawing.BlendMode.CLEAR); 763 } 764} 765``` 766 767## drawColor<sup>18+</sup> 768 769drawColor(color: number, blendMode?: BlendMode): void 770 771使用指定颜色并按照指定的[BlendMode](arkts-apis-graphics-drawing-e.md#blendmode)对画布当前可绘制区域进行填充。 772 773**系统能力：** SystemCapability.Graphics.Drawing 774 775**参数：** 776 777| 参数名 | 类型 | 必填 | 说明 | 778| --------- | ---------------------------------------------------- | ---- | -------------------------------- | 779| color | number | 是 | 16进制ARGB格式的颜色。 | 780| blendMode | [BlendMode](arkts-apis-graphics-drawing-e.md#blendmode) | 否 | 颜色混合模式，默认模式为SRC_OVER。 | 781 782**错误码：** 783 784以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 785 786| 错误码ID | 错误信息 | 787| ------- | --------------------------------------------| 788| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 789 790**示例：** 791 792```ts 793import { RenderNode } from '@kit.ArkUI'; 794import { drawing } from '@kit.ArkGraphics2D'; 795 796class DrawingRenderNode extends RenderNode { 797 draw(context : DrawContext) { 798 const canvas = context.canvas; 799 canvas.drawColor(0xff000a0a, drawing.BlendMode.CLEAR); 800 } 801} 802``` 803 804## drawPixelMapMesh<sup>12+</sup> 805 806drawPixelMapMesh(pixelmap: image.PixelMap, meshWidth: number, meshHeight: number, vertices: Array\<number>, vertOffset: number, colors: Array\<number>, colorOffset: number): void 807 808在网格上绘制像素图，网格均匀分布在像素图上。（只支持brush，使用pen没有绘制效果。） 809 810**系统能力：** SystemCapability.Graphics.Drawing 811 812**参数：** 813 814| 参数名 | 类型 | 必填 | 说明 | 815| ----------- | ------------- | ---- | ------------------------------- | 816| pixelmap | [image.PixelMap](../apis-image-kit/arkts-apis-image-PixelMap.md) | 是 | 用于绘制网格的像素图。 | 817| meshWidth | number | 是 | 网格中的列数，大于0的整数。 | 818| meshHeight | number | 是 | 网格中的行数，大于0的整数。 | 819| vertices | Array\<number> | 是 | 顶点数组，指定网格的绘制位置，浮点数组，大小必须为((meshWidth+1) * (meshHeight+1) + vertOffset) * 2。 | 820| vertOffset | number | 是 | 绘图前要跳过的vert元素数，大于等于0的整数。 | 821| colors | Array\<number> | 是 | 颜色数组，在每个顶点指定一种颜色，整数数组，可为null，大小必须为(meshWidth+1) * (meshHeight+1) + colorOffset。 | 822| colorOffset | number | 是 | 绘制前要跳过的颜色元素数，大于等于0的整数。 | 823 824**错误码：** 825 826以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 827 828| 错误码ID | 错误信息 | 829| ------- | --------------------------------------------| 830| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 831 832**示例：** 833 834```ts 835import { RenderNode } from '@kit.ArkUI'; 836import { image } from '@kit.ImageKit'; 837import { drawing } from '@kit.ArkGraphics2D'; 838 839class DrawingRenderNode extends RenderNode { 840 draw(context : DrawContext) { 841 const width = 1000; 842 const height = 1000; 843 const bufferSize = width * height * 4; 844 const color: ArrayBuffer = new ArrayBuffer(bufferSize); 845 846 const colorData = new Uint8Array(color); 847 for (let i = 0; i < colorData.length; i += 4) { 848 colorData[i] = 255; 849 colorData[i+1] = 156; 850 colorData[i+2] = 0; 851 colorData[i+3] = 255; 852 } 853 854 let opts : image.InitializationOptions = { 855 editable: true, 856 pixelFormat: 3, 857 size: { height, width } 858 } 859 860 let pixelMap: image.PixelMap = image.createPixelMapSync(color, opts); 861 const canvas = context.canvas; 862 if (pixelMap != null) { 863 const brush = new drawing.Brush(); // 只支持brush，使用pen没有绘制效果。 864 canvas.attachBrush(brush); 865 let verts : Array<number> = [0, 0, 50, 0, 410, 0, 0, 180, 50, 180, 410, 180, 0, 360, 50, 360, 410, 360]; // 18 866 canvas.drawPixelMapMesh(pixelMap, 2, 2, verts, 0, null, 0); 867 canvas.detachBrush(); 868 } 869 } 870} 871``` 872 873## clear<sup>12+</sup> 874 875clear(color: common2D.Color): void 876 877使用指定颜色填充画布上的裁剪区域。效果等同于[drawColor](#drawcolor)。 878 879**系统能力：** SystemCapability.Graphics.Drawing 880 881**参数：** 882 883| 参数名 | 类型 | 必填 | 说明 | 884| --------- | ---------------------------------------------------- | ---- | -------------------------------- | 885| color | [common2D.Color](js-apis-graphics-common2D.md#color) | 是 | ARGB格式的颜色，每个颜色通道的值是0到255之间的整数。 | 886 887**错误码：** 888 889以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 890 891| 错误码ID | 错误信息 | 892| ------- | --------------------------------------------| 893| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 894 895**示例：** 896 897```ts 898import { RenderNode } from '@kit.ArkUI'; 899import { common2D, drawing } from '@kit.ArkGraphics2D'; 900 901class DrawingRenderNode extends RenderNode { 902 draw(context : DrawContext) { 903 const canvas = context.canvas; 904 let color: common2D.Color = {alpha: 255, red: 255, green: 0, blue: 0}; 905 canvas.clear(color); 906 } 907} 908``` 909 910## clear<sup>18+</sup> 911 912clear(color: common2D.Color | number): void 913 914使用指定颜色填充画布上的裁剪区域。 915 916**系统能力：** SystemCapability.Graphics.Drawing 917 918**参数：** 919 920| 参数名 | 类型 | 必填 | 说明 | 921| --------- | ---------------------------------------------------- | ---- | -------------------------------- | 922| color | [common2D.Color](js-apis-graphics-common2D.md#color) \| number| 是 | 颜色，可以用16进制ARGB格式的无符号整数表示。 | 923 924**示例：** 925 926```ts 927import { RenderNode } from '@kit.ArkUI'; 928import { drawing } from '@kit.ArkGraphics2D'; 929 930class DrawingRenderNode extends RenderNode { 931 draw(context : DrawContext) { 932 const canvas = context.canvas; 933 let color: number = 0xffff0000; 934 canvas.clear(color); 935 } 936} 937``` 938 939## getWidth<sup>12+</sup> 940 941getWidth(): number 942 943获取画布的宽度。 944 945**系统能力：** SystemCapability.Graphics.Drawing 946 947**返回值：** 948 949| 类型 | 说明 | 950| ------ | -------------- | 951| number | 返回画布的宽度，该参数为浮点数。 | 952 953**示例：** 954 955```ts 956import { RenderNode } from '@kit.ArkUI'; 957import { drawing } from '@kit.ArkGraphics2D'; 958 959class DrawingRenderNode extends RenderNode { 960 draw(context : DrawContext) { 961 const canvas = context.canvas; 962 let width = canvas.getWidth(); 963 console.info('get canvas width:' + width); 964 } 965} 966``` 967 968## getHeight<sup>12+</sup> 969 970getHeight(): number 971 972获取画布的高度。 973 974**系统能力：** SystemCapability.Graphics.Drawing 975 976**返回值：** 977 978| 类型 | 说明 | 979| ------ | -------------- | 980| number | 返回画布的高度，该参数为浮点数。 | 981 982**示例：** 983 984```ts 985import { RenderNode } from '@kit.ArkUI'; 986import { drawing } from '@kit.ArkGraphics2D'; 987 988class DrawingRenderNode extends RenderNode { 989 draw(context : DrawContext) { 990 const canvas = context.canvas; 991 let height = canvas.getHeight(); 992 console.log('get canvas height:' + height); 993 } 994} 995``` 996 997## drawOval<sup>12+</sup> 998 999drawOval(oval: common2D.Rect): void 1000 1001在画布上绘制一个椭圆，椭圆的形状和位置由椭圆的外切矩形给出。 1002 1003**系统能力：** SystemCapability.Graphics.Drawing 1004 1005**参数** 1006 1007| 参数名 | 类型 | 必填 | 说明 | 1008| ------ | -------------------------------------------------- | ---- | -------------- | 1009| oval | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 矩形区域，该矩形的内切椭圆即为待绘制椭圆。 | 1010 1011**错误码：** 1012 1013以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1014 1015| 错误码ID | 错误信息 | 1016| ------- | --------------------------------------------| 1017| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1018 1019**示例：** 1020 1021```ts 1022import { RenderNode } from '@kit.ArkUI'; 1023import { common2D, drawing } from '@kit.ArkGraphics2D'; 1024 1025class DrawingRenderNode extends RenderNode { 1026 draw(context : DrawContext) { 1027 const canvas = context.canvas; 1028 const pen = new drawing.Pen(); 1029 pen.setStrokeWidth(5); 1030 const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 1031 pen.setColor(color); 1032 canvas.attachPen(pen); 1033 const rect: common2D.Rect = {left:100, top:50, right:400, bottom:500}; 1034 canvas.drawOval(rect); 1035 canvas.detachPen(); 1036 } 1037} 1038``` 1039 1040## drawArc<sup>12+</sup> 1041 1042drawArc(arc: common2D.Rect, startAngle: number, sweepAngle: number): void 1043 1044在画布上绘制圆弧。该方法允许指定起始角度、扫描角度。当扫描角度的绝对值大于360度时，则绘制椭圆。 1045 1046**系统能力：** SystemCapability.Graphics.Drawing 1047 1048**参数** 1049 1050| 参数名 | 类型 | 必填 | 说明 | 1051| ------ | -------------------------------------------------- | ---- | -------------- | 1052| arc | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 包含要绘制的圆弧的椭圆的矩形边界。 | 1053| startAngle | number | 是 | 弧的起始角度，单位为度，该参数为浮点数。0度时起始点位于椭圆的右端点，正数时以顺时针方向放置起始点，负数时以逆时针方向放置起始点。 | 1054| sweepAngle | number | 是 | 弧的扫描角度，单位为度，该参数为浮点数。为正数时顺时针扫描，为负数时逆时针扫描。它的有效范围在-360度到360度之间，当绝对值大于360度时，该方法绘制的是一个椭圆。 | 1055 1056**错误码：** 1057 1058以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1059 1060| 错误码ID | 错误信息 | 1061| ------- | --------------------------------------------| 1062| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1063 1064**示例：** 1065 1066```ts 1067import { RenderNode } from '@kit.ArkUI'; 1068import { common2D, drawing } from '@kit.ArkGraphics2D'; 1069 1070class DrawingRenderNode extends RenderNode { 1071 draw(context : DrawContext) { 1072 const canvas = context.canvas; 1073 const pen = new drawing.Pen(); 1074 pen.setStrokeWidth(5); 1075 const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 1076 pen.setColor(color); 1077 canvas.attachPen(pen); 1078 const rect: common2D.Rect = {left:100, top:50, right:400, bottom:200}; 1079 canvas.drawArc(rect, 90, 180); 1080 canvas.detachPen(); 1081 } 1082} 1083``` 1084 1085## drawPoint 1086 1087drawPoint(x: number, y: number): void 1088 1089绘制一个点。 1090 1091**系统能力：** SystemCapability.Graphics.Drawing 1092 1093**参数：** 1094 1095| 参数名 | 类型 | 必填 | 说明 | 1096| ------ | ------ | ---- | ------------------- | 1097| x | number | 是 | 点的x轴坐标，该参数为浮点数。 | 1098| y | number | 是 | 点的y轴坐标，该参数为浮点数。 | 1099 1100**错误码：** 1101 1102以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1103 1104| 错误码ID | 错误信息 | 1105| ------- | --------------------------------------------| 1106| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1107 1108**示例：** 1109 1110```ts 1111import { RenderNode } from '@kit.ArkUI'; 1112import { drawing } from '@kit.ArkGraphics2D'; 1113 1114class DrawingRenderNode extends RenderNode { 1115 draw(context : DrawContext) { 1116 const canvas = context.canvas; 1117 const pen = new drawing.Pen(); 1118 pen.setStrokeWidth(5); 1119 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1120 canvas.attachPen(pen); 1121 canvas.drawPoint(10, 10); 1122 canvas.detachPen(); 1123 } 1124} 1125``` 1126 1127## drawPoints<sup>12+</sup> 1128 1129drawPoints(points: Array\<common2D.Point>, mode?: PointMode): void 1130 1131在画布上绘制一组点、线段或多边形。通过指定点的数组和绘制模式来决定绘制方式。 1132 1133**系统能力：** SystemCapability.Graphics.Drawing 1134 1135**参数：** 1136 1137| 参数名 | 类型 | 必填 | 说明 | 1138| ---- | ---------------------------------------- | ---- | --------- | 1139| points | Array\<[common2D.Point](js-apis-graphics-common2D.md#point12)> | 是 | 要绘制的点的数组。长度不能为0。 | 1140| mode | [PointMode](arkts-apis-graphics-drawing-e.md#pointmode12) | 否 | 绘制数组中的点的方式，默认为drawing.PointMode.POINTS。 | 1141 1142**错误码：** 1143 1144以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1145 1146| 错误码ID | 错误信息 | 1147| ------- | --------------------------------------------| 1148| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.| 1149 1150**示例：** 1151 1152```ts 1153import { RenderNode } from '@kit.ArkUI'; 1154import { common2D, drawing } from '@kit.ArkGraphics2D'; 1155 1156class DrawingRenderNode extends RenderNode { 1157 draw(context : DrawContext) { 1158 const canvas = context.canvas; 1159 const pen = new drawing.Pen(); 1160 pen.setStrokeWidth(30); 1161 const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 1162 pen.setColor(color); 1163 canvas.attachPen(pen); 1164 canvas.drawPoints([{x: 100, y: 200}, {x: 150, y: 230}, {x: 200, y: 300}], drawing.PointMode.POINTS); 1165 canvas.detachPen(); 1166 } 1167} 1168``` 1169 1170## drawPath 1171 1172drawPath(path: Path): void 1173 1174绘制一个自定义路径，该路径包含了一组路径轮廓，每个路径轮廓可以是开放的或封闭的。 1175 1176**系统能力：** SystemCapability.Graphics.Drawing 1177 1178**参数：** 1179 1180| 参数名 | 类型 | 必填 | 说明 | 1181| ------ | ------------- | ---- | ------------------ | 1182| path | [Path](arkts-apis-graphics-drawing-Path.md) | 是 | 要绘制的路径对象。 | 1183 1184**错误码：** 1185 1186以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1187 1188| 错误码ID | 错误信息 | 1189| ------- | --------------------------------------------| 1190| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1191 1192**示例：** 1193 1194```ts 1195import { RenderNode } from '@kit.ArkUI'; 1196import { drawing } from '@kit.ArkGraphics2D'; 1197 1198class DrawingRenderNode extends RenderNode { 1199 draw(context : DrawContext) { 1200 const canvas = context.canvas; 1201 const pen = new drawing.Pen(); 1202 pen.setStrokeWidth(5); 1203 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1204 let path = new drawing.Path(); 1205 path.moveTo(10,10); 1206 path.cubicTo(10, 10, 10, 10, 15, 15); 1207 path.close(); 1208 canvas.attachPen(pen); 1209 canvas.drawPath(path); 1210 canvas.detachPen(); 1211 } 1212} 1213``` 1214 1215## drawLine 1216 1217drawLine(x0: number, y0: number, x1: number, y1: number): void 1218 1219画一条直线段，从指定的起点到终点。如果直线段的起点和终点是同一个点，无法绘制。 1220 1221**系统能力：** SystemCapability.Graphics.Drawing 1222 1223**参数：** 1224 1225| 参数名 | 类型 | 必填 | 说明 | 1226| ------ | ------ | ---- | ----------------------- | 1227| x0 | number | 是 | 线段起点的X坐标，该参数为浮点数。 | 1228| y0 | number | 是 | 线段起点的Y坐标，该参数为浮点数。 | 1229| x1 | number | 是 | 线段终点的X坐标，该参数为浮点数。 | 1230| y1 | number | 是 | 线段终点的Y坐标，该参数为浮点数。 | 1231 1232**错误码：** 1233 1234以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1235 1236| 错误码ID | 错误信息 | 1237| ------- | --------------------------------------------| 1238| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1239 1240**示例：** 1241 1242```ts 1243import { RenderNode } from '@kit.ArkUI'; 1244import { drawing } from '@kit.ArkGraphics2D'; 1245 1246class DrawingRenderNode extends RenderNode { 1247 draw(context : DrawContext) { 1248 const canvas = context.canvas; 1249 const pen = new drawing.Pen(); 1250 pen.setStrokeWidth(5); 1251 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1252 canvas.attachPen(pen); 1253 canvas.drawLine(0, 0, 20, 20); 1254 canvas.detachPen(); 1255 } 1256} 1257``` 1258 1259## drawTextBlob 1260 1261drawTextBlob(blob: TextBlob, x: number, y: number): void 1262 1263绘制一段文字。若构造blob的字体不支持待绘制字符，则该部分字符无法绘制。 1264 1265**系统能力：** SystemCapability.Graphics.Drawing 1266 1267**参数：** 1268 1269| 参数名 | 类型 | 必填 | 说明 | 1270| ------ | --------------------- | ---- | ------------------------------------------ | 1271| blob | [TextBlob](arkts-apis-graphics-drawing-TextBlob.md) | 是 | TextBlob对象。 | 1272| x | number | 是 | 所绘制出的文字基线（下图蓝线）的左端点（下图红点）的横坐标，该参数为浮点数。 | 1273| y | number | 是 | 所绘制出的文字基线（下图蓝线）的左端点（下图红点）的纵坐标，该参数为浮点数。 | 1274 1275 1276 1277**错误码：** 1278 1279以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1280 1281| 错误码ID | 错误信息 | 1282| ------- | --------------------------------------------| 1283| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1284 1285**示例：** 1286 1287```ts 1288import { RenderNode } from '@kit.ArkUI'; 1289import { drawing } from '@kit.ArkGraphics2D'; 1290 1291class DrawingRenderNode extends RenderNode { 1292 draw(context : DrawContext) { 1293 const canvas = context.canvas; 1294 const brush = new drawing.Brush(); 1295 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1296 const font = new drawing.Font(); 1297 font.setSize(20); 1298 const textBlob = drawing.TextBlob.makeFromString("Hello, drawing", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 1299 canvas.attachBrush(brush); 1300 canvas.drawTextBlob(textBlob, 20, 20); 1301 canvas.detachBrush(); 1302 } 1303} 1304``` 1305 1306## drawSingleCharacter<sup>12+</sup> 1307 1308drawSingleCharacter(text: string, font: Font, x: number, y: number): void 1309 1310绘制单个字符。当前字型中的字体不支持待绘制字符时，退化到使用系统字体绘制字符。 1311 1312**系统能力：** SystemCapability.Graphics.Drawing 1313 1314**参数** 1315 1316| 参数名 | 类型 | 必填 | 说明 | 1317| ------ | ------------------- | ---- | ----------- | 1318| text | string | 是 | 待绘制的单个字符，字符串的长度必须为1。 | 1319| font | [Font](arkts-apis-graphics-drawing-Font.md) | 是 | 字型对象。 | 1320| x | number | 是 | 所绘制出的字符基线（下图蓝线）的左端点（下图红点）的横坐标，该参数为浮点数。 | 1321| y | number | 是 | 所绘制出的字符基线（下图蓝线）的左端点（下图红点）的纵坐标，该参数为浮点数。 | 1322 1323 1324 1325**错误码：** 1326 1327以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1328 1329| 错误码ID | 错误信息 | 1330| ------- | --------------------------------------------| 1331| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 1332 1333**示例：** 1334 1335```ts 1336import { RenderNode } from '@kit.ArkUI'; 1337import { drawing } from '@kit.ArkGraphics2D'; 1338 1339class DrawingRenderNode extends RenderNode { 1340 draw(context : DrawContext) { 1341 const canvas = context.canvas; 1342 const brush = new drawing.Brush(); 1343 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1344 const font = new drawing.Font(); 1345 font.setSize(20); 1346 canvas.attachBrush(brush); 1347 canvas.drawSingleCharacter("你", font, 100, 100); 1348 canvas.drawSingleCharacter("好", font, 120, 100); 1349 canvas.detachBrush(); 1350 } 1351} 1352``` 1353 1354## drawSingleCharacterWithFeatures<sup>20+</sup> 1355 1356drawSingleCharacterWithFeatures(text: string, font: Font, x: number, y: number, features: Array\<FontFeature\>): void 1357 1358绘制单个字符，字符带有字体特征。当前字型中的字体不支持待绘制字符时，退化到使用系统字体绘制字符。 1359 1360**系统能力：** SystemCapability.Graphics.Drawing 1361 1362**参数** 1363 1364| 参数名 | 类型 | 必填 | 说明 | 1365| ------ | ------------------- | ---- | ----------- | 1366| text | string | 是 | 待绘制的单个字符，字符串长度必须为1。 | 1367| font | [Font](arkts-apis-graphics-drawing-Font.md) | 是 | 字型对象。 | 1368| x | number | 是 | 所绘制字符基线左端点的横坐标，该参数为浮点数。 | 1369| y | number | 是 | 所绘制字符基线左端点的纵坐标，该参数为浮点数。 | 1370| features | Array\<[FontFeature](arkts-apis-graphics-drawing-i.md#fontfeature20)\> | 是 | 字体特征对象数组。参数为空数组时使用TTF(TrueType Font)文件中预设的字体特征。| 1371 1372**错误码：** 1373 1374以下错误码的详细介绍请参见[图形绘制与显示错误码](../apis-arkgraphics2d/errorcode-drawing.md)。 1375 1376| 错误码ID | 错误信息 | 1377| ------- | --------------------------------------------| 1378| 25900001 | Parameter error. Possible causes: Incorrect parameter range. | 1379 1380**示例：** 1381 1382```ts 1383import { RenderNode } from '@kit.ArkUI'; 1384import { drawing } from '@kit.ArkGraphics2D'; 1385 1386class DrawingRenderNode extends RenderNode { 1387 draw(context : DrawContext) { 1388 const canvas = context.canvas; 1389 const brush = new drawing.Brush(); 1390 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1391 const font = new drawing.Font(); 1392 font.setSize(20); 1393 let fontFeatures : Array<drawing.FontFeature> = []; 1394 fontFeatures.push({name: 'calt', value: 0}); 1395 canvas.attachBrush(brush); 1396 canvas.drawSingleCharacterWithFeatures("你", font, 100, 100, fontFeatures); 1397 canvas.drawSingleCharacterWithFeatures("好", font, 180, 100, fontFeatures); 1398 canvas.detachBrush(); 1399 } 1400} 1401``` 1402 1403## drawRegion<sup>12+</sup> 1404 1405drawRegion(region: Region): void 1406 1407绘制一个区域。 1408 1409**系统能力：** SystemCapability.Graphics.Drawing 1410 1411**参数** 1412 1413| 参数名 | 类型 | 必填 | 说明 | 1414| ------ | ------------------- | ---- | ----------- | 1415| region | [Region](arkts-apis-graphics-drawing-Region.md) | 是 | 绘制的区域。 | 1416 1417**错误码：** 1418 1419以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1420 1421| 错误码ID | 错误信息 | 1422| ------- | --------------------------------------------| 1423| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1424 1425**示例：** 1426 1427```ts 1428import { RenderNode } from '@kit.ArkUI'; 1429import { drawing } from '@kit.ArkGraphics2D'; 1430 1431class DrawingRenderNode extends RenderNode { 1432 draw(context : DrawContext) { 1433 const canvas = context.canvas; 1434 const pen = new drawing.Pen(); 1435 let region = new drawing.Region(); 1436 pen.setStrokeWidth(10); 1437 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 1438 canvas.attachPen(pen); 1439 region.setRect(100, 100, 400, 400); 1440 canvas.drawRegion(region); 1441 canvas.detachPen(); 1442 } 1443} 1444``` 1445 1446## attachPen 1447 1448attachPen(pen: Pen): void 1449 1450绑定画笔到画布上，在画布上进行绘制时，将使用画笔的样式去绘制图形形状的轮廓。 1451 1452> **说明：** 1453> 1454> 执行该方法后，若pen的效果发生改变并且开发者希望该变化生效于接下来的绘制动作，需要再次执行该方法以确保变化生效。 1455 1456**系统能力：** SystemCapability.Graphics.Drawing 1457 1458**参数：** 1459 1460| 参数名 | 类型 | 必填 | 说明 | 1461| ------ | ----------- | ---- | ---------- | 1462| pen | [Pen](arkts-apis-graphics-drawing-Pen.md) | 是 | 画笔对象。 | 1463 1464**错误码：** 1465 1466以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1467 1468| 错误码ID | 错误信息 | 1469| ------- | --------------------------------------------| 1470| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1471 1472**示例：** 1473 1474```ts 1475import { RenderNode } from '@kit.ArkUI'; 1476import { drawing } from '@kit.ArkGraphics2D'; 1477 1478class DrawingRenderNode extends RenderNode { 1479 draw(context : DrawContext) { 1480 const canvas = context.canvas; 1481 const pen = new drawing.Pen(); 1482 pen.setStrokeWidth(5); 1483 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1484 canvas.attachPen(pen); 1485 canvas.drawRect({ left : 0, right : 10, top : 0, bottom : 10 }); 1486 canvas.detachPen(); 1487 } 1488} 1489``` 1490 1491## attachBrush 1492 1493attachBrush(brush: Brush): void 1494 1495绑定画刷到画布上，在画布上进行绘制时，将使用画刷的样式对绘制图形形状的内部进行填充。 1496 1497> **说明：** 1498> 1499> 执行该方法后，若brush的效果发生改变并且开发者希望该变化生效于接下来的绘制动作，需要再次执行该方法以确保变化生效。 1500 1501**系统能力：** SystemCapability.Graphics.Drawing 1502 1503**参数：** 1504 1505| 参数名 | 类型 | 必填 | 说明 | 1506| ------ | --------------- | ---- | ---------- | 1507| brush | [Brush](arkts-apis-graphics-drawing-Brush.md) | 是 | 画刷对象。 | 1508 1509**错误码：** 1510 1511以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1512 1513| 错误码ID | 错误信息 | 1514| ------- | --------------------------------------------| 1515| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1516 1517**示例：** 1518 1519```ts 1520import { RenderNode } from '@kit.ArkUI'; 1521import { drawing } from '@kit.ArkGraphics2D'; 1522 1523class DrawingRenderNode extends RenderNode { 1524 draw(context : DrawContext) { 1525 const canvas = context.canvas; 1526 const brush = new drawing.Brush(); 1527 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1528 canvas.attachBrush(brush); 1529 canvas.drawRect({ left : 0, right : 10, top : 0, bottom : 10 }); 1530 canvas.detachBrush(); 1531 } 1532} 1533``` 1534 1535## detachPen 1536 1537detachPen(): void 1538 1539将画笔与画布解绑，在画布上进行绘制时，不会再使用画笔去绘制图形形状的轮廓。 1540 1541**系统能力：** SystemCapability.Graphics.Drawing 1542 1543**示例：** 1544 1545```ts 1546import { RenderNode } from '@kit.ArkUI'; 1547import { drawing } from '@kit.ArkGraphics2D'; 1548 1549class DrawingRenderNode extends RenderNode { 1550 draw(context : DrawContext) { 1551 const canvas = context.canvas; 1552 const pen = new drawing.Pen(); 1553 pen.setStrokeWidth(5); 1554 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1555 canvas.attachPen(pen); 1556 canvas.drawRect({ left : 0, right : 10, top : 0, bottom : 10 }); 1557 canvas.detachPen(); 1558 } 1559} 1560``` 1561 1562## detachBrush 1563 1564detachBrush(): void 1565 1566将画刷与画布解绑，在画布上进行绘制时，不会再使用画刷对绘制图形形状的内部进行填充。 1567 1568**系统能力：** SystemCapability.Graphics.Drawing 1569 1570**示例：** 1571 1572```ts 1573import { RenderNode } from '@kit.ArkUI'; 1574import { drawing } from '@kit.ArkGraphics2D'; 1575 1576class DrawingRenderNode extends RenderNode { 1577 draw(context : DrawContext) { 1578 const canvas = context.canvas; 1579 const brush = new drawing.Brush(); 1580 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1581 canvas.attachBrush(brush); 1582 canvas.drawRect({ left : 0, right : 10, top : 0, bottom : 10 }); 1583 canvas.detachBrush(); 1584 } 1585} 1586``` 1587 1588## clipPath<sup>12+</sup> 1589 1590clipPath(path: Path, clipOp?: ClipOp, doAntiAlias?: boolean): void 1591 1592使用自定义路径对画布的可绘制区域进行裁剪。 1593 1594**系统能力：** SystemCapability.Graphics.Drawing 1595 1596**参数：** 1597 1598| 参数名 | 类型 | 必填 | 说明 | 1599| ------------ | ----------------- | ---- | ------------------------------------| 1600| path | [Path](arkts-apis-graphics-drawing-Path.md) | 是 | 路径对象。 | 1601| clipOp | [ClipOp](arkts-apis-graphics-drawing-e.md#clipop12) | 否 | 裁剪方式。默认为INTERSECT。 | 1602| doAntiAlias | boolean | 否 | 表示是否使能抗锯齿绘制。true表示使能，false表示不使能。默认为false。 | 1603 1604**错误码：** 1605 1606以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1607 1608| 错误码ID | 错误信息 | 1609| ------- | --------------------------------------------| 1610| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1611 1612**示例：** 1613 1614```ts 1615import { RenderNode } from '@kit.ArkUI'; 1616import { common2D, drawing } from '@kit.ArkGraphics2D'; 1617 1618class DrawingRenderNode extends RenderNode { 1619 draw(context : DrawContext) { 1620 const canvas = context.canvas; 1621 let path = new drawing.Path(); 1622 path.moveTo(10, 10); 1623 path.cubicTo(100, 100, 80, 150, 300, 150); 1624 path.close(); 1625 canvas.clipPath(path, drawing.ClipOp.INTERSECT, true); 1626 canvas.clear({alpha: 255, red: 255, green: 0, blue: 0}); 1627 } 1628} 1629``` 1630 1631## clipRect<sup>12+</sup> 1632 1633clipRect(rect: common2D.Rect, clipOp?: ClipOp, doAntiAlias?: boolean): void 1634 1635使用矩形对画布的可绘制区域进行裁剪。 1636 1637**系统能力：** SystemCapability.Graphics.Drawing 1638 1639**参数：** 1640 1641| 参数名 | 类型 | 必填 | 说明 | 1642| ----------- | ---------------------------------------- | ---- | ------------------- | 1643| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 需要裁剪的矩形区域。 | 1644| clipOp | [ClipOp](arkts-apis-graphics-drawing-e.md#clipop12) | 否 | 裁剪方式。默认为INTERSECT。 | 1645| doAntiAlias | boolean | 否 | 表示是否使能抗锯齿绘制。true表示使能，false表示不使能。默认为false。 | 1646 1647**错误码：** 1648 1649以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1650 1651| 错误码ID | 错误信息 | 1652| ------- | --------------------------------------------| 1653| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1654 1655**示例：** 1656 1657```ts 1658import { RenderNode } from '@kit.ArkUI'; 1659import { common2D, drawing } from '@kit.ArkGraphics2D'; 1660 1661class DrawingRenderNode extends RenderNode { 1662 draw(context : DrawContext) { 1663 const canvas = context.canvas; 1664 canvas.clipRect({left : 10, right : 500, top : 300, bottom : 900}, drawing.ClipOp.DIFFERENCE, true); 1665 canvas.clear({alpha: 255, red: 255, green: 0, blue: 0}); 1666 } 1667} 1668``` 1669 1670## save<sup>12+</sup> 1671 1672save(): number 1673 1674保存当前画布状态（画布矩阵和可绘制区域）到栈顶。需要与恢复接口[restore](#restore12)配合使用。 1675 1676**系统能力：** SystemCapability.Graphics.Drawing 1677 1678**返回值：** 1679 1680| 类型 | 说明 | 1681| ------ | ------------------ | 1682| number | 画布状态个数，该参数为正整数。 | 1683 1684**示例：** 1685 1686```ts 1687import { RenderNode } from '@kit.ArkUI'; 1688import { common2D, drawing } from '@kit.ArkGraphics2D'; 1689 1690class DrawingRenderNode extends RenderNode { 1691 draw(context : DrawContext) { 1692 const canvas = context.canvas; 1693 let rect: common2D.Rect = {left: 10, right: 200, top: 100, bottom: 300}; 1694 canvas.drawRect(rect); 1695 canvas.save(); 1696 } 1697} 1698``` 1699 1700## saveLayer<sup>12+</sup> 1701 1702saveLayer(rect?: common2D.Rect | null, brush?: Brush | null): number 1703 1704保存当前画布的矩阵和裁剪区域，并为后续绘制分配位图。调用恢复接口[restore](#restore12)将会舍弃对矩阵和裁剪区域做的更改，并绘制位图。 1705 1706**系统能力：** SystemCapability.Graphics.Drawing 1707 1708**参数：** 1709 1710| 参数名 | 类型 | 必填 | 说明 | 1711| ---- | ------ | ---- | ----------------- | 1712| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) \| null | 否 | 矩形对象，用于限制图层大小，默认为当前画布大小。 | 1713| brush | [Brush](arkts-apis-graphics-drawing-Brush.md) \| null | 否 | 画刷对象，绘制位图时会应用画刷对象的透明度，颜色滤波器效果和混合模式，默认不设置额外效果。 | 1714 1715**返回值：** 1716 1717| 类型 | 说明 | 1718| ------ | ------------------ | 1719| number | 返回调用前保存的画布状态数，该参数为正整数。 | 1720 1721**错误码：** 1722 1723以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1724 1725| 错误码ID | 错误信息 | 1726| ------- | --------------------------------------------| 1727| 401 | Parameter error. Possible causes: Mandatory parameters are left unspecified. | 1728 1729**示例：** 1730 1731```ts 1732import { RenderNode } from '@kit.ArkUI'; 1733import { common2D, drawing } from '@kit.ArkGraphics2D'; 1734 1735class DrawingRenderNode extends RenderNode { 1736 draw(context : DrawContext) { 1737 const canvas = context.canvas; 1738 canvas.saveLayer(null, null); 1739 const brushRect = new drawing.Brush(); 1740 const colorRect: common2D.Color = {alpha: 255, red: 255, green: 255, blue: 0}; 1741 brushRect.setColor(colorRect); 1742 canvas.attachBrush(brushRect); 1743 const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 1744 canvas.drawRect(rect); 1745 1746 const brush = new drawing.Brush(); 1747 brush.setBlendMode(drawing.BlendMode.DST_OUT); 1748 canvas.saveLayer(rect, brush); 1749 1750 const brushCircle = new drawing.Brush(); 1751 const colorCircle: common2D.Color = {alpha: 255, red: 0, green: 0, blue: 255}; 1752 brushCircle.setColor(colorCircle); 1753 canvas.attachBrush(brushCircle); 1754 canvas.drawCircle(500, 500, 200); 1755 canvas.restore(); 1756 canvas.restore(); 1757 canvas.detachBrush(); 1758 } 1759} 1760``` 1761 1762## scale<sup>12+</sup> 1763 1764scale(sx: number, sy: number): void 1765 1766在当前画布矩阵（默认是单位矩阵）的基础上再叠加一个缩放矩阵，后续绘制操作和裁剪操作的形状和位置都会自动叠加一个缩放效果。 1767 1768**系统能力：** SystemCapability.Graphics.Drawing 1769 1770**参数：** 1771 1772| 参数名 | 类型 | 必填 | 说明 | 1773| ---- | ------ | ---- | ----------------- | 1774| sx | number | 是 | x轴方向的缩放比例，该参数为浮点数。 | 1775| sy | number | 是 | y轴方向的缩放比例，该参数为浮点数。 | 1776 1777**错误码：** 1778 1779以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1780 1781| 错误码ID | 错误信息 | 1782| ------- | --------------------------------------------| 1783| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1784 1785**示例：** 1786 1787```ts 1788import { RenderNode } from '@kit.ArkUI'; 1789import { common2D, drawing } from '@kit.ArkGraphics2D'; 1790 1791class DrawingRenderNode extends RenderNode { 1792 draw(context : DrawContext) { 1793 const canvas = context.canvas; 1794 const pen = new drawing.Pen(); 1795 pen.setStrokeWidth(5); 1796 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1797 canvas.attachPen(pen); 1798 canvas.scale(2, 0.5); 1799 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 1800 canvas.detachPen(); 1801 } 1802} 1803``` 1804 1805## skew<sup>12+</sup> 1806 1807skew(sx: number, sy: number) : void 1808 1809在当前画布矩阵（默认是单位矩阵）的基础上再叠加一个倾斜矩阵，后续绘制操作和裁剪操作的形状和位置都会自动叠加一个倾斜效果。 1810 1811**系统能力：** SystemCapability.Graphics.Drawing 1812 1813**参数：** 1814 1815| 参数名 | 类型 | 必填 | 说明 | 1816| ---- | ------ | ---- | ----------------- | 1817| sx | number | 是 | x轴上的倾斜量，该参数为浮点数。正值会使绘制沿y轴增量方向向右倾斜；负值会使绘制沿y轴增量方向向左倾斜。 | 1818| sy | number | 是 | y轴上的倾斜量，该参数为浮点数。正值会使绘制沿x轴增量方向向下倾斜；负值会使绘制沿x轴增量方向向上倾斜。 | 1819 1820**错误码：** 1821 1822以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1823 1824| 错误码ID | 错误信息 | 1825| ------- | --------------------------------------------| 1826| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1827 1828**示例：** 1829 1830```ts 1831import { RenderNode } from '@kit.ArkUI'; 1832import { common2D, drawing } from '@kit.ArkGraphics2D'; 1833 1834class DrawingRenderNode extends RenderNode { 1835 draw(context : DrawContext) { 1836 const canvas = context.canvas; 1837 const pen = new drawing.Pen(); 1838 pen.setStrokeWidth(5); 1839 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1840 canvas.attachPen(pen); 1841 canvas.skew(0.1, 0.1); 1842 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 1843 canvas.detachPen(); 1844 } 1845} 1846``` 1847 1848## rotate<sup>12+</sup> 1849 1850rotate(degrees: number, sx: number, sy: number) : void 1851 1852在当前画布矩阵（默认是单位矩阵）的基础上再叠加一个旋转矩阵，后续绘制操作和裁剪操作的形状和位置都会自动叠加一个旋转效果。 1853 1854**系统能力：** SystemCapability.Graphics.Drawing 1855 1856**参数：** 1857 1858| 参数名 | 类型 | 必填 | 说明 | 1859| ---- | ------ | ------ | ------------------------ | 1860| degrees | number | 是 | 旋转角度，单位为度，该参数为浮点数，正数为顺时针旋转，负数为逆时针旋转。 | 1861| sx | number | 是 | 旋转中心的横坐标，该参数为浮点数。 | 1862| sy | number | 是 | 旋转中心的纵坐标，该参数为浮点数。 | 1863 1864**错误码：** 1865 1866以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1867 1868| 错误码ID | 错误信息 | 1869| ------- | --------------------------------------------| 1870| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1871 1872**示例：** 1873 1874```ts 1875import { RenderNode } from '@kit.ArkUI'; 1876import { common2D, drawing } from '@kit.ArkGraphics2D'; 1877 1878class DrawingRenderNode extends RenderNode { 1879 draw(context : DrawContext) { 1880 const canvas = context.canvas; 1881 const pen = new drawing.Pen(); 1882 pen.setStrokeWidth(5); 1883 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1884 canvas.attachPen(pen); 1885 canvas.rotate(30, 100, 100); 1886 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 1887 canvas.detachPen(); 1888 } 1889} 1890``` 1891 1892## translate<sup>12+</sup> 1893 1894translate(dx: number, dy: number): void 1895 1896在当前画布矩阵（默认是单位矩阵）的基础上再叠加一个平移矩阵，后续绘制操作和裁剪操作的形状和位置都会自动叠加一个平移效果。 1897 1898**系统能力：** SystemCapability.Graphics.Drawing 1899 1900**参数：** 1901 1902| 参数名 | 类型 | 必填 | 说明 | 1903| ----- | ------ | ---- | ------------------- | 1904| dx | number | 是 | x轴方向的移动距离，该参数为浮点数。 | 1905| dy | number | 是 | y轴方向的移动距离，该参数为浮点数。 | 1906 1907**错误码：** 1908 1909以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1910 1911| 错误码ID | 错误信息 | 1912| ------- | --------------------------------------------| 1913| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1914 1915**示例：** 1916 1917```ts 1918import { RenderNode } from '@kit.ArkUI'; 1919import { common2D, drawing } from '@kit.ArkGraphics2D'; 1920 1921class DrawingRenderNode extends RenderNode { 1922 draw(context : DrawContext) { 1923 const canvas = context.canvas; 1924 const pen = new drawing.Pen(); 1925 pen.setStrokeWidth(5); 1926 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1927 canvas.attachPen(pen); 1928 canvas.translate(10, 10); 1929 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 1930 canvas.detachPen(); 1931 } 1932} 1933``` 1934 1935## getSaveCount<sup>12+</sup> 1936 1937getSaveCount(): number 1938 1939获取栈中保存的画布状态（画布矩阵和裁剪区域）的数量。 1940 1941**系统能力：** SystemCapability.Graphics.Drawing 1942 1943**返回值：** 1944 1945| 类型 | 说明 | 1946| ------ | ------------------------------------ | 1947| number | 已保存的画布状态的数量，该参数为正整数。 | 1948 1949**示例：** 1950 1951```ts 1952import { RenderNode } from '@kit.ArkUI'; 1953import { common2D, drawing } from '@kit.ArkGraphics2D'; 1954 1955class DrawingRenderNode extends RenderNode { 1956 draw(context : DrawContext) { 1957 const canvas = context.canvas; 1958 const pen = new drawing.Pen(); 1959 pen.setStrokeWidth(5); 1960 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1961 canvas.attachPen(pen); 1962 canvas.drawRect({left: 10, right: 200, top: 100, bottom: 300}); 1963 canvas.save(); 1964 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 1965 canvas.getSaveCount(); 1966 canvas.detachPen(); 1967 } 1968} 1969``` 1970 1971## restoreToCount<sup>12+</sup> 1972 1973restoreToCount(count: number): void 1974 1975恢复到指定数量的画布状态（画布矩阵和裁剪区域）。 1976 1977**系统能力：** SystemCapability.Graphics.Drawing 1978 1979**参数：** 1980 1981| 参数名 | 类型 | 必填 | 说明 | 1982| ----- | ------ | ---- | ----------------------------- | 1983| count | number | 是 | 要恢复的画布状态深度，该参数为整数。小于等于1时，恢复为初始状态；大于已保存的画布状态数量时，不执行任何操作。 | 1984 1985**错误码：** 1986 1987以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1988 1989| 错误码ID | 错误信息 | 1990| ------- | --------------------------------------------| 1991| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1992 1993**示例：** 1994 1995```ts 1996import { RenderNode } from '@kit.ArkUI'; 1997import { common2D, drawing } from '@kit.ArkGraphics2D'; 1998 1999class DrawingRenderNode extends RenderNode { 2000 draw(context : DrawContext) { 2001 const canvas = context.canvas; 2002 const pen = new drawing.Pen(); 2003 pen.setStrokeWidth(5); 2004 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2005 canvas.attachPen(pen); 2006 canvas.drawRect({left: 10, right: 200, top: 100, bottom: 300}); 2007 canvas.save(); 2008 canvas.drawRect({left: 10, right: 200, top: 100, bottom: 500}); 2009 canvas.save(); 2010 canvas.drawRect({left: 100, right: 300, top: 100, bottom: 500}); 2011 canvas.save(); 2012 canvas.restoreToCount(2); 2013 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 2014 canvas.detachPen(); 2015 } 2016} 2017``` 2018 2019## restore<sup>12+</sup> 2020 2021restore(): void 2022 2023恢复保存在栈顶的画布状态（画布矩阵和裁剪区域）。 2024 2025**系统能力：** SystemCapability.Graphics.Drawing 2026 2027**示例：** 2028 2029```ts 2030import { RenderNode } from '@kit.ArkUI'; 2031import { common2D, drawing } from '@kit.ArkGraphics2D'; 2032 2033class DrawingRenderNode extends RenderNode { 2034 draw(context : DrawContext) { 2035 const canvas = context.canvas; 2036 const pen = new drawing.Pen(); 2037 pen.setStrokeWidth(5); 2038 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2039 canvas.attachPen(pen); 2040 canvas.restore(); 2041 canvas.detachPen(); 2042 } 2043} 2044``` 2045 2046## concatMatrix<sup>12+</sup> 2047 2048concatMatrix(matrix: Matrix): void 2049 2050画布现有矩阵左乘传入矩阵，不影响之前的绘制操作，后续绘制操作和裁剪操作的形状和位置都会受到该矩阵的影响。 2051 2052**系统能力：** SystemCapability.Graphics.Drawing 2053 2054**参数：** 2055 2056| 参数名 | 类型 | 必填 | 说明 | 2057| ------ | ----------------- | ---- | ----- | 2058| matrix | [Matrix](arkts-apis-graphics-drawing-Matrix.md) | 是 | 矩阵对象。 | 2059 2060**错误码：** 2061 2062以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 2063 2064| 错误码ID | 错误信息 | 2065| ------- | --------------------------------------------| 2066| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2067 2068**示例：** 2069 2070```ts 2071import { RenderNode } from '@kit.ArkUI'; 2072import { drawing } from '@kit.ArkGraphics2D'; 2073 2074class DrawingRenderNode extends RenderNode { 2075 draw(context : DrawContext) { 2076 const canvas = context.canvas; 2077 let matrix = new drawing.Matrix(); 2078 matrix.setMatrix([5, 0, 0, 0, 1, 2, 0, 0, 1]); 2079 canvas.concatMatrix(matrix); 2080 canvas.drawRect({left: 10, right: 200, top: 100, bottom: 500}); 2081 } 2082} 2083``` 2084 2085## setMatrix<sup>12+</sup> 2086 2087setMatrix(matrix: Matrix): void 2088 2089设置画布的矩阵，后续绘制操作和裁剪操作的形状和位置都会受到该矩阵的影响。 2090 2091**系统能力：** SystemCapability.Graphics.Drawing 2092 2093**参数：** 2094 2095| 参数名 | 类型 | 必填 | 说明 | 2096| ------ | ----------------- | ---- | ----- | 2097| matrix | [Matrix](arkts-apis-graphics-drawing-Matrix.md) | 是 | 矩阵对象。 | 2098 2099**错误码：** 2100 2101以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 2102 2103| 错误码ID | 错误信息 | 2104| ------- | --------------------------------------------| 2105| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2106 2107**示例：** 2108 2109```ts 2110import { RenderNode } from '@kit.ArkUI'; 2111import { drawing } from '@kit.ArkGraphics2D'; 2112 2113class DrawingRenderNode extends RenderNode { 2114 draw(context : DrawContext) { 2115 const canvas = context.canvas; 2116 let matrix = new drawing.Matrix() 2117 matrix.setMatrix([5, 0, 0, 0, 1, 1, 0, 0, 1]); 2118 canvas.setMatrix(matrix); 2119 canvas.drawRect({left: 10, right: 200, top: 100, bottom: 500}); 2120 } 2121} 2122``` 2123 2124## isClipEmpty<sup>12+</sup> 2125 2126isClipEmpty(): boolean 2127 2128判断裁剪后的可绘制区域是否为空。 2129 2130**系统能力：** SystemCapability.Graphics.Drawing 2131 2132**返回值：** 2133 2134| 类型 | 说明 | 2135| --------------------- | -------------- | 2136| boolean | 返回画布的可绘制区域是否为空的结果，true表示为空，false表示不为空。 | 2137 2138**示例：** 2139 2140```ts 2141import { RenderNode } from '@kit.ArkUI'; 2142import { drawing } from '@kit.ArkGraphics2D'; 2143 2144class DrawingRenderNode extends RenderNode { 2145 draw(context : DrawContext) { 2146 const canvas = context.canvas; 2147 if (canvas.isClipEmpty()) { 2148 console.info("canvas.isClipEmpty() returned true"); 2149 } else { 2150 console.info("canvas.isClipEmpty() returned false"); 2151 } 2152 } 2153} 2154``` 2155 2156## clipRegion<sup>12+</sup> 2157 2158clipRegion(region: Region, clipOp?: ClipOp): void 2159 2160在画布上裁剪一个区域。 2161 2162**系统能力：** SystemCapability.Graphics.Drawing 2163 2164**参数：** 2165 2166| 参数名 | 类型 | 必填 | 说明 | 2167| --------------- | ------- | ---- | ----------------------------------------------------------- | 2168| region | [Region](arkts-apis-graphics-drawing-Region.md) | 是 | 区域对象，表示裁剪范围。 | 2169| clipOp | [ClipOp](arkts-apis-graphics-drawing-e.md#clipop12) | 否 | 裁剪方式，默认为INTERSECT。 | 2170 2171**错误码：** 2172 2173以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 2174 2175| 错误码ID | 错误信息 | 2176| ------- | --------------------------------------------| 2177| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2178 2179**示例：** 2180 2181```ts 2182import { RenderNode } from '@kit.ArkUI'; 2183import { common2D, drawing } from '@kit.ArkGraphics2D'; 2184 2185class DrawingRenderNode extends RenderNode { 2186 draw(context : DrawContext) { 2187 const canvas = context.canvas; 2188 let region : drawing.Region = new drawing.Region(); 2189 region.setRect(0, 0, 500, 500); 2190 canvas.clipRegion(region); 2191 let color: common2D.Color = {alpha: 255, red: 255, green: 0, blue: 0}; 2192 canvas.clear(color); 2193 } 2194} 2195``` 2196 2197## clipRoundRect<sup>12+</sup> 2198 2199clipRoundRect(roundRect: RoundRect, clipOp?: ClipOp, doAntiAlias?: boolean): void 2200 2201在画布上裁剪一个圆角矩形。 2202 2203**系统能力：** SystemCapability.Graphics.Drawing 2204 2205**参数：** 2206 2207| 参数名 | 类型 | 必填 | 说明 | 2208| --------------- | ------- | ---- | ----------------------------------------------------------- | 2209| roundRect | [RoundRect](arkts-apis-graphics-drawing-RoundRect.md) | 是 | 圆角矩形对象，表示裁剪范围。 | 2210| clipOp | [ClipOp](arkts-apis-graphics-drawing-e.md#clipop12) | 否 | 裁剪方式，默认为INTERSECT。 | 2211| doAntiAlias | boolean | 否 | 表示是否使能抗锯齿。true表示使能，false表示不使能。默认为false。 | 2212 2213**错误码：** 2214 2215以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 2216 2217| 错误码ID | 错误信息 | 2218| ------- | --------------------------------------------| 2219| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2220 2221**示例：** 2222 2223```ts 2224import { RenderNode } from '@kit.ArkUI'; 2225import { common2D, drawing } from '@kit.ArkGraphics2D'; 2226 2227class DrawingRenderNode extends RenderNode { 2228 draw(context : DrawContext) { 2229 const canvas = context.canvas; 2230 let rect: common2D.Rect = { left: 10, top: 100, right: 200, bottom: 300 }; 2231 let roundRect = new drawing.RoundRect(rect, 10, 10); 2232 canvas.clipRoundRect(roundRect); 2233 let color: common2D.Color = {alpha: 255, red: 255, green: 0, blue: 0}; 2234 canvas.clear(color); 2235 } 2236} 2237``` 2238 2239## resetMatrix<sup>12+</sup> 2240 2241resetMatrix(): void 2242 2243将当前画布的矩阵重置为单位矩阵。 2244 2245**系统能力：** SystemCapability.Graphics.Drawing 2246 2247**示例：** 2248 2249```ts 2250import { RenderNode } from '@kit.ArkUI'; 2251import { drawing } from '@kit.ArkGraphics2D'; 2252 2253class DrawingRenderNode extends RenderNode { 2254 draw(context : DrawContext) { 2255 const canvas = context.canvas; 2256 canvas.scale(4, 6); 2257 canvas.resetMatrix(); 2258 } 2259} 2260``` 2261 2262## quickRejectPath<sup>18+</sup> 2263 2264quickRejectPath(path: Path): boolean 2265 2266判断路径与画布区域是否不相交。画布区域包含边界。 2267 2268**系统能力：** SystemCapability.Graphics.Drawing 2269 2270**参数：** 2271 2272| 参数名 | 类型 | 必填 | 说明 | 2273| ------ | ------------- | ---- | ------------------ | 2274| path | [Path](arkts-apis-graphics-drawing-Path.md) | 是 | 路径对象。 | 2275 2276**返回值：** 2277 2278| 类型 | 说明 | 2279| --------------------- | -------------- | 2280| boolean | 返回路径是否与画布区域不相交的结果。true表示路径与画布区域不相交，false表示路径与画布区域相交。 | 2281 2282**示例：** 2283 2284```ts 2285import { RenderNode } from '@kit.ArkUI'; 2286import { drawing } from '@kit.ArkGraphics2D'; 2287 2288class DrawingRenderNode extends RenderNode { 2289 draw(context : DrawContext) { 2290 const canvas = context.canvas; 2291 let path = new drawing.Path(); 2292 path.moveTo(10, 10); 2293 path.cubicTo(10, 10, 10, 10, 15, 15); 2294 path.close(); 2295 if (canvas.quickRejectPath(path)) { 2296 console.info("canvas and path do not intersect."); 2297 } else { 2298 console.info("canvas and path intersect."); 2299 } 2300 } 2301} 2302``` 2303 2304## quickRejectRect<sup>18+</sup> 2305 2306quickRejectRect(rect: common2D.Rect): boolean 2307 2308判断矩形和画布区域是否不相交。画布区域包含边界。 2309 2310**系统能力：** SystemCapability.Graphics.Drawing 2311 2312**参数：** 2313 2314| 参数名 | 类型 | 必填 | 说明 | 2315| ------ | -------------------------------------------------- | ---- | -------------- | 2316| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 矩形区域。 | 2317 2318**返回值：** 2319 2320| 类型 | 说明 | 2321| --------------------- | -------------- | 2322| boolean | 返回矩形是否与画布区域不相交的结果。true表示矩形与画布区域不相交，false表示矩形与画布区域相交。 | 2323 2324**示例：** 2325 2326```ts 2327import { RenderNode } from '@kit.ArkUI'; 2328import { common2D, drawing } from '@kit.ArkGraphics2D'; 2329 2330class DrawingRenderNode extends RenderNode { 2331 draw(context : DrawContext) { 2332 const canvas = context.canvas; 2333 let rect: common2D.Rect = { left : 10, top : 20, right : 50, bottom : 30 }; 2334 if (canvas.quickRejectRect(rect)) { 2335 console.info("canvas and rect do not intersect."); 2336 } else { 2337 console.info("canvas and rect intersect."); 2338 } 2339 } 2340} 2341``` 2342 2343## drawArcWithCenter<sup>18+</sup> 2344 2345drawArcWithCenter(arc: common2D.Rect, startAngle: number, sweepAngle: number, useCenter: boolean): void 2346 2347在画布上绘制圆弧。该方法允许指定圆弧的起始角度、扫描角度以及圆弧的起点和终点是否连接圆弧的中心点。 2348 2349**系统能力：** SystemCapability.Graphics.Drawing 2350 2351**参数** 2352 2353| 参数名 | 类型 | 必填 | 说明 | 2354| ------ | -------------------------------------------------- | ---- | -------------- | 2355| arc | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 包含要绘制的圆弧的椭圆的矩形边界。 | 2356| startAngle | number | 是 | 弧的起始角度，单位为度，该参数为浮点数。0度时起始点位于椭圆的右端点，为正数时以顺时针方向放置起始点，为负数时以逆时针方向放置起始点。 | 2357| sweepAngle | number | 是 | 弧的扫描角度，单位为度，该参数为浮点数。为正数时顺时针扫描，为负数时逆时针扫描。扫描角度可以超过360度，将绘制一个完整的椭圆。 | 2358| useCenter | boolean | 是 | 绘制时弧形的起点和终点是否连接弧形的中心点。true表示连接，false表示不连接。 | 2359 2360**示例：** 2361 2362```ts 2363import { RenderNode } from '@kit.ArkUI'; 2364import { common2D, drawing } from '@kit.ArkGraphics2D'; 2365 2366class DrawingRenderNode extends RenderNode { 2367 draw(context : DrawContext) { 2368 const canvas = context.canvas; 2369 const pen = new drawing.Pen(); 2370 pen.setStrokeWidth(5); 2371 const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 2372 pen.setColor(color); 2373 canvas.attachPen(pen); 2374 const rect: common2D.Rect = { left: 100, top: 50, right: 400, bottom: 200 }; 2375 canvas.drawArcWithCenter(rect, 90, 180, false); 2376 canvas.detachPen(); 2377 } 2378} 2379``` 2380 2381## drawImageNine<sup>18+</sup> 2382 2383drawImageNine(pixelmap: image.PixelMap, center: common2D.Rect, dstRect: common2D.Rect, filterMode: FilterMode): void 2384 2385通过绘制两条水平线和两条垂直线将图像分割成9个部分：四个边，四个角和中心。<br> 2386若角落的4个区域尺寸不超过目标矩形，则会在不缩放的情况下被绘制在目标矩形，反之则会按比例缩放绘制在目标矩形；如果还有剩余空间，剩下的5个区域会通过拉伸或压缩来绘制，以便能够完全覆盖目标矩形。 2387 2388**系统能力：** SystemCapability.Graphics.Drawing 2389 2390**参数：** 2391 2392| 参数名 | 类型 | 必填 | 说明 | 2393| ------ | ------ | ---- | -------------- | 2394| pixelmap | [image.PixelMap](../apis-image-kit/arkts-apis-image-PixelMap.md) | 是 | 用于绘制网格的像素图。 | 2395| center | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 分割图像的中心矩形。矩形四条边所在的直线将图像分成了9个部分。 | 2396| dstRect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 在画布上绘制的目标矩形区域。 | 2397| filterMode | [FilterMode](arkts-apis-graphics-drawing-e.md#filtermode12) | 是 | 过滤模式。 | 2398 2399**错误码：** 2400 2401以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 2402 2403| 错误码ID | 错误信息 | 2404| ------- | --------------------------------------------| 2405| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 2406 2407**示例：** 2408 2409```ts 2410import { RenderNode } from '@kit.ArkUI'; 2411import { common2D, drawing } from '@kit.ArkGraphics2D'; 2412import { image } from '@kit.ImageKit'; 2413 2414class DrawingRenderNode extends RenderNode { 2415 draw(context : DrawContext) { 2416 const canvas = context.canvas; 2417 const width = 1000; 2418 const height = 1000; 2419 const bufferSize = width * height * 4; 2420 const color: ArrayBuffer = new ArrayBuffer(bufferSize); 2421 2422 const colorData = new Uint8Array(color); 2423 const blockSize = 50; 2424 for (let y = 0; y < height; y++) { 2425 for (let x = 0; x < width; x++) { 2426 const index = (y * width + x) * 4; // 计算当前像素的索引 2427 const blockX = Math.floor(x / blockSize); 2428 const blockY = Math.floor(y / blockSize); 2429 2430 // 通过方块坐标的奇偶性决定颜色 2431 if ((blockX + blockY) % 2 === 0) { 2432 // 红色方块 (R, G, B, A) 2433 colorData[index] = 255; // R 2434 colorData[index + 1] = 0; // G 2435 colorData[index + 2] = 0; // B 2436 } else { 2437 // 蓝色方块 2438 colorData[index] = 0; // R 2439 colorData[index + 1] = 0; // G 2440 colorData[index + 2] = 255; // B 2441 } 2442 colorData[index + 3] = 255; // Alpha 始终为 255（不透明） 2443 } 2444 } 2445 2446 let opts : image.InitializationOptions = { 2447 editable: true, 2448 pixelFormat: 3, 2449 size: { height, width } 2450 } 2451 let pixelMap: image.PixelMap = image.createPixelMapSync(color, opts); 2452 canvas.drawImage(pixelMap, 0, 0); // 原图 2453 let center: common2D.Rect = { left: 20, top: 10, right: 50, bottom: 40 }; 2454 let dst: common2D.Rect = { left: 70, top: 0, right: 100, bottom: 30 }; 2455 let dst1: common2D.Rect = { left: 110, top: 0, right: 200, bottom: 90 }; 2456 canvas.drawImageNine(pixelMap, center, dst, drawing.FilterMode.FILTER_MODE_NEAREST); // 示例1 2457 canvas.drawImageNine(pixelMap, center, dst1, drawing.FilterMode.FILTER_MODE_NEAREST); // 示例2 2458 } 2459} 2460``` 2461 2462## drawImageLattice<sup>18+</sup> 2463 2464drawImageLattice(pixelmap: image.PixelMap, lattice: Lattice, dstRect: common2D.Rect, filterMode: FilterMode): void 2465 2466将图像按照矩形网格对象的设置划分为多个网格，并把图像的每个部分按照网格对象的设置绘制到画布上的目标矩形区域。<br> 2467偶数行和列（起始计数为0）的每个交叉点都是固定的，若固定网格区域的尺寸不超过目标矩形，则会在不缩放的情况下被绘制在目标矩形，反之则会按比例缩放绘制在目标矩形；如果还有剩余空间，剩下的区域会通过拉伸或压缩来绘制，以便能够完全覆盖目标矩形。 2468 2469**系统能力：** SystemCapability.Graphics.Drawing 2470 2471**参数：** 2472 2473| 参数名 | 类型 | 必填 | 说明 | 2474| ------ | ------ | ---- | -------------- | 2475| pixelmap | [image.PixelMap](../apis-image-kit/arkts-apis-image-PixelMap.md) | 是 | 用于绘制网格的像素图。 | 2476| lattice | [Lattice](arkts-apis-graphics-drawing-Lattice.md) | 是 | 矩形网格对象。 | 2477| dstRect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 目标矩形区域。 | 2478| filterMode | [FilterMode](arkts-apis-graphics-drawing-e.md#filtermode12) | 是 | 过滤模式。 | 2479 2480**错误码：** 2481 2482以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 2483 2484| 错误码ID | 错误信息 | 2485| ------- | --------------------------------------------| 2486| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 2487 2488**示例：** 2489 2490```ts 2491import { RenderNode } from '@kit.ArkUI'; 2492import { common2D, drawing } from '@kit.ArkGraphics2D'; 2493import { image } from '@kit.ImageKit'; 2494 2495class DrawingRenderNode extends RenderNode { 2496 draw(context : DrawContext) { 2497 const canvas = context.canvas; 2498 const width = 1000; 2499 const height = 1000; 2500 const bufferSize = width * height * 4; 2501 const color: ArrayBuffer = new ArrayBuffer(bufferSize); 2502 2503 const colorData = new Uint8Array(color); 2504 const blockSize = 50; 2505 for (let y = 0; y < height; y++) { 2506 for (let x = 0; x < width; x++) { 2507 const index = (y * width + x) * 4; // 计算当前像素的索引 2508 const blockX = Math.floor(x / blockSize); 2509 const blockY = Math.floor(y / blockSize); 2510 2511 // 通过方块坐标的奇偶性决定颜色 2512 if ((blockX + blockY) % 2 === 0) { 2513 // 红色方块 (R, G, B, A) 2514 colorData[index] = 255; // R 2515 colorData[index + 1] = 0; // G 2516 colorData[index + 2] = 0; // B 2517 } else { 2518 // 蓝色方块 2519 colorData[index] = 0; // R 2520 colorData[index + 1] = 0; // G 2521 colorData[index + 2] = 255; // B 2522 } 2523 colorData[index + 3] = 255; // Alpha 始终为 255（不透明） 2524 } 2525 } 2526 2527 let opts : image.InitializationOptions = { 2528 editable: true, 2529 pixelFormat: 3, 2530 size: { height, width } 2531 } 2532 let pixelMap: image.PixelMap = image.createPixelMapSync(color, opts); 2533 canvas.drawImage(pixelMap, 0, 0); // 原图 2534 let xDivs: Array<number> = [28, 36, 44, 52]; 2535 let yDivs: Array<number> = [28, 36, 44, 52]; 2536 let lattice = drawing.Lattice.createImageLattice(xDivs, yDivs, 4, 4); 2537 let dst: common2D.Rect = { left: 100, top: 0, right: 164, bottom: 64 }; 2538 let dst1: common2D.Rect = { left: 200, top: 0, right: 360, bottom: 160 }; 2539 canvas.drawImageLattice(pixelMap, lattice, dst, drawing.FilterMode.FILTER_MODE_NEAREST); // 示例1 2540 canvas.drawImageLattice(pixelMap, lattice, dst1, drawing.FilterMode.FILTER_MODE_NEAREST); // 示例2 2541 } 2542} 2543```
