1# @ohos.graphics.drawing (绘制模块) 2 3应用在开发中,经常需要针对不同的元素内容进行绘制,开发者通常可以选择直接使用ArkUI组件来绘制想要的元素或效果,但有些自定义图形或效果无法满足,此时可以选择使用Drawing来实现灵活的自定义绘制效果。Drawing模块提供基本的绘制能力,如绘制矩形、圆形、点、直线、自定义Path和字体等。 4 5> **说明:** 6> 7> - 本模块首批接口从API version 11开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。 8> 9> - 本模块使用屏幕物理像素单位px。 10> 11> - 本模块为单线程模型策略,需要调用方自行管理线程安全和上下文状态的切换。 12 13## 导入模块 14 15```ts 16import { drawing } from '@kit.ArkGraphics2D'; 17``` 18 19## BlendMode 20 21混合模式枚举。混合模式会将两种颜色(源色、目标色)以特定的方式混合生成一种新的颜色,通常用于叠加、滤镜和遮罩等图形操作场景。混合操作会分别作用于红、绿、蓝三个颜色通道,采用相同的混合逻辑,而透明度(Alpha通道)则根据各模式的定义另行处理。 22 23为简洁起见,我们使用以下缩写: 24 25s : source 源的缩写。 d : destination 目标的缩写。 sa : source alpha 源透明度的缩写。 da : destination alpha 目标透明度的缩写。 26 27计算结果用如下缩写表示: 28 29r : 如果4个通道(透明度、红、绿、蓝)的计算方式相同,用r表示。 ra : 如果只操作透明度通道,用ra表示。 rc : 如果操作3个颜色通道,用rc表示。 30 31以黄色矩形为源图像,蓝色圆形为目标图像,各混合模式枚举生成的效果示意图请参考下表。 32 33**系统能力:** SystemCapability.Graphics.Drawing 34 35| 名称 | 值 | 说明 | 示意图 | 36| ----------- | ---- | ------------------------------------------------------------ | -------- | 37| CLEAR | 0 | 清除模式,r = 0,设置为全透明。 |  | 38| SRC | 1 | r = s(result的4个通道,都等于source的4个通道,即结果等于源。),使用源像素替换目标像素。 |  | 39| DST | 2 | r = d(result的4个通道,都等于destination的4个通道,即结果等于目标。),保持目标像素不变。 |  | 40| SRC_OVER | 3 | r = s + (1 - sa) * d,在目标像素上方绘制源像素,考虑源像素的透明度。 |  | 41| DST_OVER | 4 | r = d + (1 - da) * s,在源像素上方绘制目标像素,考虑目标像素的透明度。 |  | 42| SRC_IN | 5 | r = s * da,仅保留源像素与目标不透明部分的交集。 |  | 43| DST_IN | 6 | r = d * sa,仅保留目标像素与源不透明部分的交集。 |  | 44| SRC_OUT | 7 | r = s * (1 - da),保留源像素中不与目标重叠的部分。 |  | 45| DST_OUT | 8 | r = d * (1 - sa),保留目标像素中不与源重叠的部分。 |  | 46| SRC_ATOP | 9 | r = s * da + d * (1 - sa),源像素覆盖在目标像素上,仅在目标不透明部分显示源像素。 |  | 47| DST_ATOP | 10 | r = d * sa + s * (1 - da),目标像素覆盖在源像素上,仅在源不透明部分显示目标像素。 |  | 48| XOR | 11 | r = s * (1 - da) + d * (1 - sa),仅显示源像素和目标像素中不重叠的部分。 |  | 49| PLUS | 12 | r = min(s + d, 1),源和目标像素的颜色值相加。 |  | 50| MODULATE | 13 | r = s * d,源和目标像素的颜色值相乘。 |  | 51| SCREEN | 14 | 滤色模式,r = s + d - s * d,反转源和目标像素的颜色值,相乘后再反转,结果通常更亮。 |  | 52| OVERLAY | 15 | 叠加模式,根据目标像素的亮度,选择性地应用MULTIPLY或SCREEN模式,增强对比度。 |  | 53| DARKEN | 16 | 变暗模式,rc = s + d - max(s * da, d * sa), ra = s + (1 - sa) * d,取源和目标像素中较暗的颜色值。 |  | 54| LIGHTEN | 17 | 变亮模式,rc = s + d - min(s * da, d * sa), ra = s + (1 - sa) * d,取源和目标像素中较亮的颜色值。 |  | 55| COLOR_DODGE | 18 | 颜色减淡模式,通过减小对比度使目标像素变亮以反映源像素。 |  | 56| COLOR_BURN | 19 | 颜色加深模式,通过增加对比度使目标像素变暗以反映源像素。 |  | 57| HARD_LIGHT | 20 | 强光模式,根据源像素的亮度,选择性地应用MULTIPLY或SCREEN模式。 |  | 58| SOFT_LIGHT | 21 | 柔光模式,根据源像素的亮度,柔和地变亮或变暗目标像素。 |  | 59| DIFFERENCE | 22 | 差值模式,rc = s + d - 2 * (min(s * da, d * sa)), ra = s + (1 - sa) * d,计算源和目标像素颜色值的差异。 |  | 60| EXCLUSION | 23 | 排除模式,rc = s + d - two(s * d), ra = s + (1 - sa) * d,类似于DIFFERENCE,但对比度较低。 |  | 61| MULTIPLY | 24 | 正片叠底,r = s * (1 - da) + d * (1 - sa) + s * d,源和目标像素的颜色值相乘,结果通常更暗。 |  | 62| HUE | 25 | 色相模式,使用源像素的色相,目标像素的饱和度和亮度。 |  | 63| SATURATION | 26 | 饱和度模式,使用源像素的饱和度,目标像素的色相和亮度。 |  | 64| COLOR | 27 | 颜色模式,使用源像素的色相和饱和度,目标像素的亮度。 |  | 65| LUMINOSITY | 28 | 亮度模式,使用源像素的亮度,目标像素的色相和饱和度。 |  | 66 67## PathMeasureMatrixFlags<sup>12+</sup> 68 69路径测量中的矩阵信息维度枚举,常用于控制物体沿路径移动的动画场景。 70 71**系统能力:** SystemCapability.Graphics.Drawing 72 73| 名称 | 值 | 说明 | 74| ----------- | ---- | ------------------------------------------------------------ | 75| GET_POSITION_MATRIX | 0 | 获取位置信息对应的矩阵。 | 76| GET_TANGENT_MATRIX | 1 | 获取切线信息对应的矩阵。 | 77| GET_POSITION_AND_TANGENT_MATRIX | 2 | 获取位置和切线信息对应的矩阵。 | 78 79## SrcRectConstraint<sup>12+</sup> 80 81源矩形区域约束类型枚举,用于在画布绘制图像时指定是否将采样范围限制在源矩形区域内。 82 83**系统能力:** SystemCapability.Graphics.Drawing 84 85| 名称 | 值 | 说明 | 86| ----------- | ---- | ------------------------------------------------------------ | 87| STRICT | 0 | 严格限制采样范围在源矩形区域内,速度较慢。 | 88| FAST | 1 | 允许采样范围超出源矩形范围,速度较快。 | 89 90## ShadowFlag<sup>12+</sup> 91 92控制阴影绘制行为的枚举。 93 94**系统能力:** SystemCapability.Graphics.Drawing 95 96| 名称 | 值 | 说明 | 97| -------------------------- | ---- | ------------------ | 98| NONE | 0 | 不使用任何阴影处理选项。 | 99| TRANSPARENT_OCCLUDER | 1 | 遮挡物是半透明的。 | 100| GEOMETRIC_ONLY | 2 | 仅使用几何阴影效果。 | 101| ALL | 3 | 使用所有可用的阴影处理选项,以生成组合阴影效果,包括半透明遮挡和几何阴影效果。 | 102 103## PathOp<sup>12+</sup> 104 105路径操作类型枚举,可用于合并或裁剪路径等功能。 106 107**系统能力:** SystemCapability.Graphics.Drawing 108 109| 名称 | 值 | 说明 | 110| ---------------------- | ---- | ------------------------------ | 111| DIFFERENCE | 0 | 差集操作。 | 112| INTERSECT | 1 | 交集操作。 | 113| UNION | 2 | 并集操作。 | 114| XOR | 3 | 异或操作。 | 115| REVERSE_DIFFERENCE | 4 | 反向差集操作。 | 116 117## PathIteratorVerb<sup>18+</sup> 118 119迭代器包含的路径操作类型枚举,可用于读取path的操作指令。 120 121**系统能力:** SystemCapability.Graphics.Drawing 122 123| 名称 | 值 | 说明 | 124| ----- | ---- | ------------------------------ | 125| MOVE | 0 | 设置起始点。 | 126| LINE | 1 | 添加线段。 | 127| QUAD | 2 | 添加二阶贝塞尔圆滑曲线。 | 128| CONIC | 3 | 添加圆锥曲线。 | 129| CUBIC | 4 | 添加三阶贝塞尔圆滑曲线。 | 130| CLOSE | 5 | 路径闭合。 | 131| DONE | CLOSE + 1 | 路径设置完成。 | 132 133## PathIterator<sup>18+</sup> 134 135表示路径操作迭代器,可通过遍历迭代器读取path的操作指令。 136 137### constructor<sup>18+</sup> 138 139constructor(path: Path) 140 141构造迭代器并绑定路径。 142 143**系统能力:** SystemCapability.Graphics.Drawing 144 145**参数:** 146 147| 参数名 | 类型 | 必填 | 说明 | 148| -------- | -------------------------------------------- | ---- | ------------------------------- | 149| path | [Path](#path) | 是 | 迭代器绑定的路径对象。 | 150 151**示例:** 152 153```ts 154import { drawing } from '@kit.ArkGraphics2D'; 155 156let path: drawing.Path = new drawing.Path(); 157let iter: drawing.PathIterator = new drawing.PathIterator(path); 158``` 159 160### next<sup>18+</sup> 161 162next(points: Array<common2D.Point>, offset?: number): PathIteratorVerb 163 164返回当前路径的下一个操作,并将迭代器置于该操作。 165 166**系统能力:** SystemCapability.Graphics.Drawing 167 168**参数:** 169 170| 参数名 | 类型 | 必填 | 说明 | 171| -------- | -------------------------------------------- | ---- | ------------------------------- | 172| points | Array\<[common2D.Point](js-apis-graphics-common2D.md#point12)> | 是 | 坐标点数组,长度必须至少为偏移量加4,以确保能容纳所有类型的路径数据。操作执行后,该数组会被覆盖。填入的坐标点数量取决于操作类型,其中,MOVE填入1个坐标点,LINE填入2个坐标点,QUAD填入3个坐标点,CONIC填入3个坐标点 + 1个权重值(共3.5组),CUBIC填入4个坐标点,CLOSE和DONE不填入任何点。 | 173| offset | number | 否 | 数组中写入位置相对起始点的偏移量,默认为0,取值范围为[0, size-4],size是指坐标点数组长度。 | 174 175**返回值:** 176 177| 类型 | 说明 | 178| --------------------- | -------------- | 179| [PathIteratorVerb](#pathiteratorverb18) | 迭代器包含的路径操作类型。 | 180 181**错误码:** 182 183以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 184 185| 错误码ID | 错误信息 | 186| ------- | --------------------------------------------| 187| 401 | Parameter error.Possible causes:1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed. | 188 189**示例:** 190 191```ts 192import { common2D, drawing } from '@kit.ArkGraphics2D'; 193 194let path: drawing.Path = new drawing.Path(); 195path.moveTo(10, 20); 196let iter: drawing.PathIterator = new drawing.PathIterator(path); 197let verbStr: Array<string> = ["MOVE", "LINE", "QUAD", "CONIC", "CUBIC", "CLOSE", "DONE"]; 198let pointCount: Array<number> = [1,2,3,4,4,0,0]; //1,2,3,3.5,4,0,0 199let points: Array<common2D.Point> = [{x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}]; 200let offset = 0; 201let verb = iter.next(points, offset); 202let outputMessage: string = "pathIteratorNext: "; 203outputMessage += "verb =" + verbStr[verb] + "; has " + pointCount[verb] + " pairs: "; 204for (let j = 0; j < pointCount[verb] + offset; j++) { 205 outputMessage += "[" + points[j].x + ", " + points[j].y + "]"; 206} 207console.info(outputMessage); 208``` 209 210### peek<sup>18+</sup> 211 212peek(): PathIteratorVerb 213 214返回当前路径的下一个操作,迭代器保持在原操作。 215 216**系统能力:** SystemCapability.Graphics.Drawing 217 218**返回值:** 219 220| 类型 | 说明 | 221| --------------------- | -------------- | 222| [PathIteratorVerb](#pathiteratorverb18) | 迭代器包含的路径操作类型。 | 223 224**示例:** 225 226```ts 227import { drawing } from '@kit.ArkGraphics2D'; 228 229let path: drawing.Path = new drawing.Path(); 230let iter: drawing.PathIterator = new drawing.PathIterator(path); 231let res = iter.peek(); 232``` 233 234### hasNext<sup>18+</sup> 235 236hasNext(): boolean 237 238判断路径操作迭代器中是否还有下一个操作。 239 240**系统能力:** SystemCapability.Graphics.Drawing 241 242**返回值:** 243 244| 类型 | 说明 | 245| ------- | -------------- | 246| boolean | 判断路径操作迭代器中是否还有下一个操作。true表示有,false表示没有。 | 247 248**示例:** 249 250```ts 251import { drawing } from '@kit.ArkGraphics2D'; 252 253let path: drawing.Path = new drawing.Path(); 254let iter: drawing.PathIterator = new drawing.PathIterator(path); 255let res = iter.hasNext(); 256``` 257 258## Path 259 260由直线、圆弧、二阶贝塞尔、三阶贝塞尔组成的复合几何路径。 261 262### constructor<sup>12+</sup> 263 264constructor() 265 266构造一个路径。 267 268**系统能力:** SystemCapability.Graphics.Drawing 269 270**示例:** 271 272```ts 273import { drawing } from '@kit.ArkGraphics2D'; 274 275let path: drawing.Path = new drawing.Path(); 276``` 277 278### constructor<sup>12+</sup> 279 280constructor(path: Path) 281 282构造一个已有路径的副本。 283 284**系统能力:** SystemCapability.Graphics.Drawing 285 286**参数:** 287 288| 参数名 | 类型 | 必填 | 说明 | 289| -------- | -------------------------------------------- | ---- | ------------------------------- | 290| path | [Path](#path) | 是 | 待复制的路径对象。 | 291 292**示例:** 293 294```ts 295import { drawing } from '@kit.ArkGraphics2D'; 296 297let path: drawing.Path = new drawing.Path(); 298path.moveTo(0, 0); 299path.lineTo(0, 700); 300path.lineTo(700, 0); 301path.close(); 302let path1: drawing.Path = new drawing.Path(path); 303``` 304 305### set<sup>20+</sup> 306 307set(src: Path): void 308 309使用另一个路径对当前路径进行更新。 310 311**系统能力:** SystemCapability.Graphics.Drawing 312 313**参数:** 314 315| 参数名 | 类型 | 必填 | 说明 | 316| -------- | -------------------------------------------- | ---- | ------------------------------- | 317| src | [Path](#path) | 是 | 用于更新的路径。 | 318 319**示例:** 320 321```ts 322import { drawing } from '@kit.ArkGraphics2D'; 323let path: drawing.Path = new drawing.Path(); 324path.moveTo(0, 0); 325path.lineTo(0, 700); 326path.lineTo(700, 0); 327path.close(); 328let path1: drawing.Path = new drawing.Path(); 329path1.set(path); 330``` 331 332### moveTo 333 334moveTo(x: number, y: number) : void 335 336设置自定义路径的起始点位置。 337 338**系统能力:** SystemCapability.Graphics.Drawing 339 340**参数:** 341 342| 参数名 | 类型 | 必填 | 说明 | 343| ------ | ------ | ---- | ----------------------- | 344| x | number | 是 | 起始点的x轴坐标,该参数为浮点数。 | 345| y | number | 是 | 起始点的y轴坐标,该参数为浮点数。 | 346 347**错误码:** 348 349以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 350 351| 错误码ID | 错误信息 | 352| ------- | --------------------------------------------| 353| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 354 355**示例:** 356 357```ts 358import { drawing } from '@kit.ArkGraphics2D'; 359 360let path = new drawing.Path(); 361path.moveTo(10,10); 362``` 363 364### lineTo 365 366lineTo(x: number, y: number) : void 367 368添加一条从路径的最后点位置(若路径没有内容则默认为 (0, 0))到目标点位置的线段。 369 370**系统能力:** SystemCapability.Graphics.Drawing 371 372**参数:** 373 374| 参数名 | 类型 | 必填 | 说明 | 375| ------ | ------ | ---- | ----------------------- | 376| x | number | 是 | 目标点的x轴坐标,该参数为浮点数。 | 377| y | number | 是 | 目标点的y轴坐标,该参数为浮点数。 | 378 379**错误码:** 380 381以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 382 383| 错误码ID | 错误信息 | 384| ------- | --------------------------------------------| 385| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 386 387**示例:** 388 389```ts 390import { drawing } from '@kit.ArkGraphics2D'; 391 392let path = new drawing.Path(); 393path.moveTo(10,10); 394path.lineTo(10, 15); 395``` 396 397### arcTo 398 399arcTo(x1: number, y1: number, x2: number, y2: number, startDeg: number, sweepDeg: number): void 400 401给路径添加一段弧线,绘制弧线的方式为角度弧,该方式首先会指定一个矩形边框,取其内切椭圆,然后会指定一个起始角度和扫描度数,从起始角度扫描截取的椭圆周长一部分即为绘制的弧线。另外会默认添加一条从路径的最后点位置到弧线起始点位置的线段。 402 403**系统能力:** SystemCapability.Graphics.Drawing 404 405**参数:** 406 407| 参数名 | 类型 | 必填 | 说明 | 408| -------- | ------ | ---- | -------------------------- | 409| x1 | number | 是 | 矩形左上角的x坐标,该参数为浮点数。 | 410| y1 | number | 是 | 矩形左上角的y坐标,该参数为浮点数。 | 411| x2 | number | 是 | 矩形右下角的x坐标,该参数为浮点数。 | 412| y2 | number | 是 | 矩形右下角的y坐标,该参数为浮点数。 | 413| startDeg | number | 是 | 起始的角度。角度的起始方向(0°)为x轴正方向。 | 414| sweepDeg | number | 是 | 扫描的度数,为正数时顺时针扫描,为负数时逆时针扫描。实际扫描的度数为该入参对360取模的结果。 | 415 416**错误码:** 417 418以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 419 420| 错误码ID | 错误信息 | 421| ------- | --------------------------------------------| 422| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 423 424**示例:** 425 426```ts 427import { drawing } from '@kit.ArkGraphics2D'; 428 429let path = new drawing.Path(); 430path.moveTo(10,10); 431path.arcTo(10, 15, 10, 10, 10, 10); 432``` 433 434### quadTo 435 436quadTo(ctrlX: number, ctrlY: number, endX: number, endY: number): void 437 438添加从路径最后点位置(若路径没有内容则为 (0, 0))到目标点位置的二阶贝塞尔曲线。 439 440**系统能力:** SystemCapability.Graphics.Drawing 441 442**参数:** 443 444| 参数名 | 类型 | 必填 | 说明 | 445| ------ | ------ | ---- | --------------------- | 446| ctrlX | number | 是 | 控制点的x坐标,该参数为浮点数。 | 447| ctrlY | number | 是 | 控制点的y坐标,该参数为浮点数。 | 448| endX | number | 是 | 目标点的x坐标,该参数为浮点数。 | 449| endY | number | 是 | 目标点的y坐标,该参数为浮点数。 | 450 451**错误码:** 452 453以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 454 455| 错误码ID | 错误信息 | 456| ------- | --------------------------------------------| 457| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 458 459**示例:** 460 461```ts 462import { drawing } from '@kit.ArkGraphics2D'; 463 464let path = new drawing.Path(); 465path.moveTo(10,10); 466path.quadTo(10, 15, 10, 10); 467``` 468 469### conicTo<sup>12+</sup> 470 471conicTo(ctrlX: number, ctrlY: number, endX: number, endY: number, weight: number): void 472 473在当前路径上添加一条路径最后点位置(若路径没有内容则默认为 (0, 0))到目标点位置的圆锥曲线,其控制点为 (ctrlX, ctrlY),结束点为 (endX, endY)。 474 475**系统能力:** SystemCapability.Graphics.Drawing 476 477**参数:** 478 479| 参数名 | 类型 | 必填 | 说明 | 480| ------ | ------ | ---- | --------------------- | 481| ctrlX | number | 是 | 控制点的x坐标,该参数为浮点数。 | 482| ctrlY | number | 是 | 控制点的y坐标,该参数为浮点数。 | 483| endX | number | 是 | 目标点的x坐标,该参数为浮点数。 | 484| endY | number | 是 | 目标点的y坐标,该参数为浮点数。 | 485| weight | number | 是 | 表示曲线权重,决定了曲线的形状。值越大,曲线越接近控制点。小于等于0时,效果与[lineTo](#lineto)相同;值为1时,效果与[quadTo](#quadto)相同。该参数为浮点数。 | 486 487**错误码:** 488 489以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 490 491| 错误码ID | 错误信息 | 492| ------- | --------------------------------------------| 493| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 494 495**示例:** 496 497```ts 498import { drawing } from '@kit.ArkGraphics2D'; 499 500const path = new drawing.Path(); 501path.conicTo(200, 400, 100, 200, 0); 502``` 503 504### cubicTo 505 506cubicTo(ctrlX1: number, ctrlY1: number, ctrlX2: number, ctrlY2: number, endX: number, endY: number): void 507 508添加一条从路径最后点位置(若路径没有内容则默认为 (0, 0))到目标点位置的三阶贝塞尔圆滑曲线。 509 510**系统能力:** SystemCapability.Graphics.Drawing 511 512**参数:** 513 514| 参数名 | 类型 | 必填 | 说明 | 515| ------ | ------ | ---- | --------------------------- | 516| ctrlX1 | number | 是 | 第一个控制点的x坐标,该参数为浮点数。 | 517| ctrlY1 | number | 是 | 第一个控制点的y坐标,该参数为浮点数。 | 518| ctrlX2 | number | 是 | 第二个控制点的x坐标,该参数为浮点数。 | 519| ctrlY2 | number | 是 | 第二个控制点的y坐标,该参数为浮点数。 | 520| endX | number | 是 | 目标点的x坐标,该参数为浮点数。 | 521| endY | number | 是 | 目标点的y坐标,该参数为浮点数。 | 522 523**错误码:** 524 525以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 526 527| 错误码ID | 错误信息 | 528| ------- | --------------------------------------------| 529| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 530 531**示例:** 532 533```ts 534import { drawing } from '@kit.ArkGraphics2D'; 535 536let path = new drawing.Path(); 537path.moveTo(10,10); 538path.cubicTo(100, 100, 80, 150, 300, 150); 539``` 540 541### rMoveTo<sup>12+</sup> 542 543rMoveTo(dx: number, dy: number): void 544 545设置一个相对于当前路径终点(若路径没有内容则默认为 (0, 0))的路径起始点位置。 546 547**系统能力:** SystemCapability.Graphics.Drawing 548 549**参数:** 550 551| 参数名 | 类型 | 必填 | 说明 | 552| ------ | ------ | ---- | ----------------------- | 553| dx | number | 是 | 路径新起始点相对于当前路径终点的x轴偏移量,正数往x轴正方向偏移,负数往x轴负方向偏移,该参数为浮点数。 | 554| dy | number | 是 | 路径新起始点相对于当前路径终点的y轴偏移量,正数往y轴正方向偏移,负数往y轴负方向偏移,该参数为浮点数。 | 555 556**错误码:** 557 558以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 559 560| 错误码ID | 错误信息 | 561| ------- | --------------------------------------------| 562| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 563 564**示例:** 565 566```ts 567import { drawing } from '@kit.ArkGraphics2D'; 568 569const path = new drawing.Path(); 570path.rMoveTo(10, 10); 571``` 572 573### rLineTo<sup>12+</sup> 574 575rLineTo(dx: number, dy: number): void 576 577使用相对位置在当前路径上添加一条当前路径终点(若路径没有内容则默认为 (0, 0))到目标点位置的线段。 578 579**系统能力:** SystemCapability.Graphics.Drawing 580 581**参数:** 582 583| 参数名 | 类型 | 必填 | 说明 | 584| ------ | ------ | ---- | ----------------------- | 585| dx | number | 是 | 目标点相对于当前路径终点的x轴偏移量,正数往x轴正方向偏移,负数往x轴负方向偏移,该参数为浮点数。 | 586| dy | number | 是 | 目标点相对于当前路径终点的y轴偏移量,正数往y轴正方向偏移,负数往y轴负方向偏移,该参数为浮点数。 | 587 588**错误码:** 589 590以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 591 592| 错误码ID | 错误信息 | 593| ------- | --------------------------------------------| 594| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 595 596**示例:** 597 598```ts 599import { drawing } from '@kit.ArkGraphics2D'; 600 601const path = new drawing.Path(); 602path.rLineTo(400, 200); 603``` 604 605### rQuadTo<sup>12+</sup> 606 607rQuadTo(dx1: number, dy1: number, dx2: number, dy2: number): void 608 609使用相对位置在当前路径上添加一条当前路径终点(若路径没有内容则默认为 (0, 0))到目标点位置的二阶贝塞尔曲线。 610 611**系统能力:** SystemCapability.Graphics.Drawing 612 613**参数:** 614 615| 参数名 | 类型 | 必填 | 说明 | 616| ------ | ------ | ---- | --------------------- | 617| dx1 | number | 是 | 控制点相对于路径终点的x轴偏移量,正数往x轴正方向偏移,负数往x轴负方向偏移,该参数为浮点数。 | 618| dy1 | number | 是 | 控制点相对于路径终点的y轴偏移量,正数往y轴正方向偏移,负数往y轴负方向偏移,该参数为浮点数。 | 619| dx2 | number | 是 | 目标点相对于路径终点的x轴偏移量,正数往x轴正方向偏移,负数往x轴负方向偏移,该参数为浮点数。 | 620| dy2 | number | 是 | 目标点相对于路径终点的y轴偏移量,正数往y轴正方向偏移,负数往y轴负方向偏移,该参数为浮点数。 | 621 622**错误码:** 623 624以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 625 626| 错误码ID | 错误信息 | 627| ------- | --------------------------------------------| 628| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 629 630**示例:** 631 632```ts 633import { drawing } from '@kit.ArkGraphics2D'; 634 635const path = new drawing.Path(); 636path.rQuadTo(100, 0, 0, 200); 637``` 638 639### rConicTo<sup>12+</sup> 640 641rConicTo(ctrlX: number, ctrlY: number, endX: number, endY: number, weight: number): void 642 643使用相对位置在当前路径上添加一条路径终点(若路径没有内容则默认为 (0, 0))到目标点位置的圆锥曲线。 644 645**系统能力:** SystemCapability.Graphics.Drawing 646 647**参数:** 648 649| 参数名 | 类型 | 必填 | 说明 | 650| ------ | ------ | ---- | --------------------- | 651| ctrlX | number | 是 | 控制点相对于路径终点的x轴偏移量,正数往x轴正方向偏移,负数往x轴负方向偏移,该参数为浮点数。 | 652| ctrlY | number | 是 | 控制点相对于路径终点的y轴偏移量,正数往y轴正方向偏移,负数往y轴负方向偏移,该参数为浮点数。 | 653| endX | number | 是 | 目标点相对于路径终点的x轴偏移量,正数往x轴正方向偏移,负数往x轴负方向偏移,该参数为浮点数。 | 654| endY | number | 是 | 目标点相对于路径终点的y轴偏移量,正数往y轴正方向偏移,负数往y轴负方向偏移,该参数为浮点数。 | 655| weight | number | 是 | 表示曲线的权重,决定了曲线的形状,越大越接近控制点。若小于等于0则等同于使用[rLineTo](#rlineto12)添加一条到结束点的线段,若为1则等同于[rQuadTo](#rquadto12),该参数为浮点数。 | 656 657**错误码:** 658 659以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 660 661| 错误码ID | 错误信息 | 662| ------- | --------------------------------------------| 663| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 664 665**示例:** 666 667```ts 668import { drawing } from '@kit.ArkGraphics2D'; 669 670const path = new drawing.Path(); 671path.rConicTo(200, 400, 100, 200, 0); 672``` 673 674### rCubicTo<sup>12+</sup> 675 676rCubicTo(ctrlX1: number, ctrlY1: number, ctrlX2: number, ctrlY2: number, endX: number, endY: number): void 677 678使用相对位置在当前路径上添加一条当前路径终点(若路径没有内容则默认为 (0, 0))到目标点位置的三阶贝塞尔曲线。 679 680**系统能力:** SystemCapability.Graphics.Drawing 681 682**参数:** 683 684| 参数名 | 类型 | 必填 | 说明 | 685| ------ | ------ | ---- | --------------------------- | 686| ctrlX1 | number | 是 | 第一个控制点相对于路径终点的x轴偏移量,正数往x轴正方向偏移,负数往x轴负方向偏移,该参数为浮点数。 | 687| ctrlY1 | number | 是 | 第一个控制点相对于路径终点的y轴偏移量,正数往y轴正方向偏移,负数往y轴负方向偏移,该参数为浮点数。 | 688| ctrlX2 | number | 是 | 第二个控制点相对于路径终点的x轴偏移量,正数往x轴正方向偏移,负数往x轴负方向偏移,该参数为浮点数。 | 689| ctrlY2 | number | 是 | 第二个控制点相对于路径终点的y轴偏移量,正数往y轴正方向偏移,负数往y轴负方向偏移,该参数为浮点数。 | 690| endX | number | 是 | 目标点相对于路径终点的x轴偏移量,正数往x轴正方向偏移,负数往x轴负方向偏移,该参数为浮点数。 | 691| endY | number | 是 | 目标点相对于路径终点的y轴偏移量,正数往y轴正方向偏移,负数往y轴负方向偏移,该参数为浮点数。 | 692 693**错误码:** 694 695以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 696 697| 错误码ID | 错误信息 | 698| ------- | --------------------------------------------| 699| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 700 701**示例:** 702 703```ts 704import { drawing } from '@kit.ArkGraphics2D'; 705 706const path = new drawing.Path(); 707path.rCubicTo(200, 0, 0, 200, -20, 0); 708``` 709 710### addArc<sup>12+</sup> 711 712addArc(rect: common2D.Rect, startAngle: number, sweepAngle: number): void 713 714向路径添加一段圆弧。 715当startAngle和sweepAngle同时满足以下两种情况时,添加整个椭圆而不是圆弧: 7161.startAngle对90取余接近于0; 7172.sweepAngle不在(-360, 360)区间内。 718其余情况sweepAngle会对360取余后添加圆弧。 719 720**系统能力:** SystemCapability.Graphics.Drawing 721 722**参数:** 723 724| 参数名 | 类型 | 必填 | 说明 | 725| ----------- | ---------------------------------------- | ---- | ------------------- | 726| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 包含弧的椭圆的矩形边界。 | 727| startAngle | number | 是 | 弧的起始角度,单位为度,0度为x轴正方向,该参数为浮点数。 | 728| sweepAngle | number | 是 | 扫描角度,单位为度。正数表示顺时针方向,负数表示逆时针方向,该参数为浮点数。 | 729 730**错误码:** 731 732以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 733 734| 错误码ID | 错误信息 | 735| ------- | --------------------------------------------| 736| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 737 738**示例:** 739 740```ts 741import { common2D, drawing } from '@kit.ArkGraphics2D'; 742 743let path = new drawing.Path(); 744const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 745path.addArc(rect, 90, 180); 746``` 747 748### addCircle<sup>12+</sup> 749 750addCircle(x: number, y: number, radius: number, pathDirection?: PathDirection): void 751 752按指定方向,向路径添加圆形,圆的起点位于(x + radius, y)。 753 754**系统能力:** SystemCapability.Graphics.Drawing 755 756**参数:** 757 758| 参数名 | 类型 | 必填 | 说明 | 759| ----------- | ---------------------------------------- | ---- | ------------------- | 760| x | number | 是 | 表示圆心的x轴坐标,该参数为浮点数。 | 761| y | number | 是 | 表示圆心的y轴坐标,该参数为浮点数。 | 762| radius | number | 是 | 表示圆形的半径,该参数为浮点数,小于等于0时不会有任何效果。 | 763| pathDirection | [PathDirection](#pathdirection12) | 否 | 表示路径方向,默认为顺时针方向。 | 764 765**错误码:** 766 767以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 768 769| 错误码ID | 错误信息 | 770| ------- | --------------------------------------------| 771| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed. | 772 773**示例:** 774 775```ts 776 777import { drawing } from '@kit.ArkGraphics2D'; 778 779let path = new drawing.Path(); 780path.addCircle(100, 200, 50, drawing.PathDirection.CLOCKWISE); 781``` 782 783### addOval<sup>12+</sup> 784 785addOval(rect: common2D.Rect, start: number, pathDirection?: PathDirection): void 786 787按指定方向,将矩形的内切椭圆添加到路径中。 788 789**系统能力:** SystemCapability.Graphics.Drawing 790 791**参数:** 792 793| 参数名 | 类型 | 必填 | 说明 | 794| ----------- | ---------------------------------------- | ---- | ------------------- | 795| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 椭圆的矩形边界。 | 796| start | number | 是 | 表示椭圆初始点的索引,0,1,2,3分别对应椭圆的上端点,右端点,下端点,左端点,该参数为不小于0的整数,大于等于4时会对4取余。 | 797| pathDirection | [PathDirection](#pathdirection12) | 否 | 表示路径方向,默认为顺时针方向。 | 798 799**错误码:** 800 801以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 802 803| 错误码ID | 错误信息 | 804| ------- | --------------------------------------------| 805| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.| 806 807**示例:** 808 809```ts 810import { common2D, drawing } from '@kit.ArkGraphics2D'; 811 812let path = new drawing.Path(); 813const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 814path.addOval(rect, 5, drawing.PathDirection.CLOCKWISE); 815``` 816 817### addRect<sup>12+</sup> 818 819addRect(rect: common2D.Rect, pathDirection?: PathDirection): void 820 821按指定方向,将矩形添加到路径中,添加的路径的起始点为矩形左上角。 822 823**系统能力:** SystemCapability.Graphics.Drawing 824 825**参数:** 826 827| 参数名 | 类型 | 必填 | 说明 | 828| ----------- | ---------------------------------------- | ---- | ------------------- | 829| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 向路径中添加的矩形轮廓。 | 830| pathDirection | [PathDirection](#pathdirection12) | 否 | 表示路径方向,默认为顺时针方向。 | 831 832**错误码:** 833 834以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 835 836| 错误码ID | 错误信息 | 837| ------- | --------------------------------------------| 838| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.| 839 840**示例:** 841 842```ts 843import { common2D, drawing } from '@kit.ArkGraphics2D'; 844 845let path = new drawing.Path(); 846const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 847path.addRect(rect, drawing.PathDirection.CLOCKWISE); 848``` 849 850### addRoundRect<sup>12+</sup> 851 852addRoundRect(roundRect: RoundRect, pathDirection?: PathDirection): void 853 854按指定方向,向路径添加圆角矩形轮廓。路径添加方向为顺时针时,起始点位于圆角矩形左下方圆角与左边界的交点;路径添加方向为逆时针时,起始点位于圆角矩形左上方圆角与左边界的交点。 855 856**系统能力:** SystemCapability.Graphics.Drawing 857 858**参数:** 859 860| 参数名 | 类型 | 必填 | 说明 | 861| ----------- | ---------------------------------------- | ---- | ------------------- | 862| roundRect | [RoundRect](#roundrect12) | 是 | 圆角矩形对象。 | 863| pathDirection | [PathDirection](#pathdirection12) | 否 | 表示路径方向,默认为顺时针方向。 | 864 865**错误码:** 866 867以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 868 869| 错误码ID | 错误信息 | 870| ------- | --------------------------------------------| 871| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.| 872 873**示例:** 874 875```ts 876import { common2D, drawing } from '@kit.ArkGraphics2D'; 877 878let path = new drawing.Path(); 879const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 880let roundRect = new drawing.RoundRect(rect, 50, 50); 881path.addRoundRect(roundRect, drawing.PathDirection.CLOCKWISE); 882``` 883 884### addPath<sup>12+</sup> 885 886addPath(path: Path, matrix?: Matrix | null): void 887 888对源路径进行矩阵变换后,将其添加到当前路径中。 889 890**系统能力:** SystemCapability.Graphics.Drawing 891 892**参数:** 893 894| 参数名 | 类型 | 必填 | 说明 | 895| ----------- | ---------------------------------------- | ---- | ------------------- | 896| path | [Path](#path) | 是 | 表示源路径对象。 | 897| matrix | [Matrix](#matrix12)\|null | 否 | 表示矩阵对象,默认为单位矩阵。 | 898 899**错误码:** 900 901以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 902 903| 错误码ID | 错误信息 | 904| ------- | --------------------------------------------| 905| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 906 907**示例:** 908 909```ts 910import { common2D, drawing } from '@kit.ArkGraphics2D'; 911 912let path = new drawing.Path(); 913let matrix = new drawing.Matrix(); 914const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 915let roundRect = new drawing.RoundRect(rect, 50, 50); 916path.addRoundRect(roundRect, drawing.PathDirection.CLOCKWISE); 917let dstPath = new drawing.Path(); 918dstPath.addPath(path, matrix); 919``` 920 921### transform<sup>12+</sup> 922 923transform(matrix: Matrix): void 924 925对路径进行矩阵变换。 926 927**系统能力:** SystemCapability.Graphics.Drawing 928 929**参数:** 930 931| 参数名 | 类型 | 必填 | 说明 | 932| ----------- | ---------------------------------------- | ---- | ------------------- | 933| matrix | [Matrix](#matrix12) | 是 | 表示矩阵对象。 | 934 935**错误码:** 936 937以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 938 939| 错误码ID | 错误信息 | 940| ------- | --------------------------------------------| 941| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 942 943**示例:** 944 945```ts 946import { common2D, drawing } from '@kit.ArkGraphics2D'; 947 948let path = new drawing.Path(); 949let matrix = new drawing.Matrix(); 950matrix.setScale(1.5, 1.5, 10, 10); 951const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 952let roundRect = new drawing.RoundRect(rect, 50, 50); 953path.addRoundRect(roundRect, drawing.PathDirection.CLOCKWISE); 954path.transform(matrix); 955``` 956 957### contains<sup>12+</sup> 958 959contains(x: number, y: number): boolean 960 961判断指定坐标点是否被路径包含,判定是否被路径包含的规则参考[PathFillType](#pathfilltype12)。 962 963**系统能力:** SystemCapability.Graphics.Drawing 964 965**参数:** 966 967| 参数名 | 类型 | 必填 | 说明 | 968| ------ | ------ | ---- | ----------------------- | 969| x | number | 是 | x轴上坐标点,该参数必须为浮点数。 | 970| y | number | 是 | y轴上坐标点,该参数必须为浮点数。 | 971 972**返回值:** 973 974| 类型 | 说明 | 975| ------- | -------------- | 976| boolean | 返回指定坐标点是否在路径内。true表示点在路径内,false表示点不在路径内。 | 977 978**错误码:** 979 980以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 981 982| 错误码ID | 错误信息 | 983| ------- | --------------------------------------------| 984| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 985 986**示例:** 987 988```ts 989import { common2D, drawing } from '@kit.ArkGraphics2D'; 990 991const path = new drawing.Path(); 992let rect : common2D.Rect = {left: 50, top: 50, right: 250, bottom: 250}; 993path.addRect(rect, drawing.PathDirection.CLOCKWISE); 994console.info("test contains: " + path.contains(0, 0)); 995console.info("test contains: " + path.contains(60, 60)); 996``` 997 998### setLastPoint<sup>20+</sup> 999 1000setLastPoint(x: number, y: number): void 1001 1002修改路径的最后一个点。 1003 1004**系统能力:** SystemCapability.Graphics.Drawing 1005 1006**参数:** 1007 1008| 参数名 | 类型 | 必填 | 说明 | 1009| ------ | ------ | ---- | ----------------------- | 1010| x | number | 是 | 指定点的x轴坐标,该参数为浮点数。0表示坐标原点,负数表示位于坐标原点左侧,正数表示位于坐标原点右侧。 | 1011| y | number | 是 | 指定点的y轴坐标,该参数为浮点数。0表示坐标原点,负数表示位于坐标原点上侧,正数表示位于坐标原点下侧。 | 1012 1013**示例:** 1014 1015```ts 1016import { drawing } from '@kit.ArkGraphics2D'; 1017const path = new drawing.Path(); 1018path.moveTo(0, 0); 1019path.lineTo(0, 700); 1020let isEmpty = path.isEmpty(); 1021console.info('isEmpty:', isEmpty); 1022path.reset(); 1023isEmpty = path.isEmpty(); 1024console.info('isEmpty:', isEmpty); 1025path.setLastPoint(50, 50); 1026console.info('isEmpty:', isEmpty); 1027``` 1028 1029### setFillType<sup>12+</sup> 1030 1031setFillType(pathFillType: PathFillType): void 1032 1033设置路径的填充类型,决定路径内部区域的定义方式。例如,使用Winding填充类型时,路径内部区域由路径环绕的次数决定,而使用EvenOdd填充类型时,路径内部区域由路径环绕的次数是否为奇数决定。 1034 1035**系统能力:** SystemCapability.Graphics.Drawing 1036 1037**参数:** 1038 1039| 参数名 | 类型 | 必填 | 说明 | 1040| ----------- | ---------------------------------------- | ---- | ------------------- | 1041| pathFillType | [PathFillType](#pathfilltype12) | 是 | 表示路径填充规则。 | 1042 1043**错误码:** 1044 1045以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1046 1047| 错误码ID | 错误信息 | 1048| ------- | --------------------------------------------| 1049| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.| 1050 1051**示例:** 1052 1053```ts 1054import { drawing } from '@kit.ArkGraphics2D'; 1055 1056const path = new drawing.Path(); 1057path.setFillType(drawing.PathFillType.WINDING); 1058``` 1059 1060### getFillType<sup>20+</sup> 1061 1062getFillType(): PathFillType 1063 1064获取路径的填充类型。 1065 1066**系统能力:** SystemCapability.Graphics.Drawing 1067 1068**返回值:** 1069 1070| 类型 | 说明 | 1071| -------------------------------------------------- | ---------------------- | 1072| [PathFillType](#pathfilltype12) | 路径填充类型。 | 1073 1074**示例:** 1075 1076```ts 1077import { drawing } from '@kit.ArkGraphics2D'; 1078const path = new drawing.Path(); 1079path.setFillType(drawing.PathFillType.WINDING); 1080let type = path.getFillType(); 1081console.info("type :" + type); 1082``` 1083 1084### getBounds<sup>12+</sup> 1085 1086getBounds(): common2D.Rect 1087 1088获取包含路径的最小矩形边界。 1089 1090**系统能力:** SystemCapability.Graphics.Drawing 1091 1092**返回值:** 1093 1094| 类型 | 说明 | 1095| -------------------------------------------------- | ---------------------- | 1096| [common2D.Rect](js-apis-graphics-common2D.md#rect) | 包含路径的最小矩形区域。 | 1097 1098**示例:** 1099 1100```ts 1101import { common2D, drawing } from '@kit.ArkGraphics2D'; 1102 1103const path = new drawing.Path(); 1104path.lineTo(50, 40) 1105let rect : common2D.Rect = {left: 0, top: 0, right: 0, bottom: 0}; 1106rect = path.getBounds(); 1107console.info("test rect.left: " + rect.left); 1108console.info("test rect.top: " + rect.top); 1109console.info("test rect.right: " + rect.right); 1110console.info("test rect.bottom: " + rect.bottom); 1111``` 1112 1113### addPolygon<sup>12+</sup> 1114 1115addPolygon(points: Array\<common2D.Point>, close: boolean): void 1116 1117通过坐标点列表添加多条连续的线段。 1118 1119**系统能力:** SystemCapability.Graphics.Drawing 1120 1121**参数:** 1122 1123| 参数名 | 类型 | 必填 | 说明 | 1124| ------ | ------ | ---- | ----------------------- | 1125| points | Array\<[common2D.Point](js-apis-graphics-common2D.md#point12)> | 是 | 坐标点数组。 | 1126| close | boolean | 是 | 表示是否将路径闭合,即是否添加路径起始点到终点的连线。true表示将路径闭合,false表示不将路径闭合。 | 1127 1128**错误码:** 1129 1130以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1131 1132| 错误码ID | 错误信息 | 1133| ------- | --------------------------------------------| 1134| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1135 1136**示例:** 1137 1138```ts 1139import { common2D, drawing } from '@kit.ArkGraphics2D'; 1140 1141let pointsArray = new Array<common2D.Point>(); 1142const point1: common2D.Point = { x: 200, y: 200 }; 1143const point2: common2D.Point = { x: 400, y: 200 }; 1144const point3: common2D.Point = { x: 100, y: 400 }; 1145const point4: common2D.Point = { x: 300, y: 400 }; 1146pointsArray.push(point1); 1147pointsArray.push(point2); 1148pointsArray.push(point3); 1149pointsArray.push(point4); 1150const path = new drawing.Path(); 1151path.addPolygon(pointsArray, false); 1152``` 1153 1154### offset<sup>12+</sup> 1155 1156offset(dx: number, dy: number): Path 1157 1158将路径沿着x轴和y轴方向偏移一定距离并保存在返回的路径对象中。 1159 1160**系统能力:** SystemCapability.Graphics.Drawing 1161 1162**参数:** 1163 1164| 参数名 | 类型 | 必填 | 说明 | 1165| ------ | ------ | ---- | ----------------------- | 1166| dx | number | 是 | x轴方向偏移量,正数往x轴正方向偏移,负数往x轴负方向偏移,该参数为浮点数。 | 1167| dy | number | 是 | y轴方向偏移量,正数往y轴正方向偏移,负数往y轴负方向偏移,该参数为浮点数。 | 1168 1169**返回值:** 1170 1171| 类型 | 说明 | 1172| ------ | ------------------ | 1173| [Path](#path) | 返回当前路径偏移(dx,dy)后生成的新路径对象。 | 1174 1175**错误码:** 1176 1177以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1178 1179| 错误码ID | 错误信息 | 1180| ------- | --------------------------------------------| 1181| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1182 1183**示例:** 1184 1185```ts 1186import { drawing } from '@kit.ArkGraphics2D'; 1187 1188const path = new drawing.Path(); 1189path.moveTo(200, 200); 1190path.lineTo(300, 300); 1191const dst = path.offset(200, 200); 1192``` 1193 1194### op<sup>12+</sup> 1195 1196op(path: Path, pathOp: PathOp): boolean 1197 1198将当前路径置为和path按照指定的路径操作类型合并后的结果。 1199 1200**系统能力:** SystemCapability.Graphics.Drawing 1201 1202**参数:** 1203 1204| 参数名 | 类型 | 必填 | 说明 | 1205| ------ | ------ | ---- | ----------------------- | 1206| path | [Path](#path) | 是 | 路径对象,用于与当前路径合并。 | 1207| pathOp | [PathOp](#pathop12) | 是 | 路径操作类型枚举。 | 1208 1209**返回值:** 1210 1211| 类型 | 说明 | 1212| ------ | ------------------ | 1213| boolean | 返回路径合并是否成功的结果。true表示合并成功,false表示合并失败。 | 1214 1215**错误码:** 1216 1217以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1218 1219| 错误码ID | 错误信息 | 1220| ------- | --------------------------------------------| 1221| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 1222 1223**示例:** 1224 1225```ts 1226import { drawing } from '@kit.ArkGraphics2D'; 1227 1228const path = new drawing.Path(); 1229const path2 = new drawing.Path(); 1230path.addCircle(100, 200, 100, drawing.PathDirection.CLOCKWISE); 1231console.info("get pathOp: ", path2.op(path, drawing.PathOp.DIFFERENCE)); 1232``` 1233 1234### close 1235 1236close(): void 1237 1238闭合路径,会添加一条从路径起点位置到最后点位置的线段。 1239 1240**系统能力:** SystemCapability.Graphics.Drawing 1241 1242**示例:** 1243 1244```ts 1245import { drawing } from '@kit.ArkGraphics2D'; 1246 1247let path = new drawing.Path(); 1248path.moveTo(10,10); 1249path.cubicTo(10, 10, 10, 10, 15, 15); 1250path.close(); 1251``` 1252 1253### reset 1254 1255reset(): void 1256 1257重置自定义路径数据。 1258 1259**系统能力:** SystemCapability.Graphics.Drawing 1260 1261**示例:** 1262 1263```ts 1264import { drawing } from '@kit.ArkGraphics2D'; 1265 1266let path = new drawing.Path(); 1267path.moveTo(10,10); 1268path.cubicTo(10, 10, 10, 10, 15, 15); 1269path.reset(); 1270``` 1271 1272### rewind<sup>20+</sup> 1273 1274rewind(): void 1275 1276将路径内添加的各类点/线清空,但是保留内存空间。 1277 1278**系统能力:** SystemCapability.Graphics.Drawing 1279 1280**示例:** 1281 1282```ts 1283import { drawing } from '@kit.ArkGraphics2D'; 1284let path = new drawing.Path(); 1285path.moveTo(10,10); 1286path.lineTo(20,20); 1287path.rewind(); 1288let empty = path.isEmpty(); 1289console.info('empty : ', empty); 1290``` 1291 1292### isEmpty<sup>20+</sup> 1293 1294isEmpty(): boolean 1295 1296判断路径是否为空。 1297 1298**系统能力:** SystemCapability.Graphics.Drawing 1299 1300**返回值:** 1301 1302| 类型 | 说明 | 1303| ------ | ---- | 1304| boolean | 路径是否为空。true表示当前路径为空,false表示路径不为空。| 1305 1306**示例:** 1307 1308```ts 1309import { drawing } from '@kit.ArkGraphics2D'; 1310let path = new drawing.Path(); 1311path.moveTo(10,10); 1312path.lineTo(20,20); 1313let isEmpty = path.isEmpty(); 1314console.info('isEmpty:', isEmpty); 1315``` 1316 1317### isRect<sup>20+</sup> 1318 1319isRect(rect: common2D.Rect | null): boolean 1320 1321判断路径是否构成矩形。 1322 1323**系统能力:** SystemCapability.Graphics.Drawing 1324 1325**参数:** 1326 1327| 参数名 | 类型 | 必填 | 说明 | 1328| ------ | ------ | ---- | ----------------------- | 1329| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect)\| null | 是 | 矩形对象,作为出参使用,路径构成矩形时,会被改写为路径表示的矩形,否则不会改变。可以为null,表示无需获取路径表示的矩形。 | 1330 1331**返回值:** 1332 1333| 类型 | 说明 | 1334| ------ | ---- | 1335| boolean | 返回路径是否构成矩形。true表示路径构成矩形,false表示路径不构成矩形。| 1336 1337**示例:** 1338 1339```ts 1340import { common2D, drawing } from '@kit.ArkGraphics2D'; 1341 1342let path = new drawing.Path(); 1343path.moveTo(10,10); 1344path.lineTo(20,10); 1345let isRect = path.isRect(null); 1346console.info("isRect: ", isRect); 1347let rect: common2D.Rect = { left : 100, top : 100, right : 400, bottom : 500 }; 1348path.lineTo(20, 20); 1349path.lineTo(10, 20); 1350path.lineTo(10, 10); 1351isRect = path.isRect(rect); 1352console.info('isRect: ', isRect); 1353``` 1354 1355### getLength<sup>12+</sup> 1356 1357getLength(forceClosed: boolean): number 1358 1359获取路径长度。 1360 1361**系统能力:** SystemCapability.Graphics.Drawing 1362 1363**参数:** 1364 1365| 参数名| 类型 | 必填| 说明 | 1366| ----- | ------ | ---- | --------- | 1367| forceClosed | boolean | 是 | 表示是否按照闭合路径测量,true表示测量时路径会被强制视为已闭合,false表示会根据路径的实际闭合状态测量。| 1368 1369**返回值:** 1370 1371| 类型 | 说明 | 1372| ------ | ---- | 1373| number | 路径长度。| 1374 1375**示例:** 1376 1377```ts 1378import { drawing } from '@kit.ArkGraphics2D'; 1379 1380let path = new drawing.Path(); 1381path.arcTo(20, 20, 180, 180, 180, 90); 1382let len = path.getLength(false); 1383console.info("path length = " + len); 1384``` 1385 1386### getPositionAndTangent<sup>12+</sup> 1387 1388getPositionAndTangent(forceClosed: boolean, distance: number, position: common2D.Point, tangent: common2D.Point): boolean 1389 1390获取路径起始点指定距离处的坐标点和切线值。 1391 1392**系统能力:** SystemCapability.Graphics.Drawing 1393 1394**参数:** 1395 1396| 参数名 | 类型 | 必填 | 说明 | 1397| -------- | -------------------------------------------- | ---- | ------------------------------- | 1398| forceClosed | boolean | 是 | 表示是否按照闭合路径测量,true表示测量时路径会被强制视为已闭合,false表示会根据路径的实际闭合状态测量。 | 1399| distance | number | 是 | 表示与路径起始点的距离,小于0时会被视作0,大于路径长度时会被视作路径长度。该参数为浮点数。 | 1400| position | [common2D.Point](js-apis-graphics-common2D.md#point12) | 是 | 存储获取到的距离路径起始点distance处的点的坐标。 | 1401| tangent | [common2D.Point](js-apis-graphics-common2D.md#point12) | 是 | 存储获取到的距离路径起始点distance处的点的切线值,tangent.x表示该点切线的余弦值,tangent.y表示该点切线的正弦值。 | 1402 1403**返回值:** 1404 1405| 类型 | 说明 | 1406| --------------------- | -------------- | 1407| boolean |表示是否成功获取距离路径起始点distance处的点的坐标和正切值的结果。true表示获取成功,false表示获取失败,position和tangent不会被改变。 | 1408 1409**错误码:** 1410 1411以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1412 1413| 错误码ID | 错误信息 | 1414| ------- | --------------------------------------------| 1415| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1416 1417**示例:** 1418 1419```ts 1420import { common2D, drawing } from '@kit.ArkGraphics2D'; 1421 1422let path: drawing.Path = new drawing.Path(); 1423path.moveTo(0, 0); 1424path.lineTo(0, 700); 1425path.lineTo(700, 0); 1426let position: common2D.Point = { x: 0.0, y: 0.0 }; 1427let tangent: common2D.Point = { x: 0.0, y: 0.0 }; 1428if (path.getPositionAndTangent(false, 0.1, position, tangent)) { 1429 console.info("getPositionAndTangent-----position: "+ position.x); 1430 console.info("getPositionAndTangent-----position: "+ position.y); 1431 console.info("getPositionAndTangent-----tangent: "+ tangent.x); 1432 console.info("getPositionAndTangent-----tangent: "+ tangent.y); 1433} 1434``` 1435 1436### getSegment<sup>18+</sup> 1437 1438getSegment(forceClosed: boolean, start: number, stop: number, startWithMoveTo: boolean, dst: Path): boolean 1439 1440截取路径的片段并追加到目标路径上。 1441 1442**系统能力:** SystemCapability.Graphics.Drawing 1443 1444**参数:** 1445 1446| 参数名 | 类型 | 必填 | 说明 | 1447| -------- | -------------------------------------------- | ---- | ------------------------------- | 1448| forceClosed | boolean | 是 | 表示是否按照闭合路径测量,true表示测量时路径会被强制视为已闭合,false表示会根据路径的实际闭合状态测量。 | 1449| start | number | 是 | 表示与路径起始点的距离,距离路径起始点start距离的位置即为截取路径片段的起始点,小于0时会被视作0,大于等于stop时会截取失败。该参数为浮点数。 | 1450| stop | number | 是 | 表示与路径起始点的距离,距离路径起始点stop距离的位置即为截取路径片段的终点,小于等于start时会截取失败,大于路径长度时会被视作路径长度。该参数为浮点数。 | 1451| startWithMoveTo | boolean | 是 | 表示是否在目标路径执行[moveTo](#moveto)移动到截取路径片段的起始点位置。true表示执行,false表示不执行。 | 1452| dst | [Path](#path) | 是 | 目标路径,截取成功时会将得到的路径片段追加到目标路径上,截取失败时不做改变。 | 1453 1454**返回值:** 1455 1456| 类型 | 说明 | 1457| --------------------- | -------------- | 1458| boolean |表示是否成功截取路径片段。true表示截取成功,false表示截取失败。 | 1459 1460**示例:** 1461 1462```ts 1463import { drawing } from '@kit.ArkGraphics2D'; 1464 1465let path: drawing.Path = new drawing.Path(); 1466path.moveTo(0, 0); 1467path.lineTo(0, 700); 1468path.lineTo(700, 0); 1469let dstPath: drawing.Path = new drawing.Path(); 1470console.info("getSegment-----result: "+ path.getSegment(true, 10.0, 20.0, true, dstPath)); 1471``` 1472 1473### isClosed<sup>12+</sup> 1474 1475isClosed(): boolean 1476 1477获取路径是否闭合。 1478 1479**系统能力:** SystemCapability.Graphics.Drawing 1480 1481**返回值:** 1482 1483| 类型 | 说明 | 1484| --------------------- | -------------- | 1485| boolean | 表示当前路径是否闭合,true表示闭合,false表示不闭合。 | 1486 1487**示例:** 1488 1489```ts 1490import { drawing } from '@kit.ArkGraphics2D'; 1491 1492let path: drawing.Path = new drawing.Path(); 1493path.moveTo(0, 0); 1494path.lineTo(0, 700); 1495if (path.isClosed()) { 1496 console.info("path is closed."); 1497} else { 1498 console.info("path is not closed."); 1499} 1500``` 1501 1502### getMatrix<sup>12+</sup> 1503 1504getMatrix(forceClosed: boolean, distance: number, matrix: Matrix, flags: PathMeasureMatrixFlags): boolean 1505 1506在路径上的某个位置,获取一个变换矩阵,用于表示该点的坐标和朝向。 1507 1508**系统能力:** SystemCapability.Graphics.Drawing 1509 1510**参数:** 1511 1512| 参数名 | 类型 | 必填 | 说明 | 1513| -------- | -------------------------------------------- | ---- | ------------------------------- | 1514| forceClosed | boolean | 是 | 表示是否按照闭合路径测量,true表示测量时路径会被强制视为已闭合,false表示会根据路径的实际闭合状态测量。 | 1515| distance | number | 是 | 表示与路径起始点的距离,小于0时会被视作0,大于路径长度时会被视作路径长度。该参数为浮点数。 | 1516| matrix | [Matrix](#matrix12) | 是 | 矩阵对象,用于存储得到的矩阵。 | 1517| flags | [PathMeasureMatrixFlags](#pathmeasurematrixflags12) | 是 | 矩阵信息维度枚举。 | 1518 1519**返回值:** 1520 1521| 类型 | 说明 | 1522| --------------------- | -------------- | 1523| boolean | 返回是否成功获取变换矩阵的结果。true表示成功,false表示失败。 | 1524 1525**错误码:** 1526 1527以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1528 1529| 错误码ID | 错误信息 | 1530| ------- | --------------------------------------------| 1531| 401 | Parameter error. Possible causes: Mandatory parameters are left unspecified. | 1532 1533**示例:** 1534 1535```ts 1536import { drawing } from '@kit.ArkGraphics2D'; 1537 1538let path: drawing.Path = new drawing.Path(); 1539let matrix = new drawing.Matrix(); 1540if(path.getMatrix(false, 10, matrix, drawing.PathMeasureMatrixFlags.GET_TANGENT_MATRIX)) { 1541 console.info("path.getMatrix return true"); 1542} else { 1543 console.info("path.getMatrix return false"); 1544} 1545``` 1546 1547### buildFromSvgString<sup>12+</sup> 1548 1549buildFromSvgString(str: string): boolean 1550 1551解析SVG字符串表示的路径。 1552 1553**系统能力:** SystemCapability.Graphics.Drawing 1554 1555**参数:** 1556 1557| 参数名 | 类型 | 必填 | 说明 | 1558| -------- | -------------------------------------------- | ---- | ------------------------------- | 1559| str | string | 是 | SVG格式的字符串,用于描述绘制路径。 | 1560 1561**返回值:** 1562 1563| 类型 | 说明 | 1564| --------------------- | -------------- | 1565| boolean | 返回是否成功解析SVG字符串的结果。true表示解析成功,false表示解析失败。 | 1566 1567**错误码:** 1568 1569以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1570 1571| 错误码ID | 错误信息 | 1572| ------- | --------------------------------------------| 1573| 401 | Parameter error. Possible causes: Mandatory parameters are left unspecified. | 1574 1575**示例:** 1576 1577```ts 1578import { drawing } from '@kit.ArkGraphics2D'; 1579 1580let path: drawing.Path = new drawing.Path(); 1581let svgStr: string = "M150 100 L75 300 L225 300 Z"; 1582if(path.buildFromSvgString(svgStr)) { 1583 console.info("buildFromSvgString return true"); 1584} else { 1585 console.info("buildFromSvgString return false"); 1586} 1587``` 1588 1589### getPathIterator<sup>18+</sup> 1590 1591getPathIterator(): PathIterator 1592 1593返回该路径的操作迭代器。 1594 1595**系统能力:** SystemCapability.Graphics.Drawing 1596 1597**返回值:** 1598 1599| 类型 | 说明 | 1600| --------------------- | -------------- | 1601| [PathIterator](#pathiterator18) | 该路径的迭代器对象。 | 1602 1603**示例:** 1604 1605```ts 1606import { drawing } from '@kit.ArkGraphics2D'; 1607 1608let path: drawing.Path = new drawing.Path(); 1609let iter = path.getPathIterator(); 1610``` 1611 1612### approximate<sup>20+</sup> 1613 1614approximate(acceptableError: number): Array\<number> 1615 1616将当前路径转化为由连续直线段构成的近似路径。 1617 1618> **说明:** 1619> 1620> - 当acceptableError为0时,曲线路径被极度细分,会严重影响性能和内存消耗,不建议设置误差值为0。 1621> - 当acceptableError特别大时,路径会极度简化,保留少量关键点,可能会丢失原有形状。 1622> - 对于椭圆等曲线,当acceptableError过大时,拟合结果通常只包含椭圆的分段贝塞尔曲线的起止点,椭圆形会被极度简化为多边形。 1623 1624**系统能力:** SystemCapability.Graphics.Drawing 1625 1626**参数:** 1627 1628| 参数名 | 类型 | 必填 | 说明 | 1629| -------- | -------------------------------------------- | ---- | ------------------------------- | 1630| acceptableError | number | 是 | 表示路径上每条线段的可接受误差。该参数为浮点数,不应小于0,当参数小于0时报错。 | 1631 1632**返回值:** 1633 1634| 类型 | 说明 | 1635| --------------------- | -------------- | 1636| Array\<number> | 返回包含近似路径的点的数组,至少包含两个点。每个点由三个值组成:<br>1. 该点所在的位置距离路径起点的长度比例值,范围为[0.0, 1.0]。<br>2. 点的x坐标。<br>3. 点的y坐标。 | 1637 1638**错误码:** 1639 1640以下错误码的详细介绍请参见[图形绘制与显示错误码](../apis-arkgraphics2d/errorcode-drawing.md)。 1641 1642| 错误码ID | 错误信息 | 1643| ------- | --------------------------------------------| 1644| 25900001 | Parameter error.Possible causes: Incorrect parameter range. | 1645 1646**示例:** 1647 1648```ts 1649import { drawing } from '@kit.ArkGraphics2D'; 1650 1651let path: drawing.Path = new drawing.Path(); 1652path.moveTo(100, 100); 1653path.lineTo(500, 500); 1654let points: number[] = path.approximate(0.5); 1655for (let i = 0; i < points.length; i += 3) { 1656 console.info("PathApproximate Fraction =" + points[i] + ", X =" + points[i + 1] + ", Y =" + points[i + 2] + "\n"); 1657} 1658``` 1659 1660### interpolate<sup>20+</sup> 1661 1662interpolate(other: Path, weight: number, interpolatedPath: Path): boolean 1663 1664根据给定的权重,在当前路径和另一条路径之间进行插值,并将结果存储在目标路径对象中。两条路径点数相同即可插值成功,目标路径按照当前路径的结构进行创建。 1665 1666**系统能力:** SystemCapability.Graphics.Drawing 1667 1668**参数:** 1669 1670| 参数名 | 类型 | 必填 | 说明 | 1671| -------- | -------------------------------------------- | ---- | ------------------------------- | 1672| other | [Path](#path) | 是 | 表示另一条路径对象。 | 1673| weight | number | 是 | 表示插值权重,必须在[0.0, 1.0]范围内。该参数为浮点数。 | 1674| interpolatedPath | [Path](#path) | 是 | 表示用于存储插值结果的目标路径对象。 | 1675 1676**返回值:** 1677 1678| 类型 | 说明 | 1679| --------------------- | -------------- | 1680| boolean | 返回插值操作是否成功的结果。true表示插值成功,false表示插值失败。 | 1681 1682**错误码:** 1683 1684以下错误码的详细介绍请参见[图形绘制与显示错误码](../apis-arkgraphics2d/errorcode-drawing.md)。 1685 1686| 错误码ID | 错误信息 | 1687| ------- | --------------------------------------------| 1688| 25900001 | Parameter error.Possible causes: Incorrect parameter range. | 1689 1690**示例:** 1691 1692```ts 1693import { drawing } from '@kit.ArkGraphics2D'; 1694 1695let path: drawing.Path = new drawing.Path(); 1696path.moveTo(50, 50); 1697path.lineTo(100, 100); 1698path.lineTo(200, 200); 1699let other: drawing.Path = new drawing.Path(); 1700other.moveTo(80, 80); 1701other.lineTo(300, 300); 1702let interpolatedPath: drawing.Path = new drawing.Path(); 1703if (path.interpolate(other, 0.0, interpolatedPath)) { 1704 console.info('interpolate return true'); 1705} else { 1706 console.info('interpolate return false'); 1707} 1708``` 1709 1710### isInterpolate<sup>20+</sup> 1711 1712isInterpolate(other: Path): boolean 1713 1714判断当前路径与另一条路径在结构和操作顺序上是否完全一致,以确定两条路径是否兼容插值。若路径中包含圆锥曲线(Conic)操作,则对应操作的权重值也必须一致,才能视为兼容插值。 1715 1716**系统能力:** SystemCapability.Graphics.Drawing 1717 1718**参数:** 1719 1720| 参数名 | 类型 | 必填 | 说明 | 1721| -------- | -------------------------------------------- | ---- | ------------------------------- | 1722| other | [Path](#path) | 是 | 表示另一条路径对象。 | 1723 1724**返回值:** 1725 1726| 类型 | 说明 | 1727| --------------------- | -------------- | 1728| boolean | 返回当前路径与另一条路径是否兼容插值的结果。true表示兼容插值,false表示不兼容插值。 | 1729 1730**示例:** 1731 1732```ts 1733import { drawing } from '@kit.ArkGraphics2D'; 1734 1735let path: drawing.Path = new drawing.Path(); 1736path.moveTo(0, 0); 1737path.lineTo(100, 100); 1738let other: drawing.Path = new drawing.Path(); 1739other.moveTo(0, 1); 1740other.lineTo(200, 200); 1741if (path.isInterpolate(other)) { 1742 console.info('isInterpolate return true'); 1743} else { 1744 console.info('isInterpolate return false'); 1745} 1746``` 1747 1748## Canvas 1749 1750承载绘制内容与绘制状态的载体。 1751 1752> **说明:** 1753> 1754> 画布自带一个默认画刷,该画刷为黑色,开启反走样,不具备其他任何样式效果。当画布中没有主动设置画刷和画笔时,该默认画刷生效。 1755 1756### constructor 1757 1758constructor(pixelmap: image.PixelMap) 1759 1760创建一个以PixelMap作为绘制目标的Canvas对象。 1761 1762**系统能力:** SystemCapability.Graphics.Drawing 1763 1764**参数:** 1765 1766| 参数名 | 类型 | 必填 | 说明 | 1767| -------- | -------------------------------------------- | ---- | -------------- | 1768| pixelmap | [image.PixelMap](../apis-image-kit/arkts-apis-image-PixelMap.md) | 是 | 构造函数入参。 | 1769 1770**错误码:** 1771 1772以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1773 1774| 错误码ID | 错误信息 | 1775| ------- | --------------------------------------------| 1776| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1777 1778**示例:** 1779 1780```ts 1781import { drawing } from '@kit.ArkGraphics2D'; 1782import { image } from '@kit.ImageKit'; 1783 1784const color = new ArrayBuffer(96); 1785let opts : image.InitializationOptions = { 1786 editable: true, 1787 pixelFormat: 3, 1788 size: { 1789 height: 4, 1790 width: 6 1791 } 1792} 1793image.createPixelMap(color, opts).then((pixelMap) => { 1794 const canvas = new drawing.Canvas(pixelMap); 1795}) 1796``` 1797 1798### drawRect 1799 1800drawRect(rect: common2D.Rect): void 1801 1802绘制一个矩形,默认使用黑色填充。 1803 1804**系统能力:** SystemCapability.Graphics.Drawing 1805 1806**参数:** 1807 1808| 参数名 | 类型 | 必填 | 说明 | 1809| ------ | -------------------------------------------------- | ---- | -------------- | 1810| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 绘制的矩形区域。 | 1811 1812**错误码:** 1813 1814以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1815 1816| 错误码ID | 错误信息 | 1817| ------- | --------------------------------------------| 1818| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1819 1820**示例:** 1821 1822```ts 1823import { RenderNode } from '@kit.ArkUI'; 1824import { common2D, drawing } from '@kit.ArkGraphics2D'; 1825 1826class DrawingRenderNode extends RenderNode { 1827 draw(context : DrawContext) { 1828 const canvas = context.canvas; 1829 const pen = new drawing.Pen(); 1830 pen.setStrokeWidth(5); 1831 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1832 canvas.attachPen(pen); 1833 canvas.drawRect({ left : 0, right : 10, top : 0, bottom : 10 }); 1834 canvas.detachPen(); 1835 } 1836} 1837``` 1838 1839### drawRect<sup>12+</sup> 1840 1841drawRect(left: number, top: number, right: number, bottom: number): void 1842 1843绘制一个矩形,默认使用黑色填充。性能优于[drawRect](#drawrect)接口,推荐使用本接口。 1844 1845**系统能力:** SystemCapability.Graphics.Drawing 1846 1847**参数:** 1848 1849| 参数名 | 类型 | 必填 | 说明 | 1850| ------ | ------ | ---- | -------------- | 1851| left | number | 是 | 矩形的左上角x轴坐标,该参数为浮点数。 | 1852| top | number | 是 | 矩形的左上角y轴坐标,该参数为浮点数。 | 1853| right | number | 是 | 矩形的右下角x轴坐标,该参数为浮点数。 | 1854| bottom | number | 是 | 矩形的右下角y轴坐标,该参数为浮点数。 | 1855 1856**错误码:** 1857 1858以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1859 1860| 错误码ID | 错误信息 | 1861| ------- | --------------------------------------------| 1862| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1863 1864**示例:** 1865 1866```ts 1867import { RenderNode } from '@kit.ArkUI'; 1868import { drawing } from '@kit.ArkGraphics2D'; 1869 1870class DrawingRenderNode extends RenderNode { 1871 1872 draw(context : DrawContext) { 1873 const canvas = context.canvas; 1874 const pen = new drawing.Pen(); 1875 pen.setStrokeWidth(5); 1876 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 1877 canvas.attachPen(pen); 1878 canvas.drawRect(0, 0, 10, 10); 1879 canvas.detachPen(); 1880 } 1881} 1882``` 1883 1884### drawRoundRect<sup>12+</sup> 1885 1886drawRoundRect(roundRect: RoundRect): void 1887 1888画一个圆角矩形。 1889 1890**系统能力:** SystemCapability.Graphics.Drawing 1891 1892**参数** 1893 1894| 参数名 | 类型 | 必填 | 说明 | 1895| ---------- | ----------------------- | ---- | ------------ | 1896| roundRect | [RoundRect](#roundrect12) | 是 | 圆角矩形对象。| 1897 1898**错误码:** 1899 1900以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1901 1902| 错误码ID | 错误信息 | 1903| ------- | --------------------------------------------| 1904| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1905 1906**示例:** 1907 1908```ts 1909import { RenderNode } from '@kit.ArkUI'; 1910import { common2D, drawing } from '@kit.ArkGraphics2D'; 1911 1912class DrawingRenderNode extends RenderNode { 1913 draw(context : DrawContext) { 1914 const canvas = context.canvas; 1915 let rect: common2D.Rect = { left : 100, top : 100, right : 400, bottom : 500 }; 1916 let roundRect = new drawing.RoundRect(rect, 10, 10); 1917 canvas.drawRoundRect(roundRect); 1918 } 1919} 1920``` 1921 1922### drawNestedRoundRect<sup>12+</sup> 1923 1924drawNestedRoundRect(outer: RoundRect, inner: RoundRect): void 1925 1926绘制两个嵌套的圆角矩形,外部矩形边界必须包含内部矩形边界,否则无绘制效果。 1927 1928**系统能力:** SystemCapability.Graphics.Drawing 1929 1930**参数** 1931 1932| 参数名 | 类型 | 必填 | 说明 | 1933| ------ | ----------------------- | ---- | ------------ | 1934| outer | [RoundRect](#roundrect12) | 是 | 圆角矩形对象,表示外部圆角矩形边界。| 1935| inner | [RoundRect](#roundrect12) | 是 | 圆角矩形对象,表示内部圆角矩形边界。| 1936 1937**错误码:** 1938 1939以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1940 1941| 错误码ID | 错误信息 | 1942| ------- | --------------------------------------------| 1943| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1944 1945**示例:** 1946 1947```ts 1948import { RenderNode } from '@kit.ArkUI'; 1949import { common2D, drawing } from '@kit.ArkGraphics2D'; 1950 1951class DrawingRenderNode extends RenderNode { 1952 draw(context : DrawContext) { 1953 const canvas = context.canvas; 1954 let inRect: common2D.Rect = { left : 200, top : 200, right : 400, bottom : 500 }; 1955 let outRect: common2D.Rect = { left : 100, top : 100, right : 400, bottom : 500 }; 1956 let outRoundRect = new drawing.RoundRect(outRect, 10, 10); 1957 let inRoundRect = new drawing.RoundRect(inRect, 10, 10); 1958 canvas.drawNestedRoundRect(outRoundRect, inRoundRect); 1959 canvas.drawRoundRect(outRoundRect); 1960 } 1961} 1962``` 1963 1964### drawBackground<sup>12+</sup> 1965 1966drawBackground(brush: Brush): void 1967 1968使用画刷填充画布的可绘制区域。 1969 1970**系统能力:** SystemCapability.Graphics.Drawing 1971 1972**参数** 1973 1974| 参数名 | 类型 | 必填 | 说明 | 1975| ------ | --------------- | ---- | ---------- | 1976| brush | [Brush](#brush) | 是 | 画刷对象。 | 1977 1978**错误码:** 1979 1980以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 1981 1982| 错误码ID | 错误信息 | 1983| ------- | --------------------------------------------| 1984| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 1985 1986**示例:** 1987 1988```ts 1989import { RenderNode } from '@kit.ArkUI'; 1990import { common2D, drawing } from '@kit.ArkGraphics2D'; 1991 1992class DrawingRenderNode extends RenderNode { 1993 draw(context : DrawContext) { 1994 const canvas = context.canvas; 1995 const brush = new drawing.Brush(); 1996 const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 1997 brush.setColor(color); 1998 canvas.drawBackground(brush); 1999 } 2000} 2001``` 2002 2003### drawShadow<sup>12+</sup> 2004 2005drawShadow(path: Path, planeParams: common2D.Point3d, devLightPos: common2D.Point3d, lightRadius: number, ambientColor: common2D.Color, spotColor: common2D.Color, flag: ShadowFlag) : void 2006 2007绘制射灯类型阴影,使用路径描述环境光阴影的轮廓。 2008 2009**系统能力:** SystemCapability.Graphics.Drawing 2010 2011**参数:** 2012 2013| 参数名 | 类型 | 必填 | 说明 | 2014| ------------ | ---------------------------------------- | ---- | ---------- | 2015| path | [Path](#path) | 是 | 路径对象,可生成阴影。 | 2016| planeParams | [common2D.Point3d](js-apis-graphics-common2D.md#point3d12) | 是 | 表示一个三维向量,用于计算遮挡物相对于画布在z轴上的偏移量,其值取决于x与y坐标。 | 2017| devLightPos | [common2D.Point3d](js-apis-graphics-common2D.md#point3d12) | 是 | 光线相对于画布的位置。 | 2018| lightRadius | number | 是 | 圆形灯半径,该参数为浮点数。 | 2019| ambientColor | [common2D.Color](js-apis-graphics-common2D.md#color) | 是 | 环境阴影颜色。 | 2020| spotColor | [common2D.Color](js-apis-graphics-common2D.md#color) | 是 | 点阴影颜色。 | 2021| flag | [ShadowFlag](#shadowflag12) | 是 | 阴影标志枚举。 | 2022 2023**错误码:** 2024 2025以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 2026 2027| 错误码ID | 错误信息 | 2028| ------- | --------------------------------------------| 2029| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 2030 2031**示例:** 2032 2033```ts 2034import { RenderNode } from '@kit.ArkUI'; 2035import { common2D, drawing } from '@kit.ArkGraphics2D'; 2036 2037class DrawingRenderNode extends RenderNode { 2038 draw(context : DrawContext) { 2039 const canvas = context.canvas; 2040 const path = new drawing.Path(); 2041 path.addCircle(100, 200, 100, drawing.PathDirection.CLOCKWISE); 2042 let pen = new drawing.Pen(); 2043 pen.setAntiAlias(true); 2044 let pen_color : common2D.Color = { alpha: 0xFF, red: 0xFF, green: 0x00, blue: 0x00 }; 2045 pen.setColor(pen_color); 2046 pen.setStrokeWidth(10.0); 2047 canvas.attachPen(pen); 2048 let brush = new drawing.Brush(); 2049 let brush_color : common2D.Color = { alpha: 0xFF, red: 0x00, green: 0xFF, blue: 0x00 }; 2050 brush.setColor(brush_color); 2051 canvas.attachBrush(brush); 2052 let point1 : common2D.Point3d = {x: 100, y: 80, z:80}; 2053 let point2 : common2D.Point3d = {x: 200, y: 10, z:40}; 2054 let color1 : common2D.Color = {alpha: 0xFF, red:0, green:0, blue:0xFF}; 2055 let color2 : common2D.Color = {alpha: 0xFF, red:0xFF, green:0, blue:0}; 2056 let shadowFlag : drawing.ShadowFlag = drawing.ShadowFlag.ALL; 2057 canvas.drawShadow(path, point1, point2, 30, color1, color2, shadowFlag); 2058 } 2059} 2060``` 2061 2062### drawShadow<sup>18+</sup> 2063 2064drawShadow(path: Path, planeParams: common2D.Point3d, devLightPos: common2D.Point3d, lightRadius: number, ambientColor: common2D.Color | number, spotColor: common2D.Color | number, flag: ShadowFlag) : void 2065 2066绘制射灯类型阴影,使用路径描述环境光阴影的轮廓。 2067 2068**系统能力:** SystemCapability.Graphics.Drawing 2069 2070**参数:** 2071 2072| 参数名 | 类型 | 必填 | 说明 | 2073| ------------ | ---------------------------------------- | ---- | ---------- | 2074| path | [Path](#path) | 是 | 路径对象,可生成阴影。 | 2075| planeParams | [common2D.Point3d](js-apis-graphics-common2D.md#point3d12) | 是 | 表示一个三维向量,用于计算z轴方向的偏移量。 | 2076| devLightPos | [common2D.Point3d](js-apis-graphics-common2D.md#point3d12) | 是 | 光线相对于画布的位置。 | 2077| lightRadius | number | 是 | 圆形灯半径,该参数为浮点数。 | 2078| ambientColor |[common2D.Color](js-apis-graphics-common2D.md#color) \| number | 是 | 环境阴影颜色,可以用16进制ARGB格式的32位无符号整数表示。 | 2079| spotColor |[common2D.Color](js-apis-graphics-common2D.md#color) \| number | 是 | 点阴影颜色,可以用16进制ARGB格式的32位无符号整数表示。 | 2080| flag | [ShadowFlag](#shadowflag12) | 是 | 阴影标志枚举。 | 2081 2082**错误码:** 2083 2084以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 2085 2086| 错误码ID | 错误信息 | 2087| ------- | --------------------------------------------| 2088| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 2089 2090**示例:** 2091 2092```ts 2093import { RenderNode } from '@kit.ArkUI'; 2094import { common2D, drawing } from '@kit.ArkGraphics2D'; 2095 2096class DrawingRenderNode extends RenderNode { 2097 draw(context : DrawContext) { 2098 const canvas = context.canvas; 2099 const path = new drawing.Path(); 2100 path.addCircle(300, 600, 100, drawing.PathDirection.CLOCKWISE); 2101 let point1 : common2D.Point3d = {x: 100, y: 80, z:80}; 2102 let point2 : common2D.Point3d = {x: 200, y: 10, z:40}; 2103 let shadowFlag : drawing.ShadowFlag = drawing.ShadowFlag.ALL; 2104 canvas.drawShadow(path, point1, point2, 30, 0xFF0000FF, 0xFFFF0000, shadowFlag); 2105 } 2106} 2107``` 2108 2109### getLocalClipBounds<sup>12+</sup> 2110 2111getLocalClipBounds(): common2D.Rect 2112 2113获取画布裁剪区域的边界。 2114 2115**系统能力:** SystemCapability.Graphics.Drawing 2116 2117**返回值:** 2118 2119| 类型 | 说明 | 2120| ---------------------------------------- | -------- | 2121| [common2D.Rect](js-apis-graphics-common2D.md#rect) | 返回画布裁剪区域的矩形边界。 | 2122 2123**示例:** 2124 2125```ts 2126import { RenderNode } from '@kit.ArkUI'; 2127import { common2D, drawing } from '@kit.ArkGraphics2D'; 2128 2129class DrawingRenderNode extends RenderNode { 2130 draw(context : DrawContext) { 2131 const canvas = context.canvas; 2132 let clipRect: common2D.Rect = { 2133 left : 150, top : 150, right : 300, bottom : 400 2134 }; 2135 canvas.clipRect(clipRect,drawing.ClipOp.DIFFERENCE, true); 2136 console.info("test rect.left: " + clipRect.left); 2137 console.info("test rect.top: " + clipRect.top); 2138 console.info("test rect.right: " + clipRect.right); 2139 console.info("test rect.bottom: " + clipRect.bottom); 2140 canvas.getLocalClipBounds(); 2141 } 2142} 2143``` 2144 2145### getTotalMatrix<sup>12+</sup> 2146 2147getTotalMatrix(): Matrix 2148 2149获取画布矩阵。 2150 2151**系统能力:** SystemCapability.Graphics.Drawing 2152 2153**返回值:** 2154 2155| 类型 | 说明 | 2156| ----------------- | -------- | 2157| [Matrix](#matrix12) |返回画布矩阵。 | 2158 2159**示例:** 2160 2161```ts 2162import { RenderNode } from '@kit.ArkUI'; 2163import { drawing } from '@kit.ArkGraphics2D'; 2164 2165class DrawingRenderNode extends RenderNode { 2166 draw(context : DrawContext) { 2167 const canvas = context.canvas; 2168 let matrix = new drawing.Matrix(); 2169 matrix.setMatrix([5, 0, 0, 0, 1, 1, 0, 0, 1]); 2170 canvas.setMatrix(matrix); 2171 let matrixResult =canvas.getTotalMatrix(); 2172 } 2173} 2174``` 2175 2176### drawCircle 2177 2178drawCircle(x: number, y: number, radius: number): void 2179 2180绘制一个圆形。如果半径小于等于零,则不绘制。默认使用黑色填充。 2181 2182**系统能力:** SystemCapability.Graphics.Drawing 2183 2184**参数:** 2185 2186| 参数名 | 类型 | 必填 | 说明 | 2187| ------ | ------ | ---- | ------------------- | 2188| x | number | 是 | 圆心的x坐标,该参数为浮点数。 | 2189| y | number | 是 | 圆心的y坐标,该参数为浮点数。 | 2190| radius | number | 是 | 圆的半径,大于0的浮点数。 | 2191 2192**错误码:** 2193 2194以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 2195 2196| 错误码ID | 错误信息 | 2197| ------- | --------------------------------------------| 2198| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 2199 2200**示例:** 2201 2202```ts 2203import { RenderNode } from '@kit.ArkUI'; 2204import { drawing } from '@kit.ArkGraphics2D'; 2205 2206class DrawingRenderNode extends RenderNode { 2207 draw(context : DrawContext) { 2208 const canvas = context.canvas; 2209 const pen = new drawing.Pen(); 2210 pen.setStrokeWidth(5); 2211 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2212 canvas.attachPen(pen); 2213 canvas.drawCircle(10, 10, 2); 2214 canvas.detachPen(); 2215 } 2216} 2217``` 2218 2219### drawImage 2220 2221drawImage(pixelmap: image.PixelMap, left: number, top: number, samplingOptions?: SamplingOptions): void 2222 2223画一张图片,图片的左上角坐标为(left, top)。 2224 2225**系统能力:** SystemCapability.Graphics.Drawing 2226 2227**参数:** 2228 2229| 参数名 | 类型 | 必填 | 说明 | 2230| -------- | -------------------------------------------- | ---- | ------------------------------- | 2231| pixelmap | [image.PixelMap](../apis-image-kit/arkts-apis-image-PixelMap.md) | 是 | 图片的PixelMap。 | 2232| left | number | 是 | 图片位置的左上角x轴坐标,该参数为浮点数。 | 2233| top | number | 是 | 图片位置的左上角y轴坐标,该参数为浮点数。 | 2234| samplingOptions<sup>12+</sup> | [SamplingOptions](#samplingoptions12) | 否 | 采样选项对象,默认为不使用任何参数构造的原始采样选项对象。 | 2235 2236**错误码:** 2237 2238以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 2239 2240| 错误码ID | 错误信息 | 2241| ------- | --------------------------------------------| 2242| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2243 2244**示例:** 2245 2246```ts 2247import { RenderNode } from '@kit.ArkUI'; 2248import { image } from '@kit.ImageKit'; 2249import { drawing } from '@kit.ArkGraphics2D'; 2250 2251class DrawingRenderNode extends RenderNode { 2252 pixelMap: image.PixelMap | null = null; 2253 2254 async draw(context : DrawContext) { 2255 const canvas = context.canvas; 2256 let options = new drawing.SamplingOptions(drawing.FilterMode.FILTER_MODE_NEAREST); 2257 if (this.pixelMap != null) { 2258 canvas.drawImage(this.pixelMap, 0, 0, options); 2259 } 2260 } 2261} 2262``` 2263 2264### drawImageRect<sup>12+</sup> 2265 2266drawImageRect(pixelmap: image.PixelMap, dstRect: common2D.Rect, samplingOptions?: SamplingOptions): void 2267 2268将图片绘制到画布的指定区域上。 2269 2270**系统能力:** SystemCapability.Graphics.Drawing 2271 2272**参数:** 2273 2274| 参数名 | 类型 | 必填 | 说明 | 2275| -------- | -------------------------------------------- | ---- | ------------------------------- | 2276| pixelmap | [image.PixelMap](../apis-image-kit/arkts-apis-image-PixelMap.md) | 是 | 图片的PixelMap。 | 2277| dstRect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 矩形对象,用于指定画布上图片的绘制区域。 | 2278| samplingOptions | [SamplingOptions](#samplingoptions12) | 否 | 采样选项对象,默认为不使用任何参数构造的原始采样选项对象。 | 2279 2280**错误码:** 2281 2282以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 2283 2284| 错误码ID | 错误信息 | 2285| ------- | --------------------------------------------| 2286| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2287 2288**示例:** 2289 2290```ts 2291import { RenderNode } from '@kit.ArkUI'; 2292import { image } from '@kit.ImageKit'; 2293import { common2D, drawing } from '@kit.ArkGraphics2D'; 2294 2295class DrawingRenderNode extends RenderNode { 2296pixelMap: image.PixelMap | null = null; 2297 draw(context : DrawContext) { 2298 const canvas = context.canvas; 2299 let pen = new drawing.Pen(); 2300 canvas.attachPen(pen); 2301 let rect: common2D.Rect = { left: 0, top: 0, right: 200, bottom: 200 }; 2302 canvas.drawImageRect(this.pixelMap, rect); 2303 canvas.detachPen(); 2304 } 2305} 2306``` 2307 2308### drawImageRectWithSrc<sup>12+</sup> 2309 2310drawImageRectWithSrc(pixelmap: image.PixelMap, srcRect: common2D.Rect, dstRect: common2D.Rect, samplingOptions?: SamplingOptions, constraint?: SrcRectConstraint): void 2311 2312将图片的指定区域绘制到画布的指定区域。 2313 2314**系统能力:** SystemCapability.Graphics.Drawing 2315 2316**参数:** 2317 2318| 参数名 | 类型 | 必填 | 说明 | 2319| -------- | -------------------------------------------- | ---- | ------------------------------- | 2320| pixelmap | [image.PixelMap](../apis-image-kit/arkts-apis-image-PixelMap.md) | 是 | 图片的PixelMap。 | 2321| srcRect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 矩形对象,用于指定图片的待绘制区域。 | 2322| dstRect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 矩形对象,用于指定画布上图片的绘制区域。 | 2323| samplingOptions | [SamplingOptions](#samplingoptions12) | 否 | 采样选项对象,默认为不使用任何参数构造的原始采样选项对象。 | 2324| constraint | [SrcRectConstraint](#srcrectconstraint12) | 否 | 源矩形区域约束类型,默认为STRICT。 | 2325 2326**错误码:** 2327 2328以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 2329 2330| 错误码ID | 错误信息 | 2331| ------- | --------------------------------------------| 2332| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2333 2334**示例:** 2335 2336```ts 2337import { RenderNode } from '@kit.ArkUI'; 2338import { image } from '@kit.ImageKit'; 2339import { common2D, drawing } from '@kit.ArkGraphics2D'; 2340 2341class DrawingRenderNode extends RenderNode { 2342pixelMap: image.PixelMap | null = null; 2343 draw(context : DrawContext) { 2344 const canvas = context.canvas; 2345 let pen = new drawing.Pen(); 2346 canvas.attachPen(pen); 2347 let srcRect: common2D.Rect = { left: 0, top: 0, right: 100, bottom: 100 }; 2348 let dstRect: common2D.Rect = { left: 100, top: 100, right: 200, bottom: 200 }; 2349 canvas.drawImageRectWithSrc(this.pixelMap, srcRect, dstRect); 2350 canvas.detachPen(); 2351 } 2352} 2353``` 2354 2355### drawColor 2356 2357drawColor(color: common2D.Color, blendMode?: BlendMode): void 2358 2359使用指定颜色并按照指定的[BlendMode](#blendmode)对画布当前可绘制区域进行填充。 2360 2361**系统能力:** SystemCapability.Graphics.Drawing 2362 2363**参数:** 2364 2365| 参数名 | 类型 | 必填 | 说明 | 2366| --------- | ---------------------------------------------------- | ---- | -------------------------------- | 2367| color | [common2D.Color](js-apis-graphics-common2D.md#color) | 是 | ARGB格式的颜色,每个颜色通道的值是0到255之间的整数。 | 2368| blendMode | [BlendMode](#blendmode) | 否 | 颜色混合模式,默认模式为SRC_OVER。 | 2369 2370**错误码:** 2371 2372以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 2373 2374| 错误码ID | 错误信息 | 2375| ------- | --------------------------------------------| 2376| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 2377 2378**示例:** 2379 2380```ts 2381import { RenderNode } from '@kit.ArkUI'; 2382import { common2D, drawing } from '@kit.ArkGraphics2D'; 2383 2384class DrawingRenderNode extends RenderNode { 2385 draw(context : DrawContext) { 2386 const canvas = context.canvas; 2387 let color: common2D.Color = { 2388 alpha : 255, 2389 red: 0, 2390 green: 10, 2391 blue: 10 2392 } 2393 canvas.drawColor(color, drawing.BlendMode.CLEAR); 2394 } 2395} 2396``` 2397 2398### drawColor<sup>12+</sup> 2399 2400drawColor(alpha: number, red: number, green: number, blue: number, blendMode?: BlendMode): void 2401 2402使用指定颜色并按照指定的[BlendMode](#blendmode)对画布当前可绘制区域进行填充。性能优于[drawColor](#drawcolor)接口,推荐使用本接口。 2403 2404**系统能力:** SystemCapability.Graphics.Drawing 2405 2406**参数:** 2407 2408| 参数名 | 类型 | 必填 | 说明 | 2409| --------- | ----------------------- | ---- | ------------------------------------------------- | 2410| alpha | number | 是 | ARGB格式颜色的透明度通道值,该参数是0到255之间的整数,传入范围内的浮点数会向下取整。 | 2411| red | number | 是 | ARGB格式颜色的红色通道值,该参数是0到255之间的整数,传入范围内的浮点数会向下取整。 | 2412| green | number | 是 | ARGB格式颜色的绿色通道值,该参数是0到255之间的整数,传入范围内的浮点数会向下取整。 | 2413| blue | number | 是 | ARGB格式颜色的蓝色通道值,该参数是0到255之间的整数,传入范围内的浮点数会向下取整。 | 2414| blendMode | [BlendMode](#blendmode) | 否 | 颜色混合模式,默认模式为SRC_OVER。 | 2415 2416**错误码:** 2417 2418以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 2419 2420| 错误码ID | 错误信息 | 2421| ------- | --------------------------------------------| 2422| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 2423 2424**示例:** 2425 2426```ts 2427import { RenderNode } from '@kit.ArkUI'; 2428import { drawing } from '@kit.ArkGraphics2D'; 2429 2430class DrawingRenderNode extends RenderNode { 2431 draw(context : DrawContext) { 2432 const canvas = context.canvas; 2433 canvas.drawColor(255, 0, 10, 10, drawing.BlendMode.CLEAR); 2434 } 2435} 2436``` 2437 2438### drawColor<sup>18+</sup> 2439 2440drawColor(color: number, blendMode?: BlendMode): void 2441 2442使用指定颜色并按照指定的[BlendMode](#blendmode)对画布当前可绘制区域进行填充。 2443 2444**系统能力:** SystemCapability.Graphics.Drawing 2445 2446**参数:** 2447 2448| 参数名 | 类型 | 必填 | 说明 | 2449| --------- | ---------------------------------------------------- | ---- | -------------------------------- | 2450| color | number | 是 | 16进制ARGB格式的颜色。 | 2451| blendMode | [BlendMode](#blendmode) | 否 | 颜色混合模式,默认模式为SRC_OVER。 | 2452 2453**错误码:** 2454 2455以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 2456 2457| 错误码ID | 错误信息 | 2458| ------- | --------------------------------------------| 2459| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 2460 2461**示例:** 2462 2463```ts 2464import { RenderNode } from '@kit.ArkUI'; 2465import { drawing } from '@kit.ArkGraphics2D'; 2466 2467class DrawingRenderNode extends RenderNode { 2468 draw(context : DrawContext) { 2469 const canvas = context.canvas; 2470 canvas.drawColor(0xff000a0a, drawing.BlendMode.CLEAR); 2471 } 2472} 2473``` 2474 2475### drawPixelMapMesh<sup>12+</sup> 2476 2477drawPixelMapMesh(pixelmap: image.PixelMap, meshWidth: number, meshHeight: number, vertices: Array\<number>, vertOffset: number, colors: Array\<number>, colorOffset: number): void 2478 2479在网格上绘制像素图,网格均匀分布在像素图上。 2480 2481**系统能力:** SystemCapability.Graphics.Drawing 2482 2483**参数:** 2484 2485| 参数名 | 类型 | 必填 | 说明 | 2486| ----------- | ------------- | ---- | ------------------------------- | 2487| pixelmap | [image.PixelMap](../apis-image-kit/arkts-apis-image-PixelMap.md) | 是 | 用于绘制网格的像素图。 | 2488| meshWidth | number | 是 | 网格中的列数,大于0的整数。 | 2489| meshHeight | number | 是 | 网格中的行数,大于0的整数。 | 2490| vertices | Array\<number> | 是 | 顶点数组,指定网格的绘制位置,浮点数组,大小必须为((meshWidth+1) * (meshHeight+1) + vertOffset) * 2。 | 2491| vertOffset | number | 是 | 绘图前要跳过的vert元素数,大于等于0的整数。 | 2492| colors | Array\<number> | 是 | 颜色数组,在每个顶点指定一种颜色,整数数组,可为null,大小必须为(meshWidth+1) * (meshHeight+1) + colorOffset。 | 2493| colorOffset | number | 是 | 绘制前要跳过的颜色元素数,大于等于0的整数。 | 2494 2495**错误码:** 2496 2497以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 2498 2499| 错误码ID | 错误信息 | 2500| ------- | --------------------------------------------| 2501| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2502 2503**示例:** 2504 2505```ts 2506import { RenderNode } from '@kit.ArkUI'; 2507import { image } from '@kit.ImageKit'; 2508import { drawing } from '@kit.ArkGraphics2D'; 2509 2510class DrawingRenderNode extends RenderNode { 2511 pixelMap: image.PixelMap | null = null; 2512 2513 async draw(context : DrawContext) { 2514 const canvas = context.canvas; 2515 if (this.pixelMap != null) { 2516 const brush = new drawing.Brush(); // 只支持brush,使用pen没有绘制效果。 2517 canvas.attachBrush(brush); 2518 let verts : Array<number> = [0, 0, 50, 0, 410, 0, 0, 180, 50, 180, 410, 180, 0, 360, 50, 360, 410, 360]; // 18 2519 canvas.drawPixelMapMesh(this.pixelMap, 2, 2, verts, 0, null, 0); 2520 canvas.detachBrush(); 2521 } 2522 } 2523} 2524``` 2525 2526### clear<sup>12+</sup> 2527 2528clear(color: common2D.Color): void 2529 2530使用指定颜色填充画布上的裁剪区域。效果等同于[drawColor](#drawcolor)。 2531 2532**系统能力:** SystemCapability.Graphics.Drawing 2533 2534**参数:** 2535 2536| 参数名 | 类型 | 必填 | 说明 | 2537| --------- | ---------------------------------------------------- | ---- | -------------------------------- | 2538| color | [common2D.Color](js-apis-graphics-common2D.md#color) | 是 | ARGB格式的颜色,每个颜色通道的值是0到255之间的整数。 | 2539 2540**错误码:** 2541 2542以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 2543 2544| 错误码ID | 错误信息 | 2545| ------- | --------------------------------------------| 2546| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2547 2548**示例:** 2549 2550```ts 2551import { RenderNode } from '@kit.ArkUI'; 2552import { common2D, drawing } from '@kit.ArkGraphics2D'; 2553 2554class DrawingRenderNode extends RenderNode { 2555 draw(context : DrawContext) { 2556 const canvas = context.canvas; 2557 let color: common2D.Color = {alpha: 255, red: 255, green: 0, blue: 0}; 2558 canvas.clear(color); 2559 } 2560} 2561``` 2562 2563### clear<sup>18+</sup> 2564 2565clear(color: common2D.Color | number): void 2566 2567使用指定颜色填充画布上的裁剪区域。 2568 2569**系统能力:** SystemCapability.Graphics.Drawing 2570 2571**参数:** 2572 2573| 参数名 | 类型 | 必填 | 说明 | 2574| --------- | ---------------------------------------------------- | ---- | -------------------------------- | 2575| color | [common2D.Color](js-apis-graphics-common2D.md#color) \| number| 是 | 颜色,可以用16进制ARGB格式的无符号整数表示。 | 2576 2577**示例:** 2578 2579```ts 2580import { RenderNode } from '@kit.ArkUI'; 2581import { drawing } from '@kit.ArkGraphics2D'; 2582 2583class DrawingRenderNode extends RenderNode { 2584 draw(context : DrawContext) { 2585 const canvas = context.canvas; 2586 let color: number = 0xffff0000; 2587 canvas.clear(color); 2588 } 2589} 2590``` 2591 2592### getWidth<sup>12+</sup> 2593 2594getWidth(): number 2595 2596获取画布的宽度。 2597 2598**系统能力:** SystemCapability.Graphics.Drawing 2599 2600**返回值:** 2601 2602| 类型 | 必填 | 说明 | 2603| ------ | ---- | -------------- | 2604| number | 是 | 返回画布的宽度,该参数为浮点数。 | 2605 2606**示例:** 2607 2608```ts 2609import { RenderNode } from '@kit.ArkUI'; 2610import { drawing } from '@kit.ArkGraphics2D'; 2611 2612class DrawingRenderNode extends RenderNode { 2613 draw(context : DrawContext) { 2614 const canvas = context.canvas; 2615 let width = canvas.getWidth(); 2616 console.info('get canvas width:' + width); 2617 } 2618} 2619``` 2620 2621### getHeight<sup>12+</sup> 2622 2623getHeight(): number 2624 2625获取画布的高度。 2626 2627**系统能力:** SystemCapability.Graphics.Drawing 2628 2629**返回值:** 2630 2631| 类型 | 必填 | 说明 | 2632| ------ | ---- | -------------- | 2633| number | 是 | 返回画布的高度,该参数为浮点数。 | 2634 2635**示例:** 2636 2637```ts 2638import { RenderNode } from '@kit.ArkUI'; 2639import { drawing } from '@kit.ArkGraphics2D'; 2640 2641class DrawingRenderNode extends RenderNode { 2642 draw(context : DrawContext) { 2643 const canvas = context.canvas; 2644 let height = canvas.getHeight(); 2645 console.log('get canvas height:' + height); 2646 } 2647} 2648``` 2649 2650### drawOval<sup>12+</sup> 2651 2652drawOval(oval: common2D.Rect): void 2653 2654在画布上绘制一个椭圆,椭圆的形状和位置由椭圆的外切矩形给出。 2655 2656**系统能力:** SystemCapability.Graphics.Drawing 2657 2658**参数** 2659 2660| 参数名 | 类型 | 必填 | 说明 | 2661| ------ | -------------------------------------------------- | ---- | -------------- | 2662| oval | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 矩形区域,该矩形的内切椭圆即为待绘制椭圆。 | 2663 2664**错误码:** 2665 2666以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 2667 2668| 错误码ID | 错误信息 | 2669| ------- | --------------------------------------------| 2670| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2671 2672**示例:** 2673 2674```ts 2675import { RenderNode } from '@kit.ArkUI'; 2676import { common2D, drawing } from '@kit.ArkGraphics2D'; 2677 2678class DrawingRenderNode extends RenderNode { 2679 draw(context : DrawContext) { 2680 const canvas = context.canvas; 2681 const pen = new drawing.Pen(); 2682 pen.setStrokeWidth(5); 2683 const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 2684 pen.setColor(color); 2685 canvas.attachPen(pen); 2686 const rect: common2D.Rect = {left:100, top:50, right:400, bottom:500}; 2687 canvas.drawOval(rect); 2688 canvas.detachPen(); 2689 } 2690} 2691``` 2692 2693### drawArc<sup>12+</sup> 2694 2695drawArc(arc: common2D.Rect, startAngle: number, sweepAngle: number): void 2696 2697在画布上绘制圆弧。该方法允许指定起始角度、扫描角度。当扫描角度的绝对值大于360度时,则绘制椭圆。 2698 2699**系统能力:** SystemCapability.Graphics.Drawing 2700 2701**参数** 2702 2703| 参数名 | 类型 | 必填 | 说明 | 2704| ------ | -------------------------------------------------- | ---- | -------------- | 2705| arc | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 包含要绘制的圆弧的椭圆的矩形边界。 | 2706| startAngle | number | 是 | 弧的起始角度,单位为度,该参数为浮点数。0度时起始点位于椭圆的右端点,正数时以顺时针方向放置起始点,负数时以逆时针方向放置起始点。 | 2707| sweepAngle | number | 是 | 弧的扫描角度,单位为度,该参数为浮点数。为正数时顺时针扫描,为负数时逆时针扫描。它的有效范围在-360度到360度之间,当绝对值大于360度时,该方法绘制的是一个椭圆。 | 2708 2709**错误码:** 2710 2711以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 2712 2713| 错误码ID | 错误信息 | 2714| ------- | --------------------------------------------| 2715| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2716 2717**示例:** 2718 2719```ts 2720import { RenderNode } from '@kit.ArkUI'; 2721import { common2D, drawing } from '@kit.ArkGraphics2D'; 2722 2723class DrawingRenderNode extends RenderNode { 2724 draw(context : DrawContext) { 2725 const canvas = context.canvas; 2726 const pen = new drawing.Pen(); 2727 pen.setStrokeWidth(5); 2728 const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 2729 pen.setColor(color); 2730 canvas.attachPen(pen); 2731 const rect: common2D.Rect = {left:100, top:50, right:400, bottom:200}; 2732 canvas.drawArc(rect, 90, 180); 2733 canvas.detachPen(); 2734 } 2735} 2736``` 2737 2738### drawPoint 2739 2740drawPoint(x: number, y: number): void 2741 2742绘制一个点。 2743 2744**系统能力:** SystemCapability.Graphics.Drawing 2745 2746**参数:** 2747 2748| 参数名 | 类型 | 必填 | 说明 | 2749| ------ | ------ | ---- | ------------------- | 2750| x | number | 是 | 点的x轴坐标,该参数为浮点数。 | 2751| y | number | 是 | 点的y轴坐标,该参数为浮点数。 | 2752 2753**错误码:** 2754 2755以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 2756 2757| 错误码ID | 错误信息 | 2758| ------- | --------------------------------------------| 2759| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2760 2761**示例:** 2762 2763```ts 2764import { RenderNode } from '@kit.ArkUI'; 2765import { drawing } from '@kit.ArkGraphics2D'; 2766 2767class DrawingRenderNode extends RenderNode { 2768 draw(context : DrawContext) { 2769 const canvas = context.canvas; 2770 const pen = new drawing.Pen(); 2771 pen.setStrokeWidth(5); 2772 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2773 canvas.attachPen(pen); 2774 canvas.drawPoint(10, 10); 2775 canvas.detachPen(); 2776 } 2777} 2778``` 2779 2780### drawPoints<sup>12+</sup> 2781 2782drawPoints(points: Array\<common2D.Point>, mode?: PointMode): void 2783 2784在画布上绘制一组点、线段或多边形。通过指定点的数组和绘制模式来决定绘制方式。 2785 2786**系统能力:** SystemCapability.Graphics.Drawing 2787 2788**参数:** 2789 2790| 参数名 | 类型 | 必填 | 说明 | 2791| ---- | ---------------------------------------- | ---- | --------- | 2792| points | Array\<[common2D.Point](js-apis-graphics-common2D.md#point12)> | 是 | 要绘制的点的数组。长度不能为0。 | 2793| mode | [PointMode](#pointmode12) | 否 | 绘制数组中的点的方式,默认为drawing.PointMode.POINTS。 | 2794 2795**错误码:** 2796 2797以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 2798 2799| 错误码ID | 错误信息 | 2800| ------- | --------------------------------------------| 2801| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.| 2802 2803**示例:** 2804 2805```ts 2806import { RenderNode } from '@kit.ArkUI'; 2807import { common2D, drawing } from '@kit.ArkGraphics2D'; 2808 2809class DrawingRenderNode extends RenderNode { 2810 draw(context : DrawContext) { 2811 const canvas = context.canvas; 2812 const pen = new drawing.Pen(); 2813 pen.setStrokeWidth(30); 2814 const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 2815 pen.setColor(color); 2816 canvas.attachPen(pen); 2817 canvas.drawPoints([{x: 100, y: 200}, {x: 150, y: 230}, {x: 200, y: 300}], drawing.PointMode.POINTS); 2818 canvas.detachPen(); 2819 } 2820} 2821``` 2822 2823### drawPath 2824 2825drawPath(path: Path): void 2826 2827绘制一个自定义路径,该路径包含了一组路径轮廓,每个路径轮廓可以是开放的或封闭的。 2828 2829**系统能力:** SystemCapability.Graphics.Drawing 2830 2831**参数:** 2832 2833| 参数名 | 类型 | 必填 | 说明 | 2834| ------ | ------------- | ---- | ------------------ | 2835| path | [Path](#path) | 是 | 要绘制的路径对象。 | 2836 2837**错误码:** 2838 2839以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 2840 2841| 错误码ID | 错误信息 | 2842| ------- | --------------------------------------------| 2843| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2844 2845**示例:** 2846 2847```ts 2848import { RenderNode } from '@kit.ArkUI'; 2849import { drawing } from '@kit.ArkGraphics2D'; 2850 2851class DrawingRenderNode extends RenderNode { 2852 draw(context : DrawContext) { 2853 const canvas = context.canvas; 2854 const pen = new drawing.Pen(); 2855 pen.setStrokeWidth(5); 2856 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2857 let path = new drawing.Path(); 2858 path.moveTo(10,10); 2859 path.cubicTo(10, 10, 10, 10, 15, 15); 2860 path.close(); 2861 canvas.attachPen(pen); 2862 canvas.drawPath(path); 2863 canvas.detachPen(); 2864 } 2865} 2866``` 2867 2868### drawLine 2869 2870drawLine(x0: number, y0: number, x1: number, y1: number): void 2871 2872画一条直线段,从指定的起点到终点。如果直线段的起点和终点是同一个点,无法绘制。 2873 2874**系统能力:** SystemCapability.Graphics.Drawing 2875 2876**参数:** 2877 2878| 参数名 | 类型 | 必填 | 说明 | 2879| ------ | ------ | ---- | ----------------------- | 2880| x0 | number | 是 | 线段起点的X坐标,该参数为浮点数。 | 2881| y0 | number | 是 | 线段起点的Y坐标,该参数为浮点数。 | 2882| x1 | number | 是 | 线段终点的X坐标,该参数为浮点数。 | 2883| y1 | number | 是 | 线段终点的Y坐标,该参数为浮点数。 | 2884 2885**错误码:** 2886 2887以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 2888 2889| 错误码ID | 错误信息 | 2890| ------- | --------------------------------------------| 2891| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2892 2893**示例:** 2894 2895```ts 2896import { RenderNode } from '@kit.ArkUI'; 2897import { drawing } from '@kit.ArkGraphics2D'; 2898 2899class DrawingRenderNode extends RenderNode { 2900 draw(context : DrawContext) { 2901 const canvas = context.canvas; 2902 const pen = new drawing.Pen(); 2903 pen.setStrokeWidth(5); 2904 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2905 canvas.attachPen(pen); 2906 canvas.drawLine(0, 0, 20, 20); 2907 canvas.detachPen(); 2908 } 2909} 2910``` 2911 2912### drawTextBlob 2913 2914drawTextBlob(blob: TextBlob, x: number, y: number): void 2915 2916绘制一段文字。若构造blob的字体不支持待绘制字符,则该部分字符无法绘制。 2917 2918**系统能力:** SystemCapability.Graphics.Drawing 2919 2920**参数:** 2921 2922| 参数名 | 类型 | 必填 | 说明 | 2923| ------ | --------------------- | ---- | ------------------------------------------ | 2924| blob | [TextBlob](#textblob) | 是 | TextBlob对象。 | 2925| x | number | 是 | 所绘制出的文字基线(下图蓝线)的左端点(下图红点)的横坐标,该参数为浮点数。 | 2926| y | number | 是 | 所绘制出的文字基线(下图蓝线)的左端点(下图红点)的纵坐标,该参数为浮点数。 | 2927 2928 2929 2930**错误码:** 2931 2932以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 2933 2934| 错误码ID | 错误信息 | 2935| ------- | --------------------------------------------| 2936| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 2937 2938**示例:** 2939 2940```ts 2941import { RenderNode } from '@kit.ArkUI'; 2942import { drawing } from '@kit.ArkGraphics2D'; 2943 2944class DrawingRenderNode extends RenderNode { 2945 draw(context : DrawContext) { 2946 const canvas = context.canvas; 2947 const brush = new drawing.Brush(); 2948 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2949 const font = new drawing.Font(); 2950 font.setSize(20); 2951 const textBlob = drawing.TextBlob.makeFromString("Hello, drawing", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 2952 canvas.attachBrush(brush); 2953 canvas.drawTextBlob(textBlob, 20, 20); 2954 canvas.detachBrush(); 2955 } 2956} 2957``` 2958 2959### drawSingleCharacter<sup>12+</sup> 2960 2961drawSingleCharacter(text: string, font: Font, x: number, y: number): void 2962 2963绘制单个字符。当前字型中的字体不支持待绘制字符时,退化到使用系统字体绘制字符。 2964 2965**系统能力:** SystemCapability.Graphics.Drawing 2966 2967**参数** 2968 2969| 参数名 | 类型 | 必填 | 说明 | 2970| ------ | ------------------- | ---- | ----------- | 2971| text | string | 是 | 待绘制的单个字符,字符串的长度必须为1。 | 2972| font | [Font](#font) | 是 | 字型对象。 | 2973| x | number | 是 | 所绘制出的字符基线(下图蓝线)的左端点(下图红点)的横坐标,该参数为浮点数。 | 2974| y | number | 是 | 所绘制出的字符基线(下图蓝线)的左端点(下图红点)的纵坐标,该参数为浮点数。 | 2975 2976 2977 2978**错误码:** 2979 2980以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 2981 2982| 错误码ID | 错误信息 | 2983| ------- | --------------------------------------------| 2984| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 2985 2986**示例:** 2987 2988```ts 2989import { RenderNode } from '@kit.ArkUI'; 2990import { drawing } from '@kit.ArkGraphics2D'; 2991 2992class DrawingRenderNode extends RenderNode { 2993 draw(context : DrawContext) { 2994 const canvas = context.canvas; 2995 const brush = new drawing.Brush(); 2996 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 2997 const font = new drawing.Font(); 2998 font.setSize(20); 2999 canvas.attachBrush(brush); 3000 canvas.drawSingleCharacter("你", font, 100, 100); 3001 canvas.drawSingleCharacter("好", font, 120, 100); 3002 canvas.detachBrush(); 3003 } 3004} 3005``` 3006 3007### drawRegion<sup>12+</sup> 3008 3009drawRegion(region: Region): void 3010 3011绘制一个区域。 3012 3013**系统能力:** SystemCapability.Graphics.Drawing 3014 3015**参数** 3016 3017| 参数名 | 类型 | 必填 | 说明 | 3018| ------ | ------------------- | ---- | ----------- | 3019| region | [Region](#region12) | 是 | 绘制的区域。 | 3020 3021**错误码:** 3022 3023以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 3024 3025| 错误码ID | 错误信息 | 3026| ------- | --------------------------------------------| 3027| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3028 3029**示例:** 3030 3031```ts 3032import { RenderNode } from '@kit.ArkUI'; 3033import { drawing } from '@kit.ArkGraphics2D'; 3034 3035class DrawingRenderNode extends RenderNode { 3036 draw(context : DrawContext) { 3037 const canvas = context.canvas; 3038 const pen = new drawing.Pen(); 3039 let region = new drawing.Region(); 3040 pen.setStrokeWidth(10); 3041 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 3042 canvas.attachPen(pen); 3043 region.setRect(100, 100, 400, 400); 3044 canvas.drawRegion(region); 3045 canvas.detachPen(); 3046 } 3047} 3048``` 3049 3050### attachPen 3051 3052attachPen(pen: Pen): void 3053 3054绑定画笔到画布上,在画布上进行绘制时,将使用画笔的样式去绘制图形形状的轮廓。 3055 3056> **说明:** 3057> 3058> 执行该方法后,若pen的效果发生改变并且开发者希望该变化生效于接下来的绘制动作,需要再次执行该方法以确保变化生效。 3059 3060**系统能力:** SystemCapability.Graphics.Drawing 3061 3062**参数:** 3063 3064| 参数名 | 类型 | 必填 | 说明 | 3065| ------ | ----------- | ---- | ---------- | 3066| pen | [Pen](#pen) | 是 | 画笔对象。 | 3067 3068**错误码:** 3069 3070以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 3071 3072| 错误码ID | 错误信息 | 3073| ------- | --------------------------------------------| 3074| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3075 3076**示例:** 3077 3078```ts 3079import { RenderNode } from '@kit.ArkUI'; 3080import { drawing } from '@kit.ArkGraphics2D'; 3081 3082class DrawingRenderNode extends RenderNode { 3083 draw(context : DrawContext) { 3084 const canvas = context.canvas; 3085 const pen = new drawing.Pen(); 3086 pen.setStrokeWidth(5); 3087 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3088 canvas.attachPen(pen); 3089 canvas.drawRect({ left : 0, right : 10, top : 0, bottom : 10 }); 3090 canvas.detachPen(); 3091 } 3092} 3093``` 3094 3095### attachBrush 3096 3097attachBrush(brush: Brush): void 3098 3099绑定画刷到画布上,在画布上进行绘制时,将使用画刷的样式对绘制图形形状的内部进行填充。 3100 3101> **说明:** 3102> 3103> 执行该方法后,若brush的效果发生改变并且开发者希望该变化生效于接下来的绘制动作,需要再次执行该方法以确保变化生效。 3104 3105**系统能力:** SystemCapability.Graphics.Drawing 3106 3107**参数:** 3108 3109| 参数名 | 类型 | 必填 | 说明 | 3110| ------ | --------------- | ---- | ---------- | 3111| brush | [Brush](#brush) | 是 | 画刷对象。 | 3112 3113**错误码:** 3114 3115以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 3116 3117| 错误码ID | 错误信息 | 3118| ------- | --------------------------------------------| 3119| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3120 3121**示例:** 3122 3123```ts 3124import { RenderNode } from '@kit.ArkUI'; 3125import { drawing } from '@kit.ArkGraphics2D'; 3126 3127class DrawingRenderNode extends RenderNode { 3128 draw(context : DrawContext) { 3129 const canvas = context.canvas; 3130 const brush = new drawing.Brush(); 3131 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3132 canvas.attachBrush(brush); 3133 canvas.drawRect({ left : 0, right : 10, top : 0, bottom : 10 }); 3134 canvas.detachBrush(); 3135 } 3136} 3137``` 3138 3139### detachPen 3140 3141detachPen(): void 3142 3143将画笔与画布解绑,在画布上进行绘制时,不会再使用画笔去绘制图形形状的轮廓。 3144 3145**系统能力:** SystemCapability.Graphics.Drawing 3146 3147**示例:** 3148 3149```ts 3150import { RenderNode } from '@kit.ArkUI'; 3151import { drawing } from '@kit.ArkGraphics2D'; 3152 3153class DrawingRenderNode extends RenderNode { 3154 draw(context : DrawContext) { 3155 const canvas = context.canvas; 3156 const pen = new drawing.Pen(); 3157 pen.setStrokeWidth(5); 3158 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3159 canvas.attachPen(pen); 3160 canvas.drawRect({ left : 0, right : 10, top : 0, bottom : 10 }); 3161 canvas.detachPen(); 3162 } 3163} 3164``` 3165 3166### detachBrush 3167 3168detachBrush(): void 3169 3170将画刷与画布解绑,在画布上进行绘制时,不会再使用画刷对绘制图形形状的内部进行填充。 3171 3172**系统能力:** SystemCapability.Graphics.Drawing 3173 3174**示例:** 3175 3176```ts 3177import { RenderNode } from '@kit.ArkUI'; 3178import { drawing } from '@kit.ArkGraphics2D'; 3179 3180class DrawingRenderNode extends RenderNode { 3181 draw(context : DrawContext) { 3182 const canvas = context.canvas; 3183 const brush = new drawing.Brush(); 3184 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3185 canvas.attachBrush(brush); 3186 canvas.drawRect({ left : 0, right : 10, top : 0, bottom : 10 }); 3187 canvas.detachBrush(); 3188 } 3189} 3190``` 3191 3192### clipPath<sup>12+</sup> 3193 3194clipPath(path: Path, clipOp?: ClipOp, doAntiAlias?: boolean): void 3195 3196使用自定义路径对画布的可绘制区域进行裁剪。 3197 3198**系统能力:** SystemCapability.Graphics.Drawing 3199 3200**参数:** 3201 3202| 参数名 | 类型 | 必填 | 说明 | 3203| ------------ | ----------------- | ---- | ------------------------------------| 3204| path | [Path](#path) | 是 | 路径对象。 | 3205| clipOp | [ClipOp](#clipop12) | 否 | 裁剪方式。默认为INTERSECT。 | 3206| doAntiAlias | boolean | 否 | 表示是否使能抗锯齿绘制。true表示使能,false表示不使能。默认为false。 | 3207 3208**错误码:** 3209 3210以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 3211 3212| 错误码ID | 错误信息 | 3213| ------- | --------------------------------------------| 3214| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3215 3216**示例:** 3217 3218```ts 3219import { RenderNode } from '@kit.ArkUI'; 3220import { common2D, drawing } from '@kit.ArkGraphics2D'; 3221 3222class DrawingRenderNode extends RenderNode { 3223 draw(context : DrawContext) { 3224 const canvas = context.canvas; 3225 let path = new drawing.Path(); 3226 path.moveTo(10, 10); 3227 path.cubicTo(100, 100, 80, 150, 300, 150); 3228 path.close(); 3229 canvas.clipPath(path, drawing.ClipOp.INTERSECT, true); 3230 canvas.clear({alpha: 255, red: 255, green: 0, blue: 0}); 3231 } 3232} 3233``` 3234 3235### clipRect<sup>12+</sup> 3236 3237clipRect(rect: common2D.Rect, clipOp?: ClipOp, doAntiAlias?: boolean): void 3238 3239使用矩形对画布的可绘制区域进行裁剪。 3240 3241**系统能力:** SystemCapability.Graphics.Drawing 3242 3243**参数:** 3244 3245| 参数名 | 类型 | 必填 | 说明 | 3246| ----------- | ---------------------------------------- | ---- | ------------------- | 3247| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 需要裁剪的矩形区域。 | 3248| clipOp | [ClipOp](#clipop12) | 否 | 裁剪方式。默认为INTERSECT。 | 3249| doAntiAlias | boolean | 否 | 表示是否使能抗锯齿绘制。true表示使能,false表示不使能。默认为false。 | 3250 3251**错误码:** 3252 3253以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 3254 3255| 错误码ID | 错误信息 | 3256| ------- | --------------------------------------------| 3257| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3258 3259**示例:** 3260 3261```ts 3262import { RenderNode } from '@kit.ArkUI'; 3263import { common2D, drawing } from '@kit.ArkGraphics2D'; 3264 3265class DrawingRenderNode extends RenderNode { 3266 draw(context : DrawContext) { 3267 const canvas = context.canvas; 3268 canvas.clipRect({left : 10, right : 500, top : 300, bottom : 900}, drawing.ClipOp.DIFFERENCE, true); 3269 canvas.clear({alpha: 255, red: 255, green: 0, blue: 0}); 3270 } 3271} 3272``` 3273 3274### save<sup>12+</sup> 3275 3276save(): number 3277 3278保存当前画布状态(画布矩阵和可绘制区域)到栈顶。需要与恢复接口[restore](#restore12)配合使用。 3279 3280**系统能力:** SystemCapability.Graphics.Drawing 3281 3282**返回值:** 3283 3284| 类型 | 说明 | 3285| ------ | ------------------ | 3286| number | 画布状态个数,该参数为正整数。 | 3287 3288**示例:** 3289 3290```ts 3291import { RenderNode } from '@kit.ArkUI'; 3292import { common2D, drawing } from '@kit.ArkGraphics2D'; 3293 3294class DrawingRenderNode extends RenderNode { 3295 draw(context : DrawContext) { 3296 const canvas = context.canvas; 3297 let rect: common2D.Rect = {left: 10, right: 200, top: 100, bottom: 300}; 3298 canvas.drawRect(rect); 3299 let saveCount = canvas.save(); 3300 } 3301} 3302``` 3303 3304### saveLayer<sup>12+</sup> 3305 3306saveLayer(rect?: common2D.Rect | null, brush?: Brush | null): number 3307 3308保存当前画布的矩阵和裁剪区域,并为后续绘制分配位图。调用恢复接口[restore](#restore12)将会舍弃对矩阵和裁剪区域做的更改,并绘制位图。 3309 3310**系统能力:** SystemCapability.Graphics.Drawing 3311 3312**参数:** 3313 3314| 参数名 | 类型 | 必填 | 说明 | 3315| ---- | ------ | ---- | ----------------- | 3316| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect)\|null | 否 | 矩形对象,用于限制图层大小,默认为当前画布大小。 | 3317| brush | [Brush](#brush)\|null | 否 | 画刷对象,绘制位图时会应用画刷对象的透明度,颜色滤波器效果和混合模式,默认不设置额外效果。 | 3318 3319**返回值:** 3320 3321| 类型 | 说明 | 3322| ------ | ------------------ | 3323| number | 返回调用前保存的画布状态数,该参数为正整数。 | 3324 3325**错误码:** 3326 3327以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 3328 3329| 错误码ID | 错误信息 | 3330| ------- | --------------------------------------------| 3331| 401 | Parameter error. Possible causes: Mandatory parameters are left unspecified. | 3332 3333**示例:** 3334 3335```ts 3336import { RenderNode } from '@kit.ArkUI'; 3337import { common2D, drawing } from '@kit.ArkGraphics2D'; 3338 3339class DrawingRenderNode extends RenderNode { 3340 draw(context : DrawContext) { 3341 const canvas = context.canvas; 3342 canvas.saveLayer(null, null); 3343 const brushRect = new drawing.Brush(); 3344 const colorRect: common2D.Color = {alpha: 255, red: 255, green: 255, blue: 0}; 3345 brushRect.setColor(colorRect); 3346 canvas.attachBrush(brushRect); 3347 const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500}; 3348 canvas.drawRect(rect); 3349 3350 const brush = new drawing.Brush(); 3351 brush.setBlendMode(drawing.BlendMode.DST_OUT); 3352 canvas.saveLayer(rect, brush); 3353 3354 const brushCircle = new drawing.Brush(); 3355 const colorCircle: common2D.Color = {alpha: 255, red: 0, green: 0, blue: 255}; 3356 brushCircle.setColor(colorCircle); 3357 canvas.attachBrush(brushCircle); 3358 canvas.drawCircle(500, 500, 200); 3359 canvas.restore(); 3360 canvas.restore(); 3361 canvas.detachBrush(); 3362 } 3363} 3364``` 3365 3366### scale<sup>12+</sup> 3367 3368scale(sx: number, sy: number): void 3369 3370在当前画布矩阵(默认是单位矩阵)的基础上再叠加一个缩放矩阵,后续绘制操作和裁剪操作的形状和位置都会自动叠加一个缩放效果。 3371 3372**系统能力:** SystemCapability.Graphics.Drawing 3373 3374**参数:** 3375 3376| 参数名 | 类型 | 必填 | 说明 | 3377| ---- | ------ | ---- | ----------------- | 3378| sx | number | 是 | x轴方向的缩放比例,该参数为浮点数。 | 3379| sy | number | 是 | y轴方向的缩放比例,该参数为浮点数。 | 3380 3381**错误码:** 3382 3383以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 3384 3385| 错误码ID | 错误信息 | 3386| ------- | --------------------------------------------| 3387| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3388 3389**示例:** 3390 3391```ts 3392import { RenderNode } from '@kit.ArkUI'; 3393import { common2D, drawing } from '@kit.ArkGraphics2D'; 3394 3395class DrawingRenderNode extends RenderNode { 3396 draw(context : DrawContext) { 3397 const canvas = context.canvas; 3398 const pen = new drawing.Pen(); 3399 pen.setStrokeWidth(5); 3400 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3401 canvas.attachPen(pen); 3402 canvas.scale(2, 0.5); 3403 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 3404 canvas.detachPen(); 3405 } 3406} 3407``` 3408 3409### skew<sup>12+</sup> 3410 3411skew(sx: number, sy: number) : void 3412 3413在当前画布矩阵(默认是单位矩阵)的基础上再叠加一个倾斜矩阵,后续绘制操作和裁剪操作的形状和位置都会自动叠加一个倾斜效果。 3414 3415**系统能力:** SystemCapability.Graphics.Drawing 3416 3417**参数:** 3418 3419| 参数名 | 类型 | 必填 | 说明 | 3420| ---- | ------ | ---- | ----------------- | 3421| sx | number | 是 | x轴上的倾斜量,该参数为浮点数。正值会使绘制沿y轴增量方向向右倾斜;负值会使绘制沿y轴增量方向向左倾斜。 | 3422| sy | number | 是 | y轴上的倾斜量,该参数为浮点数。正值会使绘制沿x轴增量方向向下倾斜;负值会使绘制沿x轴增量方向向上倾斜。 | 3423 3424**错误码:** 3425 3426以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 3427 3428| 错误码ID | 错误信息 | 3429| ------- | --------------------------------------------| 3430| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3431 3432**示例:** 3433 3434```ts 3435import { RenderNode } from '@kit.ArkUI'; 3436import { common2D, drawing } from '@kit.ArkGraphics2D'; 3437 3438class DrawingRenderNode extends RenderNode { 3439 draw(context : DrawContext) { 3440 const canvas = context.canvas; 3441 const pen = new drawing.Pen(); 3442 pen.setStrokeWidth(5); 3443 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3444 canvas.attachPen(pen); 3445 canvas.skew(0.1, 0.1); 3446 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 3447 canvas.detachPen(); 3448 } 3449} 3450``` 3451 3452### rotate<sup>12+</sup> 3453 3454rotate(degrees: number, sx: number, sy: number) : void 3455 3456在当前画布矩阵(默认是单位矩阵)的基础上再叠加一个旋转矩阵,后续绘制操作和裁剪操作的形状和位置都会自动叠加一个旋转效果。 3457 3458**系统能力:** SystemCapability.Graphics.Drawing 3459 3460**参数:** 3461 3462| 参数名 | 类型 | 必填 | 说明 | 3463| ---- | ------ | ------ | ------------------------ | 3464| degrees | number | 是 | 旋转角度,单位为度,该参数为浮点数,正数为顺时针旋转,负数为逆时针旋转。 | 3465| sx | number | 是 | 旋转中心的横坐标,该参数为浮点数。 | 3466| sy | number | 是 | 旋转中心的纵坐标,该参数为浮点数。 | 3467 3468**错误码:** 3469 3470以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 3471 3472| 错误码ID | 错误信息 | 3473| ------- | --------------------------------------------| 3474| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3475 3476**示例:** 3477 3478```ts 3479import { RenderNode } from '@kit.ArkUI'; 3480import { common2D, drawing } from '@kit.ArkGraphics2D'; 3481 3482class DrawingRenderNode extends RenderNode { 3483 draw(context : DrawContext) { 3484 const canvas = context.canvas; 3485 const pen = new drawing.Pen(); 3486 pen.setStrokeWidth(5); 3487 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3488 canvas.attachPen(pen); 3489 canvas.rotate(30, 100, 100); 3490 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 3491 canvas.detachPen(); 3492 } 3493} 3494``` 3495 3496### translate<sup>12+</sup> 3497 3498translate(dx: number, dy: number): void 3499 3500在当前画布矩阵(默认是单位矩阵)的基础上再叠加一个平移矩阵,后续绘制操作和裁剪操作的形状和位置都会自动叠加一个平移效果。 3501 3502**系统能力:** SystemCapability.Graphics.Drawing 3503 3504**参数:** 3505 3506| 参数名 | 类型 | 必填 | 说明 | 3507| ----- | ------ | ---- | ------------------- | 3508| dx | number | 是 | x轴方向的移动距离,该参数为浮点数。 | 3509| dy | number | 是 | y轴方向的移动距离,该参数为浮点数。 | 3510 3511**错误码:** 3512 3513以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 3514 3515| 错误码ID | 错误信息 | 3516| ------- | --------------------------------------------| 3517| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3518 3519**示例:** 3520 3521```ts 3522import { RenderNode } from '@kit.ArkUI'; 3523import { common2D, drawing } from '@kit.ArkGraphics2D'; 3524 3525class DrawingRenderNode extends RenderNode { 3526 draw(context : DrawContext) { 3527 const canvas = context.canvas; 3528 const pen = new drawing.Pen(); 3529 pen.setStrokeWidth(5); 3530 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3531 canvas.attachPen(pen); 3532 canvas.translate(10, 10); 3533 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 3534 canvas.detachPen(); 3535 } 3536} 3537``` 3538 3539### getSaveCount<sup>12+</sup> 3540 3541getSaveCount(): number 3542 3543获取栈中保存的画布状态(画布矩阵和裁剪区域)的数量。 3544 3545**系统能力:** SystemCapability.Graphics.Drawing 3546 3547**返回值:** 3548 3549| 类型 | 说明 | 3550| ------ | ------------------------------------ | 3551| number | 已保存的画布状态的数量,该参数为正整数。 | 3552 3553**示例:** 3554 3555```ts 3556import { RenderNode } from '@kit.ArkUI'; 3557import { common2D, drawing } from '@kit.ArkGraphics2D'; 3558 3559class DrawingRenderNode extends RenderNode { 3560 draw(context : DrawContext) { 3561 const canvas = context.canvas; 3562 const pen = new drawing.Pen(); 3563 pen.setStrokeWidth(5); 3564 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3565 canvas.attachPen(pen); 3566 canvas.drawRect({left: 10, right: 200, top: 100, bottom: 300}); 3567 canvas.save(); 3568 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 3569 canvas.getSaveCount(); 3570 canvas.detachPen(); 3571 } 3572} 3573``` 3574 3575### restoreToCount<sup>12+</sup> 3576 3577restoreToCount(count: number): void 3578 3579恢复到指定数量的画布状态(画布矩阵和裁剪区域)。 3580 3581**系统能力:** SystemCapability.Graphics.Drawing 3582 3583**参数:** 3584 3585| 参数名 | 类型 | 必填 | 说明 | 3586| ----- | ------ | ---- | ----------------------------- | 3587| count | number | 是 | 要恢复的画布状态深度,该参数为整数。小于等于1时,恢复为初始状态;大于已保存的画布状态数量时,不执行任何操作。 | 3588 3589**错误码:** 3590 3591以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 3592 3593| 错误码ID | 错误信息 | 3594| ------- | --------------------------------------------| 3595| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3596 3597**示例:** 3598 3599```ts 3600import { RenderNode } from '@kit.ArkUI'; 3601import { common2D, drawing } from '@kit.ArkGraphics2D'; 3602 3603class DrawingRenderNode extends RenderNode { 3604 draw(context : DrawContext) { 3605 const canvas = context.canvas; 3606 const pen = new drawing.Pen(); 3607 pen.setStrokeWidth(5); 3608 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3609 canvas.attachPen(pen); 3610 canvas.drawRect({left: 10, right: 200, top: 100, bottom: 300}); 3611 canvas.save(); 3612 canvas.drawRect({left: 10, right: 200, top: 100, bottom: 500}); 3613 canvas.save(); 3614 canvas.drawRect({left: 100, right: 300, top: 100, bottom: 500}); 3615 canvas.save(); 3616 canvas.restoreToCount(2); 3617 canvas.drawRect({left : 10, right : 500, top : 300, bottom : 900}); 3618 canvas.detachPen(); 3619 } 3620} 3621``` 3622 3623### restore<sup>12+</sup> 3624 3625restore(): void 3626 3627恢复保存在栈顶的画布状态(画布矩阵和裁剪区域)。 3628 3629**系统能力:** SystemCapability.Graphics.Drawing 3630 3631**示例:** 3632 3633```ts 3634import { RenderNode } from '@kit.ArkUI'; 3635import { common2D, drawing } from '@kit.ArkGraphics2D'; 3636 3637class DrawingRenderNode extends RenderNode { 3638 draw(context : DrawContext) { 3639 const canvas = context.canvas; 3640 const pen = new drawing.Pen(); 3641 pen.setStrokeWidth(5); 3642 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 3643 canvas.attachPen(pen); 3644 canvas.restore(); 3645 canvas.detachPen(); 3646 } 3647} 3648``` 3649 3650### concatMatrix<sup>12+</sup> 3651 3652concatMatrix(matrix: Matrix): void 3653 3654画布现有矩阵左乘传入矩阵,不影响之前的绘制操作,后续绘制操作和裁剪操作的形状和位置都会受到该矩阵的影响。 3655 3656**系统能力:** SystemCapability.Graphics.Drawing 3657 3658**参数:** 3659 3660| 参数名 | 类型 | 必填 | 说明 | 3661| ------ | ----------------- | ---- | ----- | 3662| matrix | [Matrix](#matrix12) | 是 | 矩阵对象。 | 3663 3664**错误码:** 3665 3666以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 3667 3668| 错误码ID | 错误信息 | 3669| ------- | --------------------------------------------| 3670| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3671 3672**示例:** 3673 3674```ts 3675import { RenderNode } from '@kit.ArkUI'; 3676import { drawing } from '@kit.ArkGraphics2D'; 3677 3678class DrawingRenderNode extends RenderNode { 3679 draw(context : DrawContext) { 3680 const canvas = context.canvas; 3681 let matrix = new drawing.Matrix(); 3682 matrix.setMatrix([5, 0, 0, 0, 1, 2, 0, 0, 1]); 3683 canvas.concatMatrix(matrix); 3684 canvas.drawRect({left: 10, right: 200, top: 100, bottom: 500}); 3685 } 3686} 3687``` 3688 3689### setMatrix<sup>12+</sup> 3690 3691setMatrix(matrix: Matrix): void 3692 3693设置画布的矩阵,后续绘制操作和裁剪操作的形状和位置都会受到该矩阵的影响。 3694 3695**系统能力:** SystemCapability.Graphics.Drawing 3696 3697**参数:** 3698 3699| 参数名 | 类型 | 必填 | 说明 | 3700| ------ | ----------------- | ---- | ----- | 3701| matrix | [Matrix](#matrix12) | 是 | 矩阵对象。 | 3702 3703**错误码:** 3704 3705以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 3706 3707| 错误码ID | 错误信息 | 3708| ------- | --------------------------------------------| 3709| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3710 3711**示例:** 3712 3713```ts 3714import { RenderNode } from '@kit.ArkUI'; 3715import { drawing } from '@kit.ArkGraphics2D'; 3716 3717class DrawingRenderNode extends RenderNode { 3718 draw(context : DrawContext) { 3719 const canvas = context.canvas; 3720 let matrix = new drawing.Matrix() 3721 matrix.setMatrix([5, 0, 0, 0, 1, 1, 0, 0, 1]); 3722 canvas.setMatrix(matrix); 3723 canvas.drawRect({left: 10, right: 200, top: 100, bottom: 500}); 3724 } 3725} 3726``` 3727 3728### isClipEmpty<sup>12+</sup> 3729 3730isClipEmpty(): boolean 3731 3732判断裁剪后的可绘制区域是否为空。 3733 3734**系统能力:** SystemCapability.Graphics.Drawing 3735 3736**返回值:** 3737 3738| 类型 | 说明 | 3739| --------------------- | -------------- | 3740| boolean | 返回画布的可绘制区域是否为空的结果,true表示为空,false表示不为空。 | 3741 3742**示例:** 3743 3744```ts 3745import { RenderNode } from '@kit.ArkUI'; 3746import { drawing } from '@kit.ArkGraphics2D'; 3747 3748class DrawingRenderNode extends RenderNode { 3749 draw(context : DrawContext) { 3750 const canvas = context.canvas; 3751 if (canvas.isClipEmpty()) { 3752 console.info("canvas.isClipEmpty() returned true"); 3753 } else { 3754 console.info("canvas.isClipEmpty() returned false"); 3755 } 3756 } 3757} 3758``` 3759 3760### clipRegion<sup>12+</sup> 3761 3762clipRegion(region: Region, clipOp?: ClipOp): void 3763 3764在画布上裁剪一个区域。 3765 3766**系统能力:** SystemCapability.Graphics.Drawing 3767 3768**参数:** 3769 3770| 参数名 | 类型 | 必填 | 说明 | 3771| --------------- | ------- | ---- | ----------------------------------------------------------- | 3772| region | [Region](#region12) | 是 | 区域对象,表示裁剪范围。 | 3773| clipOp | [ClipOp](#clipop12) | 否 | 裁剪方式,默认为INTERSECT。 | 3774 3775**错误码:** 3776 3777以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 3778 3779| 错误码ID | 错误信息 | 3780| ------- | --------------------------------------------| 3781| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3782 3783**示例:** 3784 3785```ts 3786import { RenderNode } from '@kit.ArkUI'; 3787import { common2D, drawing } from '@kit.ArkGraphics2D'; 3788 3789class DrawingRenderNode extends RenderNode { 3790 draw(context : DrawContext) { 3791 const canvas = context.canvas; 3792 let region : drawing.Region = new drawing.Region(); 3793 region.setRect(0, 0, 500, 500); 3794 canvas.clipRegion(region); 3795 let color: common2D.Color = {alpha: 255, red: 255, green: 0, blue: 0}; 3796 canvas.clear(color); 3797 } 3798} 3799``` 3800 3801### clipRoundRect<sup>12+</sup> 3802 3803clipRoundRect(roundRect: RoundRect, clipOp?: ClipOp, doAntiAlias?: boolean): void 3804 3805在画布上裁剪一个圆角矩形。 3806 3807**系统能力:** SystemCapability.Graphics.Drawing 3808 3809**参数:** 3810 3811| 参数名 | 类型 | 必填 | 说明 | 3812| --------------- | ------- | ---- | ----------------------------------------------------------- | 3813| roundRect | [RoundRect](#roundrect12) | 是 | 圆角矩形对象,表示裁剪范围。 | 3814| clipOp | [ClipOp](#clipop12) | 否 | 裁剪方式,默认为INTERSECT。 | 3815| doAntiAlias | boolean | 否 | 表示是否使能抗锯齿。true表示使能,false表示不使能。默认为false。 | 3816 3817**错误码:** 3818 3819以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 3820 3821| 错误码ID | 错误信息 | 3822| ------- | --------------------------------------------| 3823| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 3824 3825**示例:** 3826 3827```ts 3828import { RenderNode } from '@kit.ArkUI'; 3829import { common2D, drawing } from '@kit.ArkGraphics2D'; 3830 3831class DrawingRenderNode extends RenderNode { 3832 draw(context : DrawContext) { 3833 const canvas = context.canvas; 3834 let rect: common2D.Rect = { left: 10, top: 100, right: 200, bottom: 300 }; 3835 let roundRect = new drawing.RoundRect(rect, 10, 10); 3836 canvas.clipRoundRect(roundRect); 3837 let color: common2D.Color = {alpha: 255, red: 255, green: 0, blue: 0}; 3838 canvas.clear(color); 3839 } 3840} 3841``` 3842 3843### resetMatrix<sup>12+</sup> 3844 3845resetMatrix(): void 3846 3847将当前画布的矩阵重置为单位矩阵。 3848 3849**系统能力:** SystemCapability.Graphics.Drawing 3850 3851**示例:** 3852 3853```ts 3854import { RenderNode } from '@kit.ArkUI'; 3855import { drawing } from '@kit.ArkGraphics2D'; 3856 3857class DrawingRenderNode extends RenderNode { 3858 draw(context : DrawContext) { 3859 const canvas = context.canvas; 3860 canvas.scale(4, 6); 3861 canvas.resetMatrix(); 3862 } 3863} 3864``` 3865 3866### quickRejectPath<sup>18+</sup> 3867 3868quickRejectPath(path: Path): boolean 3869 3870判断路径与画布区域是否不相交。画布区域包含边界。 3871 3872**系统能力:** SystemCapability.Graphics.Drawing 3873 3874**参数:** 3875 3876| 参数名 | 类型 | 必填 | 说明 | 3877| ------ | ------------- | ---- | ------------------ | 3878| path | [Path](#path) | 是 | 路径对象。 | 3879 3880**返回值:** 3881 3882| 类型 | 说明 | 3883| --------------------- | -------------- | 3884| boolean | 返回路径是否与画布区域不相交的结果。true表示路径与画布区域不相交,false表示路径与画布区域相交。 | 3885 3886**示例:** 3887 3888```ts 3889import { RenderNode } from '@kit.ArkUI'; 3890import { drawing } from '@kit.ArkGraphics2D'; 3891 3892class DrawingRenderNode extends RenderNode { 3893 draw(context : DrawContext) { 3894 const canvas = context.canvas; 3895 let path = new drawing.Path(); 3896 path.moveTo(10, 10); 3897 path.cubicTo(10, 10, 10, 10, 15, 15); 3898 path.close(); 3899 if (canvas.quickRejectPath(path)) { 3900 console.info("canvas and path do not intersect."); 3901 } else { 3902 console.info("canvas and path intersect."); 3903 } 3904 } 3905} 3906``` 3907 3908### quickRejectRect<sup>18+</sup> 3909 3910quickRejectRect(rect: common2D.Rect): boolean 3911 3912判断矩形和画布区域是否不相交。画布区域包含边界。 3913 3914**系统能力:** SystemCapability.Graphics.Drawing 3915 3916**参数:** 3917 3918| 参数名 | 类型 | 必填 | 说明 | 3919| ------ | -------------------------------------------------- | ---- | -------------- | 3920| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 矩形区域。 | 3921 3922**返回值:** 3923 3924| 类型 | 说明 | 3925| --------------------- | -------------- | 3926| boolean | 返回矩形是否与画布区域不相交的结果。true表示矩形与画布区域不相交,false表示矩形与画布区域相交。 | 3927 3928**示例:** 3929 3930```ts 3931import { RenderNode } from '@kit.ArkUI'; 3932import { common2D, drawing } from '@kit.ArkGraphics2D'; 3933 3934class DrawingRenderNode extends RenderNode { 3935 draw(context : DrawContext) { 3936 const canvas = context.canvas; 3937 let rect: common2D.Rect = { left : 10, top : 20, right : 50, bottom : 30 }; 3938 if (canvas.quickRejectRect(rect)) { 3939 console.info("canvas and rect do not intersect."); 3940 } else { 3941 console.info("canvas and rect intersect."); 3942 } 3943 } 3944} 3945``` 3946 3947### drawArcWithCenter<sup>18+</sup> 3948 3949drawArcWithCenter(arc: common2D.Rect, startAngle: number, sweepAngle: number, useCenter: boolean): void 3950 3951在画布上绘制圆弧。该方法允许指定圆弧的起始角度、扫描角度以及圆弧的起点和终点是否连接圆弧的中心点。 3952 3953**系统能力:** SystemCapability.Graphics.Drawing 3954 3955**参数** 3956 3957| 参数名 | 类型 | 必填 | 说明 | 3958| ------ | -------------------------------------------------- | ---- | -------------- | 3959| arc | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 包含要绘制的圆弧的椭圆的矩形边界。 | 3960| startAngle | number | 是 | 弧的起始角度,单位为度,该参数为浮点数。0度时起始点位于椭圆的右端点,为正数时以顺时针方向放置起始点,为负数时以逆时针方向放置起始点。 | 3961| sweepAngle | number | 是 | 弧的扫描角度,单位为度,该参数为浮点数。为正数时顺时针扫描,为负数时逆时针扫描。扫描角度可以超过360度,将绘制一个完整的椭圆。 | 3962| useCenter | boolean | 是 | 绘制时弧形的起点和终点是否连接弧形的中心点。true表示连接,false表示不连接。 | 3963 3964**示例:** 3965 3966```ts 3967import { RenderNode } from '@kit.ArkUI'; 3968import { common2D, drawing } from '@kit.ArkGraphics2D'; 3969 3970class DrawingRenderNode extends RenderNode { 3971 draw(context : DrawContext) { 3972 const canvas = context.canvas; 3973 const pen = new drawing.Pen(); 3974 pen.setStrokeWidth(5); 3975 const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 3976 pen.setColor(color); 3977 canvas.attachPen(pen); 3978 const rect: common2D.Rect = { left: 100, top: 50, right: 400, bottom: 200 }; 3979 canvas.drawArcWithCenter(rect, 90, 180, false); 3980 canvas.detachPen(); 3981 } 3982} 3983``` 3984 3985### drawImageNine<sup>18+</sup> 3986 3987drawImageNine(pixelmap: image.PixelMap, center: common2D.Rect, dstRect: common2D.Rect, filterMode: FilterMode): void 3988 3989通过绘制两条水平线和两条垂直线将图像分割成9个部分:四个边,四个角和中心。<br> 3990若角落的4个区域尺寸不超过目标矩形,则会在不缩放的情况下被绘制在目标矩形,反之则会按比例缩放绘制在目标矩形;如果还有剩余空间,剩下的5个区域会通过拉伸或压缩来绘制,以便能够完全覆盖目标矩形。 3991 3992**系统能力:** SystemCapability.Graphics.Drawing 3993 3994**参数:** 3995 3996| 参数名 | 类型 | 必填 | 说明 | 3997| ------ | ------ | ---- | -------------- | 3998| pixelmap | [image.PixelMap](../apis-image-kit/arkts-apis-image-PixelMap.md) | 是 | 用于绘制网格的像素图。 | 3999| center | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 分割图像的中心矩形。矩形四条边所在的直线将图像分成了9个部分。 | 4000| dstRect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 在画布上绘制的目标矩形区域。 | 4001| filterMode | [FilterMode](#filtermode12) | 是 | 过滤模式。 | 4002 4003**错误码:** 4004 4005以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 4006 4007| 错误码ID | 错误信息 | 4008| ------- | --------------------------------------------| 4009| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 4010 4011**示例:** 4012 4013```ts 4014import { RenderNode } from '@kit.ArkUI'; 4015import { common2D, drawing } from '@kit.ArkGraphics2D'; 4016import { image } from '@kit.ImageKit'; 4017 4018class DrawingRenderNode extends RenderNode { 4019 draw(context : DrawContext) { 4020 const canvas = context.canvas; 4021 let pixelMap: image.PixelMap = globalThis.getInstance().getPixelMap("test_2.jpg"); 4022 canvas.drawImage(pixelMap, 0, 0); // 原图 4023 let center: common2D.Rect = { left: 20, top: 10, right: 50, bottom: 40 }; 4024 let dst: common2D.Rect = { left: 70, top: 0, right: 100, bottom: 30 }; 4025 let dst1: common2D.Rect = { left: 110, top: 0, right: 200, bottom: 90 }; 4026 canvas.drawImageNine(pixelMap, center, dst, drawing.FilterMode.FILTER_MODE_NEAREST); // 示例1 4027 canvas.drawImageNine(pixelMap, center, dst1, drawing.FilterMode.FILTER_MODE_NEAREST); // 示例2 4028 } 4029} 4030``` 4031 4032 4033### drawImageLattice<sup>18+</sup> 4034 4035drawImageLattice(pixelmap: image.PixelMap, lattice: Lattice, dstRect: common2D.Rect, filterMode: FilterMode): void 4036 4037将图像按照矩形网格对象的设置划分为多个网格,并把图像的每个部分按照网格对象的设置绘制到画布上的目标矩形区域。<br> 4038偶数行和列(起始计数为0)的每个交叉点都是固定的,若固定网格区域的尺寸不超过目标矩形,则会在不缩放的情况下被绘制在目标矩形,反之则会按比例缩放绘制在目标矩形;如果还有剩余空间,剩下的区域会通过拉伸或压缩来绘制,以便能够完全覆盖目标矩形。 4039 4040**系统能力:** SystemCapability.Graphics.Drawing 4041 4042**参数:** 4043 4044| 参数名 | 类型 | 必填 | 说明 | 4045| ------ | ------ | ---- | -------------- | 4046| pixelmap | [image.PixelMap](../apis-image-kit/arkts-apis-image-PixelMap.md) | 是 | 用于绘制网格的像素图。 | 4047| lattice | [Lattice](#lattice12) | 是 | 矩形网格对象。 | 4048| dstRect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 目标矩形区域。 | 4049| filterMode | [FilterMode](#filtermode12) | 是 | 过滤模式。 | 4050 4051**错误码:** 4052 4053以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 4054 4055| 错误码ID | 错误信息 | 4056| ------- | --------------------------------------------| 4057| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 4058 4059**示例:** 4060 4061```ts 4062import { RenderNode } from '@kit.ArkUI'; 4063import { common2D, drawing } from '@kit.ArkGraphics2D'; 4064import { image } from '@kit.ImageKit'; 4065 4066class DrawingRenderNode extends RenderNode { 4067 draw(context : DrawContext) { 4068 const canvas = context.canvas; 4069 let pixelMap: image.PixelMap = globalThis.getInstance().getPixelMap("test_3.jpg"); 4070 canvas.drawImage(pixelMap, 0, 0); // 原图 4071 let xDivs: Array<number> = [28, 36, 44, 52]; 4072 let yDivs: Array<number> = [28, 36, 44, 52]; 4073 let lattice = drawing.Lattice.createImageLattice(xDivs, yDivs, 4, 4); 4074 let dst: common2D.Rect = { left: 100, top: 0, right: 164, bottom: 64 }; 4075 let dst1: common2D.Rect = { left: 200, top: 0, right: 360, bottom: 160 }; 4076 canvas.drawImageLattice(pixelMap, lattice, dst, drawing.FilterMode.FILTER_MODE_NEAREST); // 示例1 4077 canvas.drawImageLattice(pixelMap, lattice, dst1, drawing.FilterMode.FILTER_MODE_NEAREST); // 示例2 4078 } 4079} 4080``` 4081 4082 4083## ImageFilter<sup>12+</sup> 4084 4085图像滤波器。 4086 4087### createBlurImageFilter<sup>12+</sup> 4088 4089static createBlurImageFilter(sigmaX: number, sigmaY: number, tileMode: TileMode, imageFilter?: ImageFilter | null ): ImageFilter 4090 4091创建具有模糊效果的图像滤波器。 4092 4093**系统能力:** SystemCapability.Graphics.Drawing 4094 4095**参数:** 4096 4097| 参数名 | 类型 | 必填 | 说明 | 4098| --------------- | ------- | ---- | ----------------------------------------------------------- | 4099| sigmaX | number | 是 | 表示沿x轴方向上高斯模糊的标准差,必须大于0,该参数为浮点数。 | 4100| sigmaY | number | 是 | 表示沿y轴方向上高斯模糊的标准差,必须大于0,该参数为浮点数。 | 4101| tileMode | [TileMode](#tilemode12)| 是 | 表示在边缘处应用的平铺模式。 | 4102| imageFilter | [ImageFilter](#imagefilter12) \| null | 否 | 要与当前图像滤波器叠加的输入滤波器,默认为null,表示直接将当前图像滤波器作用于原始图像。 | 4103 4104**返回值:** 4105 4106| 类型 | 说明 | 4107| --------------------- | -------------- | 4108| [ImageFilter](#imagefilter12) | 返回创建的图像滤波器。 | 4109 4110**错误码:** 4111 4112以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 4113 4114| 错误码ID | 错误信息 | 4115| ------- | --------------------------------------------| 4116| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 4117 4118**示例:** 4119 4120```ts 4121import { drawing } from '@kit.ArkGraphics2D'; 4122 4123let imgFilter = drawing.ImageFilter.createBlurImageFilter(5, 10, drawing.TileMode.CLAMP); 4124``` 4125### createFromImage<sup>20+</sup> 4126 4127static createFromImage(pixelmap: image.PixelMap, srcRect?: common2D.Rect | null, dstRect?: common2D.Rect | null): ImageFilter 4128 4129基于给定的图像创建一个图像滤波器。此接口不建议用于录制类型的画布,会影响性能。 4130 4131**系统能力**:SystemCapability.Graphics.Drawing 4132 4133**参数:** 4134 4135| 参数名 | 类型 | 必填 | 说明 | 4136| --------------- | ------- | ---- | ----------------------------------------------------------- | 4137| pixelmap | [image.PixelMap](../apis-image-kit/arkts-apis-image-PixelMap.md) | 是 | 图片对象。 | 4138| srcRect | [common2D.Rect](js-apis-graphics-common2D.md#rect) \| null | 否 | 可选参数,默认为空。图片要被此滤波器使用的像素区域,如果为空,则使用pixelmap全部区域。 | 4139| dstRect | [common2D.Rect](js-apis-graphics-common2D.md#rect) \| null | 否 | 可选参数,默认为空。要进行渲染的区域,如果为空,则和srcRect保持一致。 | 4140 4141**返回值:** 4142 4143| 类型 | 说明 | 4144| --------------------- | -------------- | 4145| [ImageFilter](#imagefilter12) | 返回创建的图像滤波器。 | 4146 4147**示例:** 4148 4149```ts 4150import { RenderNode } from '@kit.ArkUI'; 4151import { image } from '@kit.ImageKit'; 4152import { common2D, drawing } from '@kit.ArkGraphics2D'; 4153class DrawingRenderNode extends RenderNode { 4154 pixelMap: image.PixelMap | null = null; 4155 4156 async draw(context : DrawContext) { 4157 const canvas = context.canvas; 4158 let srcRect: common2D.Rect = { left: 10, top: 10, right: 80, bottom: 80 }; 4159 let dstRect: common2D.Rect = { left: 200, top: 200, right: 400, bottom: 400 }; 4160 if (this.pixelMap != null) { 4161 let filter = drawing.ImageFilter.createFromImage(this.pixelMap, srcRect, dstRect); 4162 } 4163 } 4164} 4165``` 4166### createBlendImageFilter<sup>20+</sup> 4167 4168static createBlendImageFilter(mode: BlendMode, background: ImageFilter, foreground: ImageFilter): ImageFilter 4169 4170按照指定的混合模式对两个滤波器进行叠加,生成一个新的滤波器。 4171 4172**系统能力**:SystemCapability.Graphics.Drawing 4173 4174**参数:** 4175 4176| 参数名 | 类型 | 必填 | 说明 | 4177| --------------- | ------- | ---- | ----------------------------------------------------------- | 4178| mode | [BlendMode](#blendmode) | 是 | 颜色混合模式。 | 4179| background | [ImageFilter](#imagefilter12) | 是 | 在混合模式中作为目标色的滤波器。| 4180| foreground | [ImageFilter](#imagefilter12) | 是 | 在混合模式中作为源色的滤波器。 | 4181 4182**返回值:** 4183 4184| 类型 | 说明 | 4185| --------------------- | -------------- | 4186| [ImageFilter](#imagefilter12) | 返回创建的图像滤波器。 | 4187 4188**错误码:** 4189 4190以下错误码的详细介绍请参见[图形绘制与显示错误码](../apis-arkgraphics2d/errorcode-drawing.md)。 4191 4192| 错误码ID | 错误信息 | 4193| ------- | --------------------------------------------| 4194| 25900001 | Parameter error.Possible causes: Incorrect parameter range. | 4195 4196**示例:** 4197 4198```ts 4199import { drawing } from '@kit.ArkGraphics2D'; 4200 4201let dx = 15.0; 4202let dy = 10.0; 4203let offsetFilter1 = drawing.ImageFilter.createOffsetImageFilter(dx, dy, null); 4204let x = 15.0; 4205let y = 30.0; 4206let offsetFilter2 = drawing.ImageFilter.createOffsetImageFilter(x, y, null); 4207let blendImageFilter = drawing.ImageFilter.createBlendImageFilter(drawing.BlendMode.SRC_IN, offsetFilter1, offsetFilter2); 4208``` 4209### createComposeImageFilter<sup>20+</sup> 4210 4211static createComposeImageFilter(cOuter: ImageFilter, cInner: ImageFilter): ImageFilter 4212 4213将两个图像滤波器进行级联生成新的图像滤波器,级联时会将第一级滤波器的输出作为第二级滤波器的输入,经过第二级滤波器处理后,输出最终的滤波结果。 4214 4215**系统能力**:SystemCapability.Graphics.Drawing 4216 4217**参数:** 4218 4219| 参数名 | 类型 | 必填 | 说明 | 4220| --------------- | ------- | ---- | ----------------------------------------------------------- | 4221| cOuter | [ImageFilter](#imagefilter12) | 是 | 在级联中,作为第二级的滤波器,处理第一级滤波器的输出。如果第二级滤波器为空,第一级滤波器不为空,最后输出第一级滤波器的结果。两级滤波器不能同时为空。 | 4222| cInner | [ImageFilter](#imagefilter12) | 是 | 在级联中,作为第一级的滤波器,直接处理图像的原始内容。如果第一级滤波器为空,第二级滤波器不为空,最后输出第二级滤波器的结果。两级滤波器不能同时为空。 | 4223 4224**返回值:** 4225 4226| 类型 | 说明 | 4227| --------------------- | -------------- | 4228| [ImageFilter](#imagefilter12) | 返回创建的图像滤波器。 | 4229 4230**示例:** 4231 4232```ts 4233import { drawing } from '@kit.ArkGraphics2D'; 4234 4235let blurSigmaX = 10.0; 4236let blurSigmaY = 10.0; 4237let blurFilter = drawing.ImageFilter.createBlurImageFilter(blurSigmaX, blurSigmaY, drawing.TileMode.CLAMP, null); 4238let colorMatrix:Array<number> = [ 4239 0, 0, 0, 0, 0, 4240 0, 1, 0, 0, 0, 4241 0, 0, 1, 0, 0, 4242 0, 0, 0, 1, 0 4243]; 4244let redRemovalFilter = drawing.ColorFilter.createMatrixColorFilter(colorMatrix); 4245let colorFilter = drawing.ImageFilter.createFromColorFilter(redRemovalFilter, null); 4246let composedImageFilter = drawing.ImageFilter.createComposeImageFilter(colorFilter, blurFilter); 4247``` 4248### createFromColorFilter<sup>12+</sup> 4249 4250static createFromColorFilter(colorFilter: ColorFilter, imageFilter?: ImageFilter | null): ImageFilter 4251 4252创建一个将颜色滤波器应用于传入的图像滤波器的图像滤波器。 4253 4254**系统能力:** SystemCapability.Graphics.Drawing 4255 4256**参数:** 4257 4258| 参数名 | 类型 | 必填 | 说明 | 4259| --------------- | ------- | ---- | ----------------------------------------------------------- | 4260| colorFilter | [ColorFilter](#colorfilter) | 是 | 表示颜色滤波器。 | 4261| imageFilter | [ImageFilter](#imagefilter12) \| null | 否 | 要与当前图像滤波器叠加的输入滤波器,默认为null,表示直接将当前图像滤波器作用于原始图像。 | 4262 4263**返回值:** 4264 4265| 类型 | 说明 | 4266| --------------------- | -------------- | 4267| [ImageFilter](#imagefilter12) | 返回创建的图像滤波器。 | 4268 4269**错误码:** 4270 4271以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 4272 4273| 错误码ID | 错误信息 | 4274| ------- | --------------------------------------------| 4275| 401 | Parameter error.Possible causes: 1.Mandatory parameters are left unspecified; 2.Incorrect parameter types.| 4276 4277**示例:** 4278 4279```ts 4280import { drawing } from '@kit.ArkGraphics2D'; 4281let imgFilter = drawing.ImageFilter.createBlurImageFilter(5, 10, drawing.TileMode.CLAMP); 4282let clolorfilter = drawing.ColorFilter.createSRGBGammaToLinear(); 4283let imgFilter1 = drawing.ImageFilter.createFromColorFilter(clolorfilter, imgFilter); 4284``` 4285### createOffsetImageFilter<sup>20+</sup> 4286 4287static createOffsetImageFilter(dx: number, dy: number, input?: ImageFilter | null): ImageFilter 4288 4289创建一个偏移滤波器,将输入的滤波器按照指定向量进行平移。 4290 4291**系统能力**:SystemCapability.Graphics.Drawing 4292 4293**参数:** 4294 4295| 参数名 | 类型 | 必填 | 说明 | 4296| --------------- | ------- | ---- | ----------------------------------------------------------- | 4297| dx | number | 是 | 水平方向的平移距离, 该参数为浮点数。 | 4298| dy | number | 是 | 竖直方向的平移距离, 该参数为浮点数。 | 4299| input | [ImageFilter](#imagefilter12) \| null | 否 | 需进行平移的滤波器。默认为空,如果为空,则将无滤波效果的绘制结果进行平移。 | 4300 4301**返回值:** 4302 4303| 类型 | 说明 | 4304| --------------------- | -------------- | 4305| [ImageFilter](#imagefilter12) | 返回创建的图像滤波器。 | 4306 4307**示例:** 4308 4309```ts 4310import { drawing } from '@kit.ArkGraphics2D'; 4311 4312let dx = 15.0; 4313let dy = 10.0; 4314let offsetFilter = drawing.ImageFilter.createOffsetImageFilter(dx, dy, null); 4315``` 4316 4317### createFromShaderEffect<sup>20+</sup> 4318 4319static createFromShaderEffect(shader: ShaderEffect): ImageFilter 4320 4321基于着色器创建一个图像滤波器。 4322 4323**系统能力**:SystemCapability.Graphics.Drawing 4324 4325**参数:** 4326 4327| 参数名 | 类型 | 必填 | 说明 | 4328| --------------- | ------- | ---- | ----------------------------------------------------------- | 4329| shader | [ShaderEffect](#shadereffect12) | 是 | 表示应用于图像的着色器效果。 | 4330 4331**返回值:** 4332 4333| 类型 | 说明 | 4334| --------------------- | -------------- | 4335| [ImageFilter](#imagefilter12) | 返回创建的图像滤波器。 | 4336 4337**示例:** 4338 4339```ts 4340import { drawing } from '@kit.ArkGraphics2D'; 4341 4342let shaderEffect = drawing.ShaderEffect.createColorShader(0xFF00FF00); 4343let renderEffect = drawing.ImageFilter.createFromShaderEffect(shaderEffect); 4344``` 4345## TextBlobRunBuffer 4346 4347描述一行文字中具有相同属性的连续字形。 4348 4349**系统能力:** SystemCapability.Graphics.Drawing 4350 4351| 名称 | 类型 | 只读 | 可选 | 说明 | 4352| --------- | ------ | ---- | ---- | ------------------------- | 4353| glyph | number | 否 | 否 | 存储文字的索引,该参数为整数,传入浮点类型时向下取整。 | 4354| positionX | number | 否 | 否 | 文本的起点x轴坐标,该参数为浮点数。 | 4355| positionY | number | 否 | 否 | 文本的起点y轴坐标,该参数为浮点数。 | 4356 4357## TextEncoding 4358 4359文本的编码类型枚举。 4360 4361**系统能力:** SystemCapability.Graphics.Drawing 4362 4363| 名称 | 值 | 说明 | 4364| ---------------------- | ---- | ------------------------------ | 4365| TEXT_ENCODING_UTF8 | 0 | 使用1个字节表示UTF-8或ASCII。 | 4366| TEXT_ENCODING_UTF16 | 1 | 使用2个字节表示大部分unicode。 | 4367| TEXT_ENCODING_UTF32 | 2 | 使用4个字节表示全部unicode。 | 4368| TEXT_ENCODING_GLYPH_ID | 3 | 使用2个字节表示glyph index。 | 4369 4370## ClipOp<sup>12+</sup> 4371画布裁剪方式的枚举。 4372 4373 4374**系统能力:** SystemCapability.Graphics.Drawing 4375 4376| 名称 | 值 | 说明 | 示意图 | 4377| ------------------ | ---- | ---------------- | -------- | 4378| DIFFERENCE | 0 | 将指定区域裁剪(取差集)。 |  | 4379| INTERSECT | 1 | 将指定区域保留(取交集)。 |  | 4380 4381> **说明:** 4382> 4383> 示意图展示了以INTERSECT方式裁剪一个矩形后,使用不同枚举值继续裁剪一个圆形的结果,绿色区域为最终的裁剪区域。 4384 4385## FilterMode<sup>12+</sup> 4386 4387过滤模式枚举。 4388 4389**系统能力:** SystemCapability.Graphics.Drawing 4390 4391| 名称 | 值 | 说明 | 4392| ------------------- | ---- | ------- | 4393| FILTER_MODE_NEAREST | 0 | 邻近过滤模式。 | 4394| FILTER_MODE_LINEAR | 1 | 线性过滤模式。 | 4395 4396## PathDirection<sup>12+</sup> 4397 4398添加闭合轮廓方向的枚举。 4399 4400**系统能力:** SystemCapability.Graphics.Drawing 4401 4402| 名称 | 值 | 说明 | 4403| ------------------- | ---- | ------- | 4404| CLOCKWISE | 0 | 顺时针方向添加闭合轮廓。 | 4405| COUNTER_CLOCKWISE | 1 | 逆时针方向添加闭合轮廓。 | 4406 4407## PathFillType<sup>12+</sup> 4408 4409定义路径的填充类型枚举。 4410 4411**系统能力:** SystemCapability.Graphics.Drawing 4412 4413| 名称 | 值 | 说明 | 4414| ------------------- | ---- | ------- | 4415| WINDING | 0 | 绘制区域中的任意一点,向任意方向射出一条射线,对于射线和路径的所有交点,初始计数为0,遇到每个顺时针的交点(路径从射线的左边向右穿过),计数加1,遇到每个逆时针的交点(路径从射线的右边向左穿过),计数减1,若最终的计数结果不为0,则认为这个点在路径内部,需要被涂色;若计数为0则不被涂色。 | 4416| EVEN_ODD | 1 | 绘制区域中的任意一点,向任意方向射出一条射线,若这条射线和路径相交的次数是奇数,则这个点被认为在路径内部,需要被涂色;若是偶数则不被涂色。 | 4417| INVERSE_WINDING | 2 | WINDING涂色规则取反。 | 4418| INVERSE_EVEN_ODD | 3 | EVEN_ODD涂色规则取反。 | 4419 4420> **说明:**<br> 4421> <br> 4422> 如图所示圆环为路径,箭头指示路径的方向,p为区域内任意一点,蓝色线条为点p出发的射线,黑色箭头所指为对应填充规则下使用蓝色填充路径的结果。WINDING填充规则下,射线与路径的交点计数为2,不为0,点p被涂色;EVEN_ODD填充规则下,射线与路径的相交次数为2,是偶数,点p不被涂色。 4423 4424## PointMode<sup>12+</sup> 4425 4426绘制数组点的方式的枚举。 4427 4428**系统能力:** SystemCapability.Graphics.Drawing 4429 4430| 名称 | 值 | 说明 | 4431| ------------------ | ---- | ------------- | 4432| POINTS | 0 | 分别绘制每个点。 | 4433| LINES | 1 | 将每对点绘制为线段。 | 4434| POLYGON | 2 | 将点阵列绘制为开放多边形。 | 4435 4436## FontEdging<sup>12+</sup> 4437 4438字型边缘效果类型枚举。 4439 4440**系统能力:** SystemCapability.Graphics.Drawing 4441 4442| 名称 | 值 | 说明 | 4443| ------------------- | ---- | ------- | 4444| ALIAS | 0 | 无抗锯齿处理。 | 4445| ANTI_ALIAS | 1 | 使用抗锯齿来平滑字型边缘。 | 4446| SUBPIXEL_ANTI_ALIAS | 2 | 使用次像素级别的抗锯齿平滑字型边缘,可以获得更平滑的字型渲染效果。 | 4447 4448## FontHinting<sup>12+</sup> 4449 4450字型轮廓效果类型枚举。 4451 4452**系统能力:** SystemCapability.Graphics.Drawing 4453 4454| 名称 | 值 | 说明 | 4455| ------------------- | ---- | ------- | 4456| NONE | 0 | 不修改字型轮廓。 | 4457| SLIGHT | 1 | 最小限度修改字型轮廓以改善对比度。 | 4458| NORMAL | 2 | 修改字型轮廓以提高对比度。 | 4459| FULL | 3 | 修改字型轮廓以获得最大对比度。 | 4460 4461## TextBlob 4462 4463由一个或多个具有相同字体的字符组成的字块。 4464 4465### makeFromPosText<sup>12+</sup> 4466 4467static makeFromPosText(text: string, len: number, points: common2D.Point[], font: Font): TextBlob 4468 4469使用文本创建TextBlob对象,TextBlob对象中每个字形的坐标由points中对应的坐标信息决定。 4470 4471**系统能力:** SystemCapability.Graphics.Drawing 4472 4473**参数:** 4474 4475| 参数名 | 类型 | 必填 | 说明 | 4476| -------- | ----------------------------- | ---- | -------------------------------------- | 4477| text | string | 是 | 绘制字形的文本内容。 | 4478| len | number | 是 | 字形个数,由[countText](#counttext12)获取,该参数为整数。 | 4479| points |[common2D.Point](js-apis-graphics-common2D.md#point12)[] | 是 |点数组,用于指定每个字形的坐标,长度必须为len。| 4480| font | [Font](#font) | 是 | 字型对象。 | 4481 4482**返回值:** 4483 4484| 类型 | 说明 | 4485| --------------------- | -------------- | 4486| [TextBlob](#textblob) | TextBlob对象。 | 4487 4488 4489**错误码:** 4490 4491以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 4492 4493| 错误码ID | 错误信息 | 4494| ------- | --------------------------------------------| 4495| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types. | 4496 4497**示例:** 4498 4499```ts 4500import { RenderNode } from '@kit.ArkUI'; 4501import { drawing,common2D} from '@kit.ArkGraphics2D'; 4502 4503class DrawingRenderNode extends RenderNode { 4504 draw(context : DrawContext) { 4505 const canvas = context.canvas; 4506 let text : string = 'makeFromPosText'; 4507 let font : drawing.Font = new drawing.Font(); 4508 font.setSize(100); 4509 let length = font.countText(text); 4510 let points : common2D.Point[] = []; 4511 for (let i = 0; i !== length; ++i) { 4512 points.push({ x: i * 35, y: i * 35 }); 4513 } 4514 let textblob : drawing.TextBlob =drawing.TextBlob.makeFromPosText(text, points.length, points, font); 4515 canvas.drawTextBlob(textblob, 100, 100); 4516 } 4517} 4518``` 4519 4520### uniqueID<sup>12+</sup> 4521 4522uniqueID(): number 4523 4524获取该TextBlob对象的唯一的非零标识符。 4525 4526**系统能力:** SystemCapability.Graphics.Drawing 4527 4528**返回值:** 4529 4530| 类型 | 说明 | 4531| --------------------- | -------------- | 4532| number | 返回TextBlob对象的唯一的非零标识符。 | 4533 4534**示例:** 4535 4536```ts 4537import {drawing} from "@kit.ArkGraphics2D"; 4538 4539let text : string = 'TextBlobUniqueId'; 4540let font : drawing.Font = new drawing.Font(); 4541font.setSize(100); 4542let textBlob = drawing.TextBlob.makeFromString(text, font, 0); 4543let id = textBlob.uniqueID(); 4544console.info("uniqueID---------------" +id); 4545``` 4546 4547### makeFromString 4548 4549static makeFromString(text: string, font: Font, encoding?: TextEncoding): TextBlob 4550 4551将string类型的值转化成TextBlob对象。 4552 4553**系统能力:** SystemCapability.Graphics.Drawing 4554 4555**参数:** 4556 4557| 参数名 | 类型 | 必填 | 说明 | 4558| -------- | ----------------------------- | ---- | -------------------------------------- | 4559| text | string | 是 | 绘制字形的文本内容。 | 4560| font | [Font](#font) | 是 | 字型对象。 | 4561| encoding | [TextEncoding](#textencoding) | 否 | 编码类型,默认值为TEXT_ENCODING_UTF8。当前只有TEXT_ENCODING_UTF8生效,其余编码类型也会被视为TEXT_ENCODING_UTF8。 | 4562 4563**返回值:** 4564 4565| 类型 | 说明 | 4566| --------------------- | -------------- | 4567| [TextBlob](#textblob) | TextBlob对象。 | 4568 4569**错误码:** 4570 4571以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 4572 4573| 错误码ID | 错误信息 | 4574| ------- | --------------------------------------------| 4575| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4576 4577**示例:** 4578 4579```ts 4580import { RenderNode } from '@kit.ArkUI'; 4581import { drawing } from '@kit.ArkGraphics2D'; 4582 4583class DrawingRenderNode extends RenderNode { 4584 draw(context : DrawContext) { 4585 const canvas = context.canvas; 4586 const brush = new drawing.Brush(); 4587 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 4588 const font = new drawing.Font(); 4589 font.setSize(20); 4590 const textBlob = drawing.TextBlob.makeFromString("drawing", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 4591 canvas.attachBrush(brush); 4592 canvas.drawTextBlob(textBlob, 20, 20); 4593 canvas.detachBrush(); 4594 } 4595} 4596``` 4597 4598### makeFromRunBuffer 4599 4600static makeFromRunBuffer(pos: Array\<TextBlobRunBuffer>, font: Font, bounds?: common2D.Rect): TextBlob 4601 4602基于RunBuffer信息创建Textblob对象。 4603 4604**系统能力:** SystemCapability.Graphics.Drawing 4605 4606**参数:** 4607 4608| 参数名 | 类型 | 必填 | 说明 | 4609| ------ | -------------------------------------------------- | ---- | ------------------------------ | 4610| pos | Array\<[TextBlobRunBuffer](#textblobrunbuffer)> | 是 | TextBlobRunBuffer数组。 | 4611| font | [Font](#font) | 是 | 字型对象。 | 4612| bounds | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 否 | 可选,如果不设置,则无边界框。 | 4613 4614**返回值:** 4615 4616| 类型 | 说明 | 4617| --------------------- | -------------- | 4618| [TextBlob](#textblob) | TextBlob对象。 | 4619 4620**错误码:** 4621 4622以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 4623 4624| 错误码ID | 错误信息 | 4625| ------- | --------------------------------------------| 4626| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4627 4628**示例:** 4629 4630```ts 4631import { RenderNode } from '@kit.ArkUI'; 4632import { common2D, drawing } from '@kit.ArkGraphics2D'; 4633 4634class DrawingRenderNode extends RenderNode { 4635 draw(context : DrawContext) { 4636 const canvas = context.canvas; 4637 const font = new drawing.Font(); 4638 font.setSize(20); 4639 let runBuffer : Array<drawing.TextBlobRunBuffer> = [ 4640 { glyph: 65, positionX: 0, positionY: 0 }, 4641 { glyph: 227, positionX: 14.9, positionY: 0 }, 4642 { glyph: 283, positionX: 25.84, positionY: 0 }, 4643 { glyph: 283, positionX: 30.62, positionY: 0 }, 4644 { glyph: 299, positionX: 35.4, positionY: 0} 4645 ]; 4646 const textBlob = drawing.TextBlob.makeFromRunBuffer(runBuffer, font, null); 4647 const brush = new drawing.Brush(); 4648 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 4649 canvas.attachBrush(brush); 4650 canvas.drawTextBlob(textBlob, 20, 20); 4651 canvas.detachBrush(); 4652 } 4653} 4654``` 4655 4656### bounds 4657 4658bounds(): common2D.Rect 4659 4660获取文字边界框的矩形区域。 4661 4662**系统能力:** SystemCapability.Graphics.Drawing 4663 4664**返回值:** 4665 4666| 类型 | 说明 | 4667| -------------------------------------------------- | ---------------------- | 4668| [common2D.Rect](js-apis-graphics-common2D.md#rect) | 文字边界框的矩形区域。 | 4669 4670**示例:** 4671 4672```ts 4673import { common2D, drawing } from '@kit.ArkGraphics2D'; 4674 4675const font = new drawing.Font(); 4676font.setSize(20); 4677const textBlob = drawing.TextBlob.makeFromString("drawing", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 4678let bounds = textBlob.bounds(); 4679``` 4680 4681## TypefaceArguments<sup>20+</sup> 4682 4683提供字体属性配置的结构体。 4684 4685### constructor<sup>20+</sup> 4686 4687constructor() 4688 4689字体属性的构造函数。 4690 4691**系统能力:** SystemCapability.Graphics.Drawing 4692 4693**示例:** 4694 4695```ts 4696import { drawing } from '@kit.ArkGraphics2D'; 4697let typeFaceArgument = new drawing.TypefaceArguments(); 4698``` 4699 4700### addVariation<sup>20+</sup> 4701 4702addVariation(axis: string, value: number) 4703 4704给字体属性设置字重值。 4705 4706**系统能力:** SystemCapability.Graphics.Drawing 4707 4708**参数:** 4709| 参数名 | 类型 | 必填 | 说明 | 4710| ----------- | ---------------------------------------- | ---- | ------------------- | 4711| axis | string | 是 | 字体属性对象可变维度字重的标签'wght'。具体是否支持的该标签取决于加载的字体文件。请打开对应的字体文件具体查看支持的属性。 | 4712| value | number | 是 | 字体属性对象可变维度字重的标签'wght'对应的属性值,需要在字体文件支持的范围内,否则不会生效。如果属性值小于支持的最小值,则默认和最小值一致。如果属性值大于支持的最大值,则默认和最大值效果一致。请打开对应的字体文件具体查看支持的属性值。 | 4713 4714**错误码:** 4715 4716以下错误码的详细介绍请参见[图形绘制与显示错误码](../apis-arkgraphics2d/errorcode-drawing.md)。 4717 4718| 错误码ID | 错误信息 | 4719| ------- | --------------------------------------------| 4720| 25900001 | Parameter error.Possible causes: Incorrect parameter range. | 4721 4722**示例:** 4723 4724```ts 4725import { drawing } from '@kit.ArkGraphics2D'; 4726 4727let typeFaceArgument = new drawing.TypefaceArguments(); 4728typeFaceArgument.addVariation('wght', 10); 4729``` 4730 4731## Typeface 4732 4733字体,如宋体、楷体等。 4734 4735### getFamilyName 4736 4737getFamilyName(): string 4738 4739获取字体的族名,即一套字体设计的名称。 4740 4741**系统能力:** SystemCapability.Graphics.Drawing 4742 4743**返回值:** 4744 4745| 类型 | 说明 | 4746| ------ | -------------------- | 4747| string | 返回字体的族名。 | 4748 4749**示例:** 4750 4751```ts 4752import { drawing } from '@kit.ArkGraphics2D'; 4753 4754const font = new drawing.Font(); 4755let typeface = font.getTypeface(); 4756let familyName = typeface.getFamilyName(); 4757``` 4758 4759### makeFromCurrent<sup>20+</sup> 4760 4761makeFromCurrent(typefaceArguments: TypefaceArguments): Typeface 4762 4763基于当前字体结合字体属性构造新的字体对象。 4764 4765**系统能力:** SystemCapability.Graphics.Drawing 4766 4767**参数:** 4768| 参数名 | 类型 | 必填 | 说明 | 4769| ----------- | ---------------------------------------- | ---- | ------------------- | 4770| typefaceArguments | [TypefaceArguments](#typefacearguments20) | 是 | 字体属性。 | 4771 4772**返回值:** 4773 4774| 类型 | 说明 | 4775| ------ | -------------------- | 4776| [Typeface](#typeface) | 返回字体对象(异常情况下会返回空指针)。 | 4777 4778**示例:** 4779 4780```ts 4781import { RenderNode } from '@kit.ArkUI'; 4782import { drawing } from '@kit.ArkGraphics2D'; 4783 4784class TextRenderNode extends RenderNode { 4785 async draw(context: DrawContext) { 4786 const canvas = context.canvas; 4787 let typeArguments = new drawing.TypefaceArguments(); 4788 typeArguments.addVariation("wght", 100); 4789 const myTypeFace = drawing.Typeface.makeFromFile("/system/fonts/HarmonyOS_Sans_SC.ttf"); 4790 const typeFace1 = myTypeFace.makeFromCurrent(typeArguments); 4791 let font = new drawing.Font(); 4792 font.setTypeface(typeFace1); 4793 const textBlob = drawing.TextBlob.makeFromString("Hello World", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 4794 canvas.drawTextBlob(textBlob, 60, 100); 4795 } 4796} 4797``` 4798 4799### makeFromFile<sup>12+</sup> 4800 4801static makeFromFile(filePath: string): Typeface 4802 4803从指定字体文件构造字体。 4804 4805**系统能力:** SystemCapability.Graphics.Drawing 4806 4807**参数:** 4808 4809| 参数名 | 类型 | 必填 | 说明 | 4810| ----------- | ---------------------------------------- | ---- | ------------------- | 4811| filePath | string | 是 | 表示字体资源存放的路径。应用沙箱路径和真实物理路径的对应关系请参考[应用沙箱路径和真实物理路径的对应关系](../../file-management/app-sandbox-directory.md#应用沙箱路径和真实物理路径的对应关系)。 | 4812 4813**返回值:** 4814 4815| 类型 | 说明 | 4816| ------ | -------------------- | 4817| [Typeface](#typeface) | 返回Typeface对象。 | 4818 4819**错误码:** 4820 4821以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 4822 4823| 错误码ID | 错误信息 | 4824| ------- | --------------------------------------------| 4825| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 4826 4827**示例:** 4828 4829```ts 4830import { RenderNode } from '@kit.ArkUI'; 4831import { drawing } from '@kit.ArkGraphics2D'; 4832 4833class TextRenderNode extends RenderNode { 4834 async draw(context: DrawContext) { 4835 const canvas = context.canvas; 4836 let font = new drawing.Font(); 4837 let str = "/system/fonts/HarmonyOS_Sans_Italic.ttf"; 4838 const mytypeface = drawing.Typeface.makeFromFile(str); 4839 font.setTypeface(mytypeface); 4840 const textBlob = drawing.TextBlob.makeFromString("Hello World", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 4841 canvas.drawTextBlob(textBlob, 60, 100); 4842 } 4843} 4844``` 4845 4846### makeFromRawFile<sup>18+</sup> 4847 4848static makeFromRawFile(rawfile: Resource): Typeface 4849 4850使用指定的字体文件构造字体,其中要求指定的字体文件需保存在应用资源文件夹的rawfile路径下。 4851 4852**系统能力:** SystemCapability.Graphics.Drawing 4853 4854**参数:** 4855 4856| 参数名 | 类型 | 必填 | 说明 | 4857| ----------- | ---------------------------------------- | ---- | ------------------- | 4858| rawfile | [Resource](../apis-arkui/arkui-ts/ts-types.md#resource) | 是 | 指定字体文件对应的资源对象。当前只支持``$rawfile``格式引用的资源对象,对应格式写为``$rawfile('filePath')``,其中filePath为指定字体文件相对于工程中resources/rawfile目录的相对路径。如将字体文件直接存放在resources/rawfile目录下,则引用格式应写为:``$rawfile('HarmonyOS_Sans_Bold.ttf')``;也可以创建子目录,将字体文件存放在resources/rawfile/ttf下,则引用格式应写为:``$rawfile('ttf/HarmonyOS_Sans_Bold.ttf')``。 | 4859 4860**返回值:** 4861 4862| 类型 | 说明 | 4863| ------ | -------------------- | 4864| [Typeface](#typeface) | 返回Typeface对象(异常情况下会返回空指针)。 | 4865 4866**示例:** 4867 4868```ts 4869import { RenderNode } from '@kit.ArkUI'; 4870import { drawing } from '@kit.ArkGraphics2D'; 4871 4872class TextRenderNode extends RenderNode { 4873 async draw(context: DrawContext) { 4874 const canvas = context.canvas; 4875 let font = new drawing.Font(); 4876 const myTypeFace = drawing.Typeface.makeFromRawFile($rawfile('HarmonyOS_Sans_Bold.ttf')); 4877 font.setTypeface(myTypeFace); 4878 const textBlob = drawing.TextBlob.makeFromString("Hello World", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 4879 canvas.drawTextBlob(textBlob, 60, 100); 4880 } 4881} 4882 4883``` 4884### makeFromFileWithArguments<sup>20+</sup> 4885 4886static makeFromFileWithArguments(filePath: string, typefaceArguments: TypefaceArguments): Typeface 4887 4888根据字体文件路径和字体属性构造新的字体。 4889 4890**系统能力:** SystemCapability.Graphics.Drawing 4891 4892**参数:** 4893 4894| 参数名 | 类型 | 必填 | 说明 | 4895| ----------- | ---------------------------------------- | ---- | ------------------- | 4896| filePath | string | 是 | 表示字体资源存放的路径。应用沙箱路径和真实物理路径的对应关系请参考[应用沙箱路径和真实物理路径的对应关系](../../file-management/app-sandbox-directory.md#应用沙箱路径和真实物理路径的对应关系)。 | 4897| typefaceArguments | [TypefaceArguments](#typefacearguments20) | 是 | 表示字体属性。 | 4898 4899**返回值:** 4900 4901| 类型 | 说明 | 4902| ------ | -------------------- | 4903| [Typeface](#typeface) | 返回字体对象(异常情况下会返回空指针)。 | 4904 4905**示例:** 4906 4907```ts 4908import { RenderNode } from '@kit.ArkUI'; 4909import { drawing } from '@kit.ArkGraphics2D'; 4910 4911class TextRenderNode extends RenderNode { 4912 async draw(context: DrawContext) { 4913 const canvas = context.canvas; 4914 let font = new drawing.Font(); 4915 let str = "/system/fonts/HarmonyOS_Sans_Italic.ttf"; 4916 let typeFaceArgument = new drawing.TypefaceArguments(); 4917 const myTypeFace = drawing.Typeface.makeFromFileWithArguments(str, typeFaceArgument); 4918 font.setTypeface(myTypeFace); 4919 const textBlob = drawing.TextBlob.makeFromString("Hello World", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 4920 canvas.drawTextBlob(textBlob, 60, 100); 4921 } 4922} 4923``` 4924 4925### makeFromRawFileWithArguments<sup>20+</sup> 4926 4927static makeFromRawFileWithArguments(rawfile: Resource, typefaceArguments: TypefaceArguments): Typeface 4928 4929使用指定的字体文件和字体属性构造字体,其中要求指定的字体文件需保存在应用资源文件夹的rawfile路径下。 4930 4931**系统能力:** SystemCapability.Graphics.Drawing 4932 4933**参数:** 4934 4935| 参数名 | 类型 | 必填 | 说明 | 4936| ----------- | ---------------------------------------- | ---- | ------------------- | 4937| rawfile | [Resource](../apis-arkui/arkui-ts/ts-types.md#resource) | 是 | 指定字体文件对应的资源对象。当前只支持``$rawfile``格式引用的资源对象,对应格式写为``$rawfile('filePath')``,其中filePath为指定字体文件相对于工程中resources/rawfile目录的相对路径。 | 4938| typefaceArguments | [TypefaceArguments](#typefacearguments20) | 是 | 表示字体属性。 | 4939 4940**返回值:** 4941 4942| 类型 | 说明 | 4943| ------ | ------------------- | 4944| [Typeface](#typeface) | 返回字体对象(异常情况下会返回空指针)。 | 4945 4946**示例:** 4947 4948```ts 4949import { RenderNode } from '@kit.ArkUI'; 4950import { drawing } from '@kit.ArkGraphics2D'; 4951 4952class TextRenderNode extends RenderNode { 4953 async draw(context: DrawContext) { 4954 const canvas = context.canvas; 4955 let font = new drawing.Font(); 4956 let typeFaceArgument = new drawing.TypefaceArguments(); 4957 const myTypeFace = drawing.Typeface.makeFromRawFileWithArguments($rawfile('HarmonyOS_Sans_Bold.ttf'), typeFaceArgument); 4958 font.setTypeface(myTypeFace); 4959 const textBlob = drawing.TextBlob.makeFromString("Hello World", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 4960 canvas.drawTextBlob(textBlob, 60, 100); 4961 } 4962} 4963``` 4964 4965## Font 4966 4967描述字型绘制时所使用的属性,如大小、字体等。 4968 4969### isSubpixel<sup>12+</sup> 4970 4971isSubpixel(): boolean 4972 4973获取字型是否使用次像素渲染。 4974 4975**系统能力:** SystemCapability.Graphics.Drawing 4976 4977**返回值:** 4978 4979| 类型 | 说明 | 4980| ------ | -------------------- | 4981| boolean | 返回字型是否使用次像素渲染的结果,true表示使用,false表示不使用。 | 4982 4983**示例:** 4984 4985```ts 4986import {drawing} from '@kit.ArkGraphics2D'; 4987 4988let font: drawing.Font = new drawing.Font(); 4989font.enableSubpixel(true) 4990console.info("values=" + font.isSubpixel()); 4991``` 4992 4993### isLinearMetrics<sup>12+</sup> 4994 4995isLinearMetrics(): boolean 4996 4997获取字型是否可以线性缩放。 4998 4999**系统能力:** SystemCapability.Graphics.Drawing 5000 5001**返回值:** 5002 5003| 类型 | 说明 | 5004| ------ | -------------------- | 5005| boolean | 返回字型是否可线性缩放的结果,true表示可线性缩放,false表示不可线性缩放。 | 5006 5007**示例:** 5008 5009```ts 5010import {drawing} from '@kit.ArkGraphics2D'; 5011 5012let font: drawing.Font = new drawing.Font(); 5013font.enableLinearMetrics(true) 5014console.info("values=" + font.isLinearMetrics()); 5015``` 5016 5017### getSkewX<sup>12+</sup> 5018 5019getSkewX(): number 5020 5021获取字型在x轴方向上的倾斜度。 5022 5023**系统能力:** SystemCapability.Graphics.Drawing 5024 5025**返回值:** 5026 5027| 类型 | 说明 | 5028| ------ | -------------------- | 5029| number | 返回字型在x轴方向上的倾斜度。 | 5030 5031**示例:** 5032 5033```ts 5034import {drawing} from '@kit.ArkGraphics2D'; 5035 5036let font: drawing.Font = new drawing.Font(); 5037font.setSkewX(-1) 5038console.info("values=" + font.getSkewX()); 5039``` 5040 5041### isEmbolden<sup>12+</sup> 5042 5043isEmbolden(): boolean 5044 5045获取字型是否设置了粗体效果。 5046 5047**系统能力:** SystemCapability.Graphics.Drawing 5048 5049**返回值:** 5050 5051| 类型 | 说明 | 5052| ------ | -------------------- | 5053| boolean | 返回字型是否设置粗体效果的结果,true表示设置了粗体效果,false表示未设置粗体效果。 | 5054 5055**示例:** 5056 5057```ts 5058import {drawing} from '@kit.ArkGraphics2D'; 5059 5060let font: drawing.Font = new drawing.Font(); 5061font.enableEmbolden(true); 5062console.info("values=" + font.isEmbolden()); 5063``` 5064 5065### getScaleX<sup>12+</sup> 5066 5067getScaleX(): number 5068 5069获取字型在x轴方向上的缩放比例。 5070 5071**系统能力:** SystemCapability.Graphics.Drawing 5072 5073**返回值:** 5074 5075| 类型 | 说明 | 5076| ------ | -------------------- | 5077| number | 返回字型在x轴方向上的缩放比例。 | 5078 5079**示例:** 5080 5081```ts 5082import {drawing} from '@kit.ArkGraphics2D'; 5083 5084let font: drawing.Font = new drawing.Font(); 5085font.setScaleX(2); 5086console.info("values=" + font.getScaleX()); 5087``` 5088 5089### getHinting<sup>12+</sup> 5090 5091getHinting(): FontHinting 5092 5093获取字型轮廓效果。 5094 5095**系统能力:** SystemCapability.Graphics.Drawing 5096 5097**返回值:** 5098 5099| 类型 | 说明 | 5100| ------ | -------------------- | 5101| [FontHinting](#fonthinting12) | 返回字型轮廓效果。 | 5102 5103**示例:** 5104 5105```ts 5106import {drawing} from '@kit.ArkGraphics2D'; 5107 5108let font: drawing.Font = new drawing.Font(); 5109console.info("values=" + font.getHinting()); 5110``` 5111 5112### getEdging<sup>12+</sup> 5113 5114getEdging(): FontEdging 5115 5116获取字型边缘效果。 5117 5118**系统能力:** SystemCapability.Graphics.Drawing 5119 5120**返回值:** 5121 5122| 类型 | 说明 | 5123| ------ | -------------------- | 5124| [FontEdging](#fontedging12) | 返回字型边缘效果。 | 5125 5126**示例:** 5127 5128```ts 5129import {drawing} from '@kit.ArkGraphics2D'; 5130 5131let font: drawing.Font = new drawing.Font(); 5132console.info("values=" + font.getEdging()); 5133``` 5134 5135### enableSubpixel 5136 5137enableSubpixel(isSubpixel: boolean): void 5138 5139使能字型亚像素级别的文字绘制,显示效果平滑。 5140 5141**系统能力:** SystemCapability.Graphics.Drawing 5142 5143**参数:** 5144 5145| 参数名 | 类型 | 必填 | 说明 | 5146| ---------- | ------- | ---- | ------------------------------------------------------------ | 5147| isSubpixel | boolean | 是 | 表示是否使能字型亚像素级别的文字绘制。true表示使能,false表示不使能。 | 5148 5149**错误码:** 5150 5151以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 5152 5153| 错误码ID | 错误信息 | 5154| ------- | --------------------------------------------| 5155| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5156 5157**示例:** 5158 5159```ts 5160import { drawing } from '@kit.ArkGraphics2D'; 5161 5162let font = new drawing.Font(); 5163font.enableSubpixel(true); 5164``` 5165 5166### enableEmbolden 5167 5168enableEmbolden(isEmbolden: boolean): void 5169 5170使能字型粗体。 5171 5172**系统能力:** SystemCapability.Graphics.Drawing 5173 5174**参数:** 5175 5176| 参数名 | 类型 | 必填 | 说明 | 5177| ---------- | ------- | ---- | ----------------------------------------------------- | 5178| isEmbolden | boolean | 是 | 表示是否使能字型粗体。true表示使能,false表示不使能。 | 5179 5180**错误码:** 5181 5182以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 5183 5184| 错误码ID | 错误信息 | 5185| ------- | --------------------------------------------| 5186| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5187 5188**示例:** 5189 5190```ts 5191import { drawing } from '@kit.ArkGraphics2D'; 5192 5193let font = new drawing.Font(); 5194font.enableEmbolden(true); 5195``` 5196 5197### enableLinearMetrics 5198 5199enableLinearMetrics(isLinearMetrics: boolean): void 5200 5201使能字型的线性缩放。 5202 5203**系统能力:** SystemCapability.Graphics.Drawing 5204 5205**参数:** 5206 5207| 参数名 | 类型 | 必填 | 说明 | 5208| --------------- | ------- | ---- | ----------------------------------------------------------- | 5209| isLinearMetrics | boolean | 是 | 表示是否使能字型的线性缩放。true表示使能,false表示不使能。 | 5210 5211**错误码:** 5212 5213以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 5214 5215| 错误码ID | 错误信息 | 5216| ------- | --------------------------------------------| 5217| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5218 5219**示例:** 5220 5221```ts 5222import { drawing } from '@kit.ArkGraphics2D'; 5223 5224let font = new drawing.Font(); 5225font.enableLinearMetrics(true); 5226``` 5227 5228### setSize 5229 5230setSize(textSize: number): void 5231 5232设置字型大小。 5233 5234**系统能力:** SystemCapability.Graphics.Drawing 5235 5236**参数:** 5237 5238| 参数名 | 类型 | 必填 | 说明 | 5239| -------- | ------ | ---- | ---------------- | 5240| textSize | number | 是 | 字型大小,该参数为浮点数,为负数时字型大小会被置为0。字型大小为0时,绘制的文字不会显示。| 5241 5242**错误码:** 5243 5244以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 5245 5246| 错误码ID | 错误信息 | 5247| ------- | --------------------------------------------| 5248| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5249 5250**示例:** 5251 5252```ts 5253import { drawing } from '@kit.ArkGraphics2D'; 5254 5255let font = new drawing.Font(); 5256font.setSize(5); 5257``` 5258 5259### getSize 5260 5261getSize(): number 5262 5263获取字型大小。 5264 5265**系统能力:** SystemCapability.Graphics.Drawing 5266 5267**返回值:** 5268 5269| 类型 | 说明 | 5270| ------ | ---------------- | 5271| number | 字型大小,浮点数。 | 5272 5273**示例:** 5274 5275```ts 5276import { drawing } from '@kit.ArkGraphics2D'; 5277 5278let font = new drawing.Font(); 5279font.setSize(5); 5280let fontSize = font.getSize(); 5281``` 5282 5283### setTypeface 5284 5285setTypeface(typeface: Typeface): void 5286 5287为字型设置字体样式(包括字体名称、粗细、斜体等属性)。 5288 5289**系统能力:** SystemCapability.Graphics.Drawing 5290 5291**参数:** 5292 5293| 参数名 | 类型 | 必填 | 说明 | 5294| -------- | --------------------- | ---- | ------ | 5295| typeface | [Typeface](#typeface) | 是 | 字体样式,包括字体名称、粗细、斜体等属性。 | 5296 5297**错误码:** 5298 5299以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 5300 5301| 错误码ID | 错误信息 | 5302| ------- | --------------------------------------------| 5303| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5304 5305**示例:** 5306 5307```ts 5308import { drawing } from '@kit.ArkGraphics2D'; 5309 5310let font = new drawing.Font(); 5311font.setTypeface(new drawing.Typeface()); 5312``` 5313 5314### getTypeface 5315 5316getTypeface(): Typeface 5317 5318获取字体。 5319 5320**系统能力:** SystemCapability.Graphics.Drawing 5321 5322**返回值:** 5323 5324| 类型 | 说明 | 5325| --------------------- | ------ | 5326| [Typeface](#typeface) | 字体。 | 5327 5328**示例:** 5329 5330```ts 5331import { drawing } from '@kit.ArkGraphics2D'; 5332 5333let font = new drawing.Font(); 5334let typeface = font.getTypeface(); 5335``` 5336 5337### getMetrics 5338 5339getMetrics(): FontMetrics 5340 5341获取与字体关联的FontMetrics属性。 5342 5343**系统能力:** SystemCapability.Graphics.Drawing 5344 5345**返回值:** 5346 5347| 类型 | 说明 | 5348| --------------------------- | ----------------- | 5349| [FontMetrics](#fontmetrics) | FontMetrics属性。 | 5350 5351**示例:** 5352 5353```ts 5354import { drawing } from '@kit.ArkGraphics2D'; 5355 5356let font = new drawing.Font(); 5357let metrics = font.getMetrics(); 5358``` 5359 5360### measureText 5361 5362measureText(text: string, encoding: TextEncoding): number 5363 5364测量文本的宽度。 5365 5366> **说明:** 5367> 5368> 此接口用于测量原始字符串的文本宽度,若想测量排版后的文本宽度,建议使用[measure.measureText](../apis-arkui/arkts-apis-uicontext-measureutils.md#measuretext12)替代。 5369 5370**系统能力:** SystemCapability.Graphics.Drawing 5371 5372**参数:** 5373 5374| 参数名 | 类型 | 必填 | 说明 | 5375| -------- | ----------------------------- | ---- | ---------- | 5376| text | string | 是 | 文本内容。 | 5377| encoding | [TextEncoding](#textencoding) | 是 | 编码格式。 | 5378 5379**返回值:** 5380 5381| 类型 | 说明 | 5382| ------ | ---------------- | 5383| number | 文本的宽度,浮点数。 | 5384 5385**错误码:** 5386 5387以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 5388 5389| 错误码ID | 错误信息 | 5390| ------- | --------------------------------------------| 5391| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5392 5393**示例:** 5394 5395```ts 5396import { drawing } from '@kit.ArkGraphics2D'; 5397 5398let font = new drawing.Font(); 5399font.measureText("drawing", drawing.TextEncoding.TEXT_ENCODING_UTF8); 5400``` 5401 5402### measureSingleCharacter<sup>12+</sup> 5403 5404measureSingleCharacter(text: string): number 5405 5406测量单个字符的宽度。当前字型中的字体不支持待测量字符时,退化到使用系统字体测量字符宽度。 5407 5408**系统能力:** SystemCapability.Graphics.Drawing 5409 5410**参数** 5411 5412| 参数名 | 类型 | 必填 | 说明 | 5413| ------ | ------------------- | ---- | ----------- | 5414| text | string | 是 | 待测量的单个字符,字符串的长度必须为1。 | 5415 5416**返回值:** 5417 5418| 类型 | 说明 | 5419| ------ | ---------------- | 5420| number | 字符的宽度,浮点数。 | 5421 5422**错误码:** 5423 5424以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 5425 5426| 错误码ID | 错误信息 | 5427| ------- | --------------------------------------------| 5428| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5429 5430**示例:** 5431 5432```ts 5433import { RenderNode } from '@kit.ArkUI'; 5434import { drawing } from '@kit.ArkGraphics2D'; 5435 5436class DrawingRenderNode extends RenderNode { 5437 draw(context : DrawContext) { 5438 const canvas = context.canvas; 5439 const font = new drawing.Font(); 5440 font.setSize(20); 5441 let width = font.measureSingleCharacter("你"); 5442 } 5443} 5444``` 5445 5446### setScaleX<sup>12+</sup> 5447 5448setScaleX(scaleX: number): void 5449 5450设置字型对象在x轴上的缩放比例。 5451 5452**系统能力:** SystemCapability.Graphics.Drawing 5453 5454**参数:** 5455 5456| 参数名 | 类型 | 必填 | 说明 | 5457| -------- | ----------------------------- | ---- | ---------- | 5458| scaleX | number | 是 | 文本在x轴上的缩放比例,该参数为浮点数。 | 5459 5460**错误码:** 5461 5462以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 5463 5464| 错误码ID | 错误信息 | 5465| ------- | --------------------------------------------| 5466| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5467 5468**示例:** 5469 5470```ts 5471import { RenderNode } from '@kit.ArkUI'; 5472import { common2D, drawing } from '@kit.ArkGraphics2D'; 5473 5474class DrawingRenderNode extends RenderNode { 5475 draw(context : DrawContext) { 5476 const canvas = context.canvas; 5477 const pen = new drawing.Pen(); 5478 pen.setStrokeWidth(5); 5479 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 5480 canvas.attachPen(pen); 5481 let font = new drawing.Font(); 5482 font.setSize(100); 5483 font.setScaleX(2); 5484 const textBlob = drawing.TextBlob.makeFromString("hello", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 5485 canvas.drawTextBlob(textBlob, 200, 200); 5486 } 5487} 5488``` 5489 5490### setSkewX<sup>12+</sup> 5491 5492setSkewX(skewX: number): void 5493 5494设置字型对象在x轴上的倾斜比例。 5495 5496**系统能力:** SystemCapability.Graphics.Drawing 5497 5498**参数:** 5499 5500| 参数名 | 类型 | 必填 | 说明 | 5501| -------- | ----------------------------- | ---- | ---------- | 5502| skewX | number | 是 | 文本在x轴上的倾斜比例,正数表示往左边倾斜,负数表示往右边倾斜,该参数为浮点数。 | 5503 5504**错误码:** 5505 5506以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 5507 5508| 错误码ID | 错误信息 | 5509| ------- | --------------------------------------------| 5510| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5511 5512**示例:** 5513 5514```ts 5515import { RenderNode } from '@kit.ArkUI'; 5516import { common2D, drawing } from '@kit.ArkGraphics2D'; 5517 5518class DrawingRenderNode extends RenderNode { 5519 draw(context : DrawContext) { 5520 const canvas = context.canvas; 5521 const pen = new drawing.Pen(); 5522 pen.setStrokeWidth(5); 5523 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 5524 canvas.attachPen(pen); 5525 let font = new drawing.Font(); 5526 font.setSize(100); 5527 font.setSkewX(1); 5528 const textBlob = drawing.TextBlob.makeFromString("hello", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 5529 canvas.drawTextBlob(textBlob, 200, 200); 5530 } 5531} 5532``` 5533 5534### setEdging<sup>12+</sup> 5535 5536setEdging(edging: FontEdging): void 5537 5538设置字型边缘效果。 5539 5540**系统能力:** SystemCapability.Graphics.Drawing 5541 5542**参数:** 5543 5544| 参数名 | 类型 | 必填 | 说明 | 5545| -------- | ----------------------------- | ---- | ---------- | 5546| edging | [FontEdging](#fontedging12) | 是 | 字型边缘效果。 | 5547 5548**错误码:** 5549 5550以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 5551 5552| 错误码ID | 错误信息 | 5553| ------- | --------------------------------------------| 5554| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed. | 5555 5556**示例:** 5557 5558```ts 5559import { drawing } from '@kit.ArkGraphics2D'; 5560 5561let font = new drawing.Font(); 5562font.setEdging(drawing.FontEdging.SUBPIXEL_ANTI_ALIAS); 5563``` 5564 5565### setHinting<sup>12+</sup> 5566 5567setHinting(hinting: FontHinting): void 5568 5569设置字型轮廓效果。 5570 5571**系统能力:** SystemCapability.Graphics.Drawing 5572 5573**参数:** 5574 5575| 参数名 | 类型 | 必填 | 说明 | 5576| -------- | ----------------------------- | ---- | ---------- | 5577| hinting | [FontHinting](#fonthinting12) | 是 | 字型轮廓效果。 | 5578 5579**错误码:** 5580 5581以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 5582 5583| 错误码ID | 错误信息 | 5584| ------- | --------------------------------------------| 5585| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed. | 5586 5587**示例:** 5588 5589```ts 5590import { drawing } from '@kit.ArkGraphics2D'; 5591 5592let font = new drawing.Font(); 5593font.setHinting(drawing.FontHinting.FULL); 5594``` 5595 5596### countText<sup>12+</sup> 5597 5598countText(text: string): number 5599 5600获取文本所表示的字符数量。 5601 5602**系统能力:** SystemCapability.Graphics.Drawing 5603 5604**参数:** 5605 5606| 参数名 | 类型 | 必填 | 说明 | 5607| -------- | ----------------------------- | ---- | ---------- | 5608| text | string | 是 | 文本内容。 | 5609 5610**返回值:** 5611 5612| 类型 | 说明 | 5613| ------ | ---------------- | 5614| number | 返回文本所表示的字符数量,整数。 | 5615 5616**错误码:** 5617 5618以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 5619 5620| 错误码ID | 错误信息 | 5621| ------- | --------------------------------------------| 5622| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5623 5624**示例:** 5625 5626```ts 5627import { drawing } from '@kit.ArkGraphics2D'; 5628 5629let font = new drawing.Font(); 5630let resultNumber: number = font.countText('ABCDE'); 5631console.info("count text number: " + resultNumber); 5632``` 5633 5634### setBaselineSnap<sup>12+</sup> 5635 5636setBaselineSnap(isBaselineSnap: boolean): void 5637 5638当前画布矩阵轴对齐时,设置字型基线是否与像素对齐。 5639 5640**系统能力:** SystemCapability.Graphics.Drawing 5641 5642**参数:** 5643 5644| 参数名 | 类型 | 必填 | 说明 | 5645| --------------- | ------- | ---- | ---------------------------------------- | 5646| isBaselineSnap | boolean | 是 | 指示字型基线是否和像素对齐,true表示对齐,false表示不对齐。 | 5647 5648**错误码:** 5649 5650以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 5651 5652| 错误码ID | 错误信息 | 5653| ------- | --------------------------------------------| 5654| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5655 5656**示例:** 5657 5658```ts 5659import { drawing } from '@kit.ArkGraphics2D'; 5660 5661let font : drawing.Font = new drawing.Font(); 5662font.setBaselineSnap(true); 5663console.info("drawing font isBaselineSnap: " + font.isBaselineSnap()); 5664``` 5665 5666### isBaselineSnap()<sup>12+</sup> 5667 5668isBaselineSnap(): boolean 5669 5670当前画布矩阵轴对齐时,获取字型基线是否与像素对齐的结果。 5671 5672**系统能力:** SystemCapability.Graphics.Drawing 5673 5674**返回值:** 5675 5676| 类型 | 说明 | 5677| ------ | ---------------- | 5678| boolean | 返回字型基线是否与像素对齐,true为对齐,false为没有对齐。 | 5679 5680**示例:** 5681 5682```ts 5683import { drawing } from '@kit.ArkGraphics2D'; 5684 5685let font : drawing.Font = new drawing.Font(); 5686font.setTypeface(new drawing.Typeface()); 5687font.setBaselineSnap(true); 5688console.info("drawing font isBaselineSnap: " + font.isBaselineSnap()); 5689``` 5690 5691### setEmbeddedBitmaps<sup>12+</sup> 5692 5693setEmbeddedBitmaps(isEmbeddedBitmaps: boolean): void 5694 5695设置字型是否转换成位图处理。 5696 5697**系统能力:** SystemCapability.Graphics.Drawing 5698 5699**参数:** 5700 5701| 参数名 | 类型 | 必填 | 说明 | 5702| -------- | ------ | ---- | ---------------- | 5703| isEmbeddedBitmaps | boolean | 是 | 设置字型是否转换成位图处理,true表示转换成位图处理,false表示不转换成位图处理。 | 5704 5705**错误码:** 5706 5707以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 5708 5709| 错误码ID | 错误信息 | 5710| ------- | --------------------------------------------| 5711| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5712 5713**示例:** 5714 5715```ts 5716import { drawing } from '@kit.ArkGraphics2D'; 5717 5718let font : drawing.Font = new drawing.Font(); 5719font.setTypeface(new drawing.Typeface()); 5720font.setEmbeddedBitmaps(false); 5721console.info("draw isEmbeddedBitmaps: " + font.isEmbeddedBitmaps()); 5722``` 5723 5724### isEmbeddedBitmaps()<sup>12+</sup> 5725 5726isEmbeddedBitmaps(): boolean 5727 5728获取字型是否转换成位图处理的结果。 5729 5730**系统能力:** SystemCapability.Graphics.Drawing 5731 5732**返回值:** 5733 5734| 类型 | 说明 | 5735| ------ | ---------------- | 5736| boolean | 返回字型是否转换成位图处理结果,true表示转换成位图处理,false表示不转换成位图处理。 | 5737 5738**示例:** 5739 5740```ts 5741import { drawing } from '@kit.ArkGraphics2D'; 5742 5743let font : drawing.Font = new drawing.Font(); 5744font.setTypeface(new drawing.Typeface()); 5745font.setEmbeddedBitmaps(true); 5746console.info("draw isEmbeddedBitmaps: " + font.isEmbeddedBitmaps()); 5747``` 5748 5749### setForceAutoHinting<sup>12+</sup> 5750 5751setForceAutoHinting(isForceAutoHinting: boolean): void 5752 5753设置是否自动调整字型轮廓。 5754 5755**系统能力:** SystemCapability.Graphics.Drawing 5756 5757**参数:** 5758 5759| 参数名 | 类型 | 必填 | 说明 | 5760| -------- | ------ | ---- | ---------------- | 5761| isForceAutoHinting | boolean | 是 | 是否自动调整字型轮廓,true为自动调整,false为不自动调整。 | 5762 5763**错误码:** 5764 5765以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 5766 5767| 错误码ID | 错误信息 | 5768| ------- | --------------------------------------------| 5769| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5770 5771**示例:** 5772 5773```ts 5774import { drawing } from '@kit.ArkGraphics2D'; 5775 5776let font : drawing.Font = new drawing.Font(); 5777font.setTypeface(new drawing.Typeface()); 5778font.setForceAutoHinting(false); 5779console.info("drawing isForceAutoHinting: " + font.isForceAutoHinting()); 5780``` 5781 5782### isForceAutoHinting<sup>12+</sup> 5783 5784isForceAutoHinting(): boolean 5785 5786获取字型轮廓是否自动调整的结果。 5787 5788**系统能力:** SystemCapability.Graphics.Drawing 5789 5790**返回值:** 5791 5792| 类型 | 说明 | 5793| ------ | ---------------- | 5794| boolean | 返回字型轮廓是否自动调整,true为自动调整,false为不自动调整。 | 5795 5796**示例:** 5797 5798```ts 5799import { drawing } from '@kit.ArkGraphics2D'; 5800 5801let font : drawing.Font = new drawing.Font(); 5802font.setTypeface(new drawing.Typeface()); 5803font.setForceAutoHinting(false); 5804console.info("drawing isForceAutoHinting: " + font.isForceAutoHinting()); 5805``` 5806 5807### getWidths<sup>12+</sup> 5808 5809getWidths(glyphs: Array\<number>): Array\<number> 5810 5811获取字形数组中每个字形对应的宽度。 5812 5813**系统能力:** SystemCapability.Graphics.Drawing 5814 5815**参数:** 5816 5817| 参数名 | 类型 | 必填 | 说明 | 5818| -------- | --------------------- | ---- | ------ | 5819| glyphs | Array\<number> | 是 | 字形索引数组,可由[textToGlyphs](#texttoglyphs12)生成。 | 5820 5821**返回值:** 5822 5823| 类型 | 说明 | 5824| ------ | ---------------- | 5825| Array\<number> | 返回字形宽度数组。 | 5826 5827**错误码:** 5828 5829以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 5830 5831| 错误码ID | 错误信息 | 5832| ------- | --------------------------------------------| 5833| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5834 5835**示例:** 5836 5837```ts 5838import { drawing } from '@kit.ArkGraphics2D'; 5839 5840let font: drawing.Font = new drawing.Font(); 5841let text: string = 'hello world'; 5842let glyphs: number[] = font.textToGlyphs(text); 5843let fontWidths: Array<number> = font.getWidths(glyphs); 5844for (let index = 0; index < fontWidths.length; index++) { 5845 console.info("get fontWidths[", index, "]:", fontWidths[index]); 5846} 5847``` 5848 5849### textToGlyphs<sup>12+</sup> 5850 5851textToGlyphs(text: string, glyphCount?: number): Array\<number> 5852 5853将文本转换为字形索引。 5854 5855**系统能力:** SystemCapability.Graphics.Drawing 5856 5857**参数:** 5858 5859| 参数名 | 类型 | 必填 | 说明 | 5860| -------- | ----------------------------- | ---- | ---------- | 5861| text | string | 是 | 文本字符串。 | 5862| glyphCount | number | 否 | 文本表示的字符数量,必须与[countText](#counttext12)获取的值相等,默认为text的字符数量,该参数为整数。 | 5863 5864**返回值:** 5865 5866| 类型 | 说明 | 5867| ------ | ---------------- | 5868| Array\<number> | 返回转换得到的字形索引数组。 | 5869 5870**错误码:** 5871 5872以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 5873 5874| 错误码ID | 错误信息 | 5875| ------- | --------------------------------------------| 5876| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 5877 5878**示例:** 5879 5880```ts 5881import { drawing } from '@kit.ArkGraphics2D'; 5882 5883let font : drawing.Font = new drawing.Font(); 5884let text : string = 'hello world'; 5885let glyphs : number[] = font.textToGlyphs(text); 5886console.info("drawing text toglyphs OnTestFunction num = " + glyphs.length ); 5887``` 5888 5889### getBounds<sup>18+</sup> 5890 5891getBounds(glyphs: Array\<number>): Array\<common2D.Rect> 5892 5893获取字形数组中每个字形的边界矩形。 5894 5895**系统能力:** SystemCapability.Graphics.Drawing 5896 5897**参数:** 5898 5899| 参数名 | 类型 | 必填 | 说明 | 5900| -------- | --------------------- | ---- | ------ | 5901| glyphs | Array\<number> | 是 | 字形索引数组,可由[textToGlyphs](#texttoglyphs12)生成。 | 5902 5903**返回值:** 5904 5905| 类型 | 说明 | 5906| ------ | ---------------- | 5907| Array\<[common2D.Rect](js-apis-graphics-common2D.md#rect)> | 返回字形边界矩形数组。 | 5908 5909**示例:** 5910 5911```ts 5912import { common2D, drawing } from '@kit.ArkGraphics2D'; 5913 5914let font: drawing.Font = new drawing.Font(); 5915let text: string = 'hello world'; 5916let glyphs: number[] = font.textToGlyphs(text); 5917let fontBounds: Array<common2D.Rect> = font.getBounds(glyphs); 5918for (let index = 0; index < fontBounds.length; index++) { 5919 console.info("get fontWidths[", index, "] left:", fontBounds[index].left, " top:", fontBounds[index].top, 5920 " right:", fontBounds[index].right, " bottom:", fontBounds[index].bottom); 5921} 5922``` 5923 5924### getTextPath<sup>18+</sup> 5925 5926getTextPath(text: string, byteLength: number, x: number, y: number): Path; 5927 5928获取文字的轮廓路径。 5929 5930**系统能力:** SystemCapability.Graphics.Drawing 5931 5932**参数:** 5933 5934| 参数名 | 类型 | 必填 | 说明 | 5935| ------ | ------------------------------------------------ | ---- | ---------------------- | 5936| text | string | 是 | 表示存储UTF-8 文本编码的字符。| 5937|byteLength| number | 是 | 表示要获取对应文本路径的字节长度,按传入的字节长度和实际的文本字节大小之间的最小值来获取对应的文本路径。| 5938| x | number | 是 | 表示文本在绘图区域内以原点为起始位置的X坐标。| 5939| y | number | 是 | 表示文本在绘图区域内以原点为起始位置的Y坐标。| 5940 5941**返回值:** 5942 5943| 类型 | 说明 | 5944| ------ | ---------------- | 5945| [Path](#path) | 返回获取到的文本的路径轮廓。 | 5946 5947**错误码:** 5948 5949以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 5950 5951| 错误码ID | 错误信息 | 5952| ------- | --------------------------------------------| 5953| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 5954 5955**示例:** 5956 5957```ts 5958import { drawing } from '@kit.ArkGraphics2D'; 5959import { buffer } from '@kit.ArkTS'; 5960import { RenderNode } from '@kit.ArkUI'; 5961 5962class DrawingRenderNode extends RenderNode { 5963 draw(context : DrawContext) { 5964 const canvas = context.canvas; 5965 let font = new drawing.Font(); 5966 font.setSize(50) 5967 let myString: string = "你好, HarmonyOS"; 5968 let length = buffer.from(myString).length; 5969 let path = font.getTextPath(myString, length, 0, 100) 5970 canvas.drawPath(path) 5971 } 5972} 5973``` 5974 5975### createPathForGlyph<sup>18+</sup> 5976 5977createPathForGlyph(index: number): Path 5978 5979获取指定字形的路径轮廓。 5980 5981**系统能力:** SystemCapability.Graphics.Drawing 5982 5983**参数:** 5984 5985| 参数名 | 类型 | 必填 | 说明 | 5986| -------- | --------------------- | ---- | ------ | 5987| index | number | 是 | 字形索引。 | 5988 5989**返回值:** 5990 5991| 类型 | 说明 | 5992| ------ | ---------------- | 5993| [Path](#path) | 返回指定字形的路径轮廓。 | 5994 5995**示例:** 5996 5997```ts 5998import { FrameNode, NodeController, RenderNode } from '@kit.ArkUI'; 5999import { drawing } from '@kit.ArkGraphics2D'; 6000 6001class DrawingRenderNode extends RenderNode { 6002 draw(context : DrawContext) { 6003 const canvas = context.canvas; 6004 let font = new drawing.Font(); 6005 font.setSize(50) 6006 let text: string = '你好'; 6007 let glyphs: number[] = font.textToGlyphs(text); 6008 for (let index = 0; index < glyphs.length; index++) { 6009 let path: drawing.Path = font.createPathForGlyph(glyphs[index]) 6010 canvas.drawPath(path) 6011 } 6012 } 6013} 6014``` 6015 6016### setThemeFontFollowed<sup>15+</sup> 6017 6018setThemeFontFollowed(followed: boolean): void 6019 6020设置字型中的字体是否跟随主题字体。设置跟随主题字体后,若系统启用主题字体并且字型未被设置字体,字型会使用该主题字体。 6021 6022**系统能力:** SystemCapability.Graphics.Drawing 6023 6024**参数:** 6025 6026| 参数名 | 类型 | 必填 | 说明 | 6027| -------- | ------ | ---- | ---------------- | 6028| followed | boolean | 是 | 字型中的字体是否跟随主题字体,true表示跟随主题字体,false表示不跟随主题字体。 | 6029 6030**错误码:** 6031 6032以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 6033 6034| 错误码ID | 错误信息 | 6035| ------- | --------------------------------------------| 6036| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6037 6038**示例:** 6039 6040```ts 6041import { drawing } from '@kit.ArkGraphics2D'; 6042 6043let font : drawing.Font = new drawing.Font(); 6044font.setThemeFontFollowed(true); 6045console.info("font is theme font followed: " + font.isThemeFontFollowed()); 6046``` 6047 6048### isThemeFontFollowed()<sup>15+</sup> 6049 6050isThemeFontFollowed(): boolean 6051 6052获取字型中的字体是否跟随主题字体。默认不跟随。 6053 6054**系统能力:** SystemCapability.Graphics.Drawing 6055 6056**返回值:** 6057 6058| 类型 | 说明 | 6059| ------ | ---------------- | 6060| boolean | 返回字型中的字体是否跟随主题字体的结果,true表示跟随主题字体,false表示不跟随主题字体。 | 6061 6062**示例:** 6063 6064```ts 6065import { drawing } from '@kit.ArkGraphics2D'; 6066 6067let font : drawing.Font = new drawing.Font(); 6068font.setThemeFontFollowed(true); 6069console.info("font is theme font followed: " + font.isThemeFontFollowed()); 6070``` 6071 6072## FontMetricsFlags<sup>12+</sup> 6073 6074字体度量标志枚举,指示字体度量中的各字段数据是否有效。 6075 6076**系统能力:** SystemCapability.Graphics.Drawing 6077 6078| 名称 | 值 | 说明 | 6079| ----------------------------- | --------- | ------------------------------ | 6080| UNDERLINE_THICKNESS_VALID | 1 << 0 | 表示[FontMetrics](#fontmetrics)结构中的underlineThickness(下划线厚度)字有效。 | 6081| UNDERLINE_POSITION_VALID | 1 << 1 | 表示[FontMetrics](#fontmetrics)结构中的underlinePosition(下划线位置)字段有效。 | 6082| STRIKETHROUGH_THICKNESS_VALID | 1 << 2 | 表示[FontMetrics](#fontmetrics)结构中strikethroughThickness(删除线厚度)是有效的。| 6083| STRIKETHROUGH_POSITION_VALID | 1 << 3 | 表示[FontMetrics](#fontmetrics)结构中strikethroughPosition(删除线位置)字段有效。 | 6084| BOUNDS_INVALID | 1 << 4 | 表示[FontMetrics](#fontmetrics)结构中的边界度量值(如top、bottom、xMin、xMax)无效。 | 6085 6086## FontMetrics 6087 6088描述字形大小和布局的属性信息,同一种字体中的字符属性大致相同。 6089 6090**系统能力:** SystemCapability.Graphics.Drawing 6091 6092| 名称 | 类型 | 只读 | 可选 | 说明 | 6093| ------- | ------ | ---- | ---- | ------------------------------------------------------------ | 6094| flags<sup>12+</sup> | [FontMetricsFlags](#fontmetricsflags12) | 否 | 是 | 表明哪些字体度量标志有效。 | 6095| top | number | 否 | 否 | 文字最高处到基线之间的最大距离,浮点数。 | 6096| ascent | number | 否 | 否 | 文字最高处到基线之间的距离,浮点数。 | 6097| descent | number | 否 | 否 | 基线到文字最低处之间的距离,浮点数。 | 6098| bottom | number | 否 | 否 | 基线到文字最低处之间的最大距离,浮点数。 | 6099| leading | number | 否 | 否 | 行间距,从上一行文字descent到下一行文字ascent之间的距离,浮点数。 | 6100| avgCharWidth<sup>12+</sup> | number | 否 | 是 | 平均字符宽度。 | 6101| maxCharWidth<sup>12+</sup> | number | 否 | 是 | 最大字符宽度。 | 6102| xMin<sup>12+</sup> | number | 否 | 是 | 字体中任意字形边界框最左边沿到原点的水平距离,这个值往往小于零,意味着字形在水平方向上的最小边界。 | 6103| xMax<sup>12+</sup> | number | 否 | 是 | 字体中任意字形边界框最右边沿到原点的水平距离,此值多为正数,指示了字形在水平方向上的最大延伸范围。 | 6104| xHeight<sup>12+</sup> | number | 否 | 是 | 小写字母x的高度,通常为负值。 | 6105| capHeight<sup>12+</sup> | number | 否 | 是 | 大写字母的高度,通常为负值。 | 6106| underlineThickness<sup>12+</sup> | number | 否 | 是 | 下划线的厚度。 | 6107| underlinePosition<sup>12+</sup> | number | 否 | 是 | 文本基线到下划线顶部的垂直距离,通常是正数。 | 6108| strikethroughThickness<sup>12+</sup> | number | 否 | 是 | 文本删除线的厚度,即贯穿文本字符的水平线的宽度。 | 6109| strikethroughPosition<sup>12+</sup> | number | 否 | 是 | 文本基线到底部删除线的垂直距离,通常为负值。 | 6110 6111## ColorFilter 6112 6113颜色滤波器。 6114 6115### createBlendModeColorFilter 6116 6117createBlendModeColorFilter(color: common2D.Color, mode: BlendMode) : ColorFilter 6118 6119创建指定的颜色和混合模式的颜色滤波器。 6120 6121**系统能力:** SystemCapability.Graphics.Drawing 6122 6123**参数:** 6124 6125| 参数名 | 类型 | 必填 | 说明 | 6126| ------ | ---------------------------------------------------- | ---- | ---------------- | 6127| color | [common2D.Color](js-apis-graphics-common2D.md#color) | 是 | ARGB格式的颜色,每个颜色通道的值是0到255之间的整数。 | 6128| mode | [BlendMode](#blendmode) | 是 | 颜色的混合模式。 | 6129 6130**返回值:** 6131 6132| 类型 | 说明 | 6133| --------------------------- | ------------------ | 6134| [ColorFilter](#colorfilter) | 返回颜色滤波器。 | 6135 6136**错误码:** 6137 6138以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 6139 6140| 错误码ID | 错误信息 | 6141| ------- | --------------------------------------------| 6142| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6143 6144**示例:** 6145 6146```ts 6147import { common2D, drawing } from '@kit.ArkGraphics2D'; 6148 6149const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 6150let colorFilter = drawing.ColorFilter.createBlendModeColorFilter(color, drawing.BlendMode.SRC); 6151``` 6152 6153### createBlendModeColorFilter<sup>18+</sup> 6154 6155static createBlendModeColorFilter(color: common2D.Color | number, mode: BlendMode) : ColorFilter 6156 6157使用指定的颜色和混合模式创建颜色滤波器。 6158 6159**系统能力:** SystemCapability.Graphics.Drawing 6160 6161**参数:** 6162 6163| 参数名 | 类型 | 必填 | 说明 | 6164| ------ | ---------------------------------------------------- | ---- | ---------------- | 6165| color | [common2D.Color](js-apis-graphics-common2D.md#color) \| number | 是 | 颜色,可以用16进制ARGB格式的无符号整数表示。 | 6166| mode | [BlendMode](#blendmode) | 是 | 颜色的混合模式。 | 6167 6168**返回值:** 6169 6170| 类型 | 说明 | 6171| --------------------------- | ------------------ | 6172| [ColorFilter](#colorfilter) | 返回颜色滤波器。 | 6173 6174**错误码:** 6175 6176以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 6177 6178| 错误码ID | 错误信息 | 6179| ------- | --------------------------------------------| 6180| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6181 6182**示例:** 6183 6184```ts 6185import { drawing } from '@kit.ArkGraphics2D'; 6186 6187let colorFilter = drawing.ColorFilter.createBlendModeColorFilter(0xffff0000, drawing.BlendMode.SRC); 6188``` 6189 6190### createComposeColorFilter 6191 6192createComposeColorFilter(outer: ColorFilter, inner: ColorFilter) : ColorFilter 6193 6194创建一个先应用inner进行滤波,再应用outer进行滤波的组合颜色滤波器。 6195 6196**系统能力:** SystemCapability.Graphics.Drawing 6197 6198**参数:** 6199 6200| 参数名 | 类型 | 必填 | 说明 | 6201| ------ | --------------------------- | ---- | -------------------------------- | 6202| outer | [ColorFilter](#colorfilter) | 是 | 组合滤波器中后生效的颜色滤波器。 | 6203| inner | [ColorFilter](#colorfilter) | 是 | 组合滤波器中先生效的颜色滤波器。 | 6204 6205**返回值:** 6206 6207| 类型 | 说明 | 6208| --------------------------- | ------------------ | 6209| [ColorFilter](#colorfilter) | 返回颜色滤波器。 | 6210 6211**错误码:** 6212 6213以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 6214 6215| 错误码ID | 错误信息 | 6216| ------- | --------------------------------------------| 6217| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6218 6219**示例:** 6220 6221```ts 6222import { common2D, drawing } from '@kit.ArkGraphics2D'; 6223 6224const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 6225let colorFilter1 = drawing.ColorFilter.createBlendModeColorFilter(color, drawing.BlendMode.SRC); 6226let colorFilter2 = drawing.ColorFilter.createBlendModeColorFilter(color, drawing.BlendMode.DST); 6227let colorFilter = drawing.ColorFilter.createComposeColorFilter(colorFilter1, colorFilter2); 6228``` 6229 6230### createLinearToSRGBGamma 6231 6232createLinearToSRGBGamma() : ColorFilter 6233 6234创建一个从线性颜色空间转换到SRGB颜色空间的颜色滤波器。 6235 6236**系统能力:** SystemCapability.Graphics.Drawing 6237 6238**返回值:** 6239 6240| 类型 | 说明 | 6241| --------------------------- | ------------------ | 6242| [ColorFilter](#colorfilter) | 返回颜色滤波器。 | 6243 6244**示例:** 6245 6246```ts 6247import { drawing } from '@kit.ArkGraphics2D'; 6248 6249let colorFilter = drawing.ColorFilter.createLinearToSRGBGamma(); 6250``` 6251 6252### createSRGBGammaToLinear 6253 6254createSRGBGammaToLinear() : ColorFilter 6255 6256创建一个从SRGB颜色空间转换到线性颜色空间的颜色滤波器。 6257 6258**系统能力:** SystemCapability.Graphics.Drawing 6259 6260**返回值:** 6261 6262| 类型 | 说明 | 6263| --------------------------- | ------------------ | 6264| [ColorFilter](#colorfilter) | 返回颜色滤波器。 | 6265 6266**示例:** 6267 6268```ts 6269import { drawing } from '@kit.ArkGraphics2D'; 6270 6271let colorFilter = drawing.ColorFilter.createSRGBGammaToLinear(); 6272``` 6273 6274### createLumaColorFilter 6275 6276createLumaColorFilter() : ColorFilter 6277 6278创建一个颜色滤波器将其输入的亮度值乘以透明度通道,并将红色、绿色和蓝色通道设置为零。 6279 6280**系统能力:** SystemCapability.Graphics.Drawing 6281 6282**返回值:** 6283 6284| 类型 | 说明 | 6285| --------------------------- | ------------------ | 6286| [ColorFilter](#colorfilter) | 返回颜色滤波器。 | 6287 6288**示例:** 6289 6290```ts 6291import { drawing } from '@kit.ArkGraphics2D'; 6292 6293let colorFilter = drawing.ColorFilter.createLumaColorFilter(); 6294``` 6295 6296### createMatrixColorFilter<sup>12+</sup> 6297 6298static createMatrixColorFilter(matrix: Array\<number>): ColorFilter 6299 6300创建颜色滤波器,通过4x5颜色矩阵变换颜色。 6301 6302**系统能力:** SystemCapability.Graphics.Drawing 6303 6304**参数:** 6305 6306| 参数名 | 类型 | 必填 | 说明 | 6307| -------- | -------------------------------------------- | ---- | ------------------------------- | 6308| matrix | Array\<number> | 是 | 长度为20的数组,表示用于颜色变换的4*5矩阵。 | 6309 6310**返回值:** 6311 6312| 类型 | 说明 | 6313| --------------------------- | ------------------ | 6314| [ColorFilter](#colorfilter) | 返回颜色滤波器。 | 6315 6316**错误码:** 6317 6318以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 6319 6320| 错误码ID | 错误信息 | 6321| ------- | --------------------------------------------| 6322| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6323 6324**示例:** 6325 6326```ts 6327import { drawing } from '@kit.ArkGraphics2D'; 6328 6329let matrix: Array<number> = [ 6330 1, 0, 0, 0, 0, 6331 0, 1, 0, 0, 0, 6332 0, 0, 100, 0, 0, 6333 0, 0, 0, 1, 0 6334]; 6335let colorFilter = drawing.ColorFilter.createMatrixColorFilter(matrix); 6336``` 6337### createLightingColorFilter<sup>20+</sup> 6338 6339static createLightingColorFilter(mutColor: common2D.Color | number, addColor: common2D.Color | number): ColorFilter 6340 6341创建一个光照颜色滤波器,此滤波器会将RGB通道的颜色值乘以一种颜色值并加上另一种颜色值,计算结果会被限制在0到255范围内。 6342 6343**系统能力:** SystemCapability.Graphics.Drawing 6344 6345**参数:** 6346 6347| 参数名 | 类型 | 必填 | 说明 | 6348| -------- | -------------------------------------------- | ---- | ------------------------------- | 6349| mutColor | [common2D.Color](js-apis-graphics-common2D.md#color) \| number | 是 | 用来进行乘法运算的颜色,ARGB格式的颜色,每个颜色通道是0到255之间的整数。为number类型时必须是16进制ARGB格式的无符号整数。 | 6350| addColor | [common2D.Color](js-apis-graphics-common2D.md#color) \| number | 是 | 用来进行加法运算的颜色,ARGB格式的颜色,每个颜色通道是0到255之间的整数。为number类型时必须是16进制ARGB格式的无符号整数。 | 6351 6352**返回值:** 6353 6354| 类型 | 说明 | 6355| --------------------------- | ------------------ | 6356| [ColorFilter](#colorfilter) | 返回一个颜色滤波器。 | 6357 6358**示例:** 6359 6360```ts 6361import { common2D, drawing } from '@kit.ArkGraphics2D'; 6362let mulColor : common2D.Color = { alpha: 0, red: 0, green: 0, blue: 20 }; 6363let addColor : common2D.Color = { alpha: 0, red: 0, green: 0, blue: 125 }; 6364let colorFilter = drawing.ColorFilter.createLightingColorFilter(mulColor, addColor); 6365``` 6366## JoinStyle<sup>12+</sup> 6367 6368定义线条转角样式的枚举,即画笔在绘制折线段时,在折线转角处的样式。 6369 6370**系统能力:** SystemCapability.Graphics.Drawing 6371 6372| 名称 | 值 | 说明 | 示意图 | 6373| ----------- | ---- | ----------------------------------------------------------- | -------- | 6374| MITER_JOIN | 0 | 转角类型为尖角,如果折线角度比较小,则尖角会很长,需要使用限制值(miter limit)进行限制。 |  | 6375| ROUND_JOIN | 1 | 转角类型为圆头。 |  | 6376| BEVEL_JOIN | 2 | 转角类型为平头。 |  | 6377 6378## CapStyle<sup>12+</sup> 6379 6380定义线帽样式的枚举,即画笔在绘制线段时,在线段头尾端点的样式。 6381 6382**系统能力:** SystemCapability.Graphics.Drawing 6383 6384| 名称 | 值 | 说明 | 示意图 | 6385| ---------- | ---- | ----------------------------------------------------------- | -------- | 6386| FLAT_CAP | 0 | 没有线帽样式,线条头尾端点处横切。 |  | 6387| SQUARE_CAP | 1 | 线帽的样式为方框,线条的头尾端点处多出一个方框,方框宽度和线段一样宽,高度是线段宽度的一半。 |  | 6388| ROUND_CAP | 2 | 线帽的样式为圆弧,线条的头尾端点处多出一个半圆弧,半圆的直径与线段宽度一致。 |  | 6389 6390## BlurType<sup>12+</sup> 6391 6392定义蒙版滤镜模糊中操作类型的枚举。 6393 6394**系统能力:** SystemCapability.Graphics.Drawing 6395 6396| 名称 | 值 | 说明 | 示意图 | 6397| ------ | - | ------------------ | -------- | 6398| NORMAL | 0 | 全面模糊,外圈边缘和内部实体一起模糊。 |  | 6399| SOLID | 1 | 内部实体不变,只模糊外圈边缘部分。 |  | 6400| OUTER | 2 | 只有外圈边缘模糊,内部实体完全透明。 |  | 6401| INNER | 3 | 只有内部实体模糊,外圈边缘清晰。 |  | 6402 6403## SamplingOptions<sup>12+</sup> 6404 6405采样选项对象。 6406 6407### constructor<sup>12+</sup> 6408 6409constructor() 6410 6411构造一个新的采样选项对象,[FilterMode](#filtermode12)的默认值为FILTER_MODE_NEAREST。 6412 6413**系统能力:** SystemCapability.Graphics.Drawing 6414 6415**示例:** 6416 6417```ts 6418import { RenderNode } from '@kit.ArkUI'; 6419import { common2D, drawing } from '@kit.ArkGraphics2D'; 6420 6421class DrawingRenderNode extends RenderNode { 6422 draw(context : DrawContext) { 6423 const canvas = context.canvas; 6424 const pen = new drawing.Pen(); 6425 let samplingOptions = new drawing.SamplingOptions(); 6426 } 6427} 6428``` 6429 6430### constructor<sup>12+</sup> 6431 6432constructor(filterMode: FilterMode) 6433 6434构造一个新的采样选项对象。 6435 6436**系统能力:** SystemCapability.Graphics.Drawing 6437 6438**参数:** 6439 6440| 参数名 | 类型 | 必填 | 说明 | 6441| ---------- | --------------------- | ---- | ----------------------------------- | 6442| filterMode | [FilterMode](#filtermode12) | 是 | 过滤模式。 | 6443 6444**错误码:** 6445 6446以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 6447 6448| 错误码ID | 错误信息 | 6449| ------- | --------------------------------------------| 6450| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 6451 6452**示例:** 6453 6454```ts 6455import { RenderNode } from '@kit.ArkUI'; 6456import { common2D, drawing } from '@kit.ArkGraphics2D'; 6457 6458class DrawingRenderNode extends RenderNode { 6459 draw(context : DrawContext) { 6460 const canvas = context.canvas; 6461 let samplingOptions = new drawing.SamplingOptions(drawing.FilterMode.FILTER_MODE_NEAREST); 6462 } 6463} 6464``` 6465 6466## Lattice<sup>12+</sup> 6467 6468矩形网格对象。该对象用于将图片按照矩形网格进行划分。 6469 6470### createImageLattice<sup>12+</sup> 6471 6472static createImageLattice(xDivs: Array\<number>, yDivs: Array\<number>, fXCount: number, fYCount: number, fBounds?: common2D.Rect | null, fRectTypes?: Array\<RectType> | null, fColors?: Array\<common2D.Color> | null): Lattice 6473 6474创建矩形网格对象。将图像划分为矩形网格,同时处于偶数列和偶数行上的网格是固定的,如果目标网格足够大,则这些固定网格以其原始大小进行绘制。如果目标网格太小,无法容纳这些固定网格,则所有固定网格都会按比例缩小以适应目标网格。其余网格将进行缩放,来适应剩余的空间。 6475 6476**系统能力:** SystemCapability.Graphics.Drawing 6477 6478**参数:** 6479 6480| 参数名 | 类型 | 必填 | 说明 | 6481| ------------ | ------------------------------------------------------------------ | ---- | --------------------------------------------------------------------------------- | 6482| xDivs | Array\<number> | 是 | 用于划分图像的X坐标值数组。该参数为整数。 | 6483| yDivs | Array\<number> | 是 | 用于划分图像的Y坐标值数组。该参数为整数。 | 6484| fXCount | number | 是 | X坐标值数组的大小。基于功能和性能的考虑,取值范围为[0, 5]。 | 6485| fYCount | number | 是 | Y坐标值数组的大小。基于功能和性能的考虑,取值范围为[0, 5]。 | 6486| fBounds | [common2D.Rect](js-apis-graphics-common2D.md#rect)\|null | 否 | 可选,要绘制的原始边界矩形,矩形参数须为整数,默认为原始图像矩形大小(若矩形参数为小数,会直接舍弃小数部分,转为整数)。 | 6487| fRectTypes | Array\<[RectType](#recttype12)>\|null | 否 | 可选,填充网格类型的数组,默认为空。如果设置,大小必须为(fXCount + 1) * (fYCount + 1)。 | 6488| fColors | Array\<[common2D.Color](js-apis-graphics-common2D.md#color)>\|null | 否 | 可选,填充网格的颜色数组,默认为空。如果设置,大小必须为(fXCount + 1) * (fYCount + 1)。 | 6489 6490**返回值:** 6491 6492| 类型 | 说明 | 6493| ------------------------- | ----------------------------------- | 6494| [Lattice](#lattice12) | 返回创建的矩形网格对象。 | 6495 6496**错误码:** 6497 6498以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 6499 6500| 错误码ID | 错误信息 | 6501| ------- | --------------------------------------------| 6502| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6503 6504**示例:** 6505 6506```ts 6507import { RenderNode } from '@kit.ArkUI'; 6508import { drawing } from '@kit.ArkGraphics2D'; 6509 6510class DrawingRenderNode extends RenderNode { 6511 draw(context : DrawContext) { 6512 let xDivs : Array<number> = [1, 2, 4]; 6513 let yDivs : Array<number> = [1, 2, 4]; 6514 let lattice = drawing.Lattice.createImageLattice(xDivs, yDivs, 3, 3); // 划分(3+1)*(3+1)的网格,下图蓝色填充矩形为固定网格 6515 } 6516} 6517``` 6518 6519 6520### createImageLattice<sup>18+</sup> 6521 6522static createImageLattice(xDivs: Array\<number>, yDivs: Array\<number>, fXCount: number, fYCount: number, fBounds?: common2D.Rect | null, fRectTypes?: Array\<RectType> | null, fColors?: Array\<number> | null): Lattice 6523 6524创建矩形网格对象。将图像划分为矩形网格,同时处于偶数列和偶数行上的网格是固定的,如果目标网格足够大,则这些固定网格以其原始大小进行绘制。如果目标网格太小,无法容纳这些固定网格,则所有固定网格都会按比例缩小以适应目标网格。其余网格将进行缩放,来适应剩余的空间。 6525 6526**系统能力:** SystemCapability.Graphics.Drawing 6527 6528**参数:** 6529 6530| 参数名 | 类型 | 必填 | 说明 | 6531| ------------ | ------------------------------------------------------------------ | ---- | --------------------------------------------------------------------------------- | 6532| xDivs | Array\<number> | 是 | 用于划分图像的X坐标值数组。该参数为整数。 | 6533| yDivs | Array\<number> | 是 | 用于划分图像的Y坐标值数组。该参数为整数。 | 6534| fXCount | number | 是 | X坐标值数组的大小。基于功能和性能的考虑,取值范围为[0, 5]。 | 6535| fYCount | number | 是 | Y坐标值数组的大小。基于功能和性能的考虑,取值范围为[0, 5]。 | 6536| fBounds | [common2D.Rect](js-apis-graphics-common2D.md#rect)\|null | 否 | 可选,要绘制的原始边界矩形,矩形参数须为整数,默认为原始图像矩形大小(若矩形参数为小数,会直接舍弃小数部分,转为整数)。 | 6537| fRectTypes | Array\<[RectType](#recttype12)>\|null | 否 | 可选,填充网格类型的数组,默认为空。如果设置,大小必须为(fXCount + 1) * (fYCount + 1)。 | 6538| fColors | Array\<number>\|null | 否 | 可选,填充网格的颜色数组,颜色用16进制ARGB格式的32位无符号整数表示,参数默认为空。如果设置,大小必须为(fXCount + 1) * (fYCount + 1)。 | 6539 6540**返回值:** 6541 6542| 类型 | 说明 | 6543| ------------------------- | ----------------------------------- | 6544| [Lattice](#lattice12) | 返回创建的矩形网格对象。 | 6545 6546**错误码:** 6547 6548以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 6549 6550| 错误码ID | 错误信息 | 6551| ------- | --------------------------------------------| 6552| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6553 6554**示例:** 6555 6556```ts 6557import { RenderNode } from '@kit.ArkUI'; 6558import { drawing } from '@kit.ArkGraphics2D'; 6559 6560class DrawingRenderNode extends RenderNode { 6561 draw(context : DrawContext) { 6562 let xDivs : Array<number> = [1, 2, 4]; 6563 let yDivs : Array<number> = [1, 2, 4]; 6564 let colorArray :Array<number>=[0xffffffff,0x44444444,0x99999999,0xffffffff,0x44444444,0x99999999,0xffffffff,0x44444444,0x99999999,0x44444444,0x99999999,0xffffffff,0x44444444,0x99999999,0xffffffff,0x44444444]; 6565 let lattice = drawing.Lattice.createImageLattice(xDivs, yDivs, 3, 3,null,null,colorArray); 6566 } 6567} 6568``` 6569 6570## RectType<sup>12+</sup> 6571 6572定义填充网格的矩形类型的枚举。仅在[Lattice](#lattice12)中使用。 6573 6574**系统能力:** SystemCapability.Graphics.Drawing 6575 6576| 名称 | 值 | 说明 | 6577| ------------ | ---- | --------------------------------------------------------------- | 6578| DEFAULT | 0 | 将图像绘制到矩形网格中。 | 6579| TRANSPARENT | 1 | 将矩形网格设置为透明的。 | 6580| FIXEDCOLOR | 2 | 将[Lattice](#lattice12)中fColors数组的颜色绘制到矩形网格中。 | 6581 6582## MaskFilter<sup>12+</sup> 6583 6584蒙版滤镜对象。 6585 6586### createBlurMaskFilter<sup>12+</sup> 6587 6588static createBlurMaskFilter(blurType: BlurType, sigma: number): MaskFilter 6589 6590创建具有模糊效果的蒙版滤镜。 6591 6592**系统能力:** SystemCapability.Graphics.Drawing 6593 6594**参数:** 6595 6596| 参数名 | 类型 | 必填 | 说明 | 6597| ---------- | --------------------- | ---- | ----------------------------------- | 6598| blurType | [BlurType](#blurtype12) | 是 | 模糊类型。 | 6599| sigma | number | 是 | 高斯模糊的标准偏差,必须为大于0的浮点数。 | 6600 6601**返回值:** 6602 6603| 类型 | 说明 | 6604| ------------------------- | ------------------ | 6605| [MaskFilter](#maskfilter12) | 返回创建的蒙版滤镜对象。 | 6606 6607**错误码:** 6608 6609以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 6610 6611| 错误码ID | 错误信息 | 6612| ------- | --------------------------------------------| 6613| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6614 6615**示例:** 6616 6617```ts 6618import { RenderNode } from '@kit.ArkUI'; 6619import { common2D, drawing } from '@kit.ArkGraphics2D'; 6620 6621class DrawingRenderNode extends RenderNode { 6622 draw(context : DrawContext) { 6623 const canvas = context.canvas; 6624 let maskFilter = drawing.MaskFilter.createBlurMaskFilter(drawing.BlurType.OUTER, 10); 6625 } 6626} 6627``` 6628 6629## PathDashStyle<sup>18+</sup> 6630 6631路径效果的绘制样式枚举。 6632 6633**系统能力:** SystemCapability.Graphics.Drawing 6634 6635| 名称 | 值 | 说明 | 6636| ------ | - | ------------------ | 6637| TRANSLATE | 0 | 不会随着路径旋转,只会平移。 | 6638| ROTATE | 1 | 随着路径的旋转而旋转。 | 6639| MORPH | 2 | 随着路径的旋转而旋转,并在转折处进行拉伸或压缩等操作以增加平滑度。 | 6640 6641## PathEffect<sup>12+</sup> 6642 6643路径效果对象。 6644 6645### createDashPathEffect<sup>12+</sup> 6646 6647static createDashPathEffect(intervals: Array\<number>, phase: number): PathEffect 6648 6649创建将路径变为虚线的路径效果对象。 6650 6651**系统能力:** SystemCapability.Graphics.Drawing 6652 6653**参数:** 6654 6655| 参数名 | 类型 | 必填 | 说明 | 6656| ---------- | ------------- | ------- | -------------------------------------------------- | 6657| intervals | Array\<number> | 是 | 表示虚线的ON和OFF长度的数组,数组个数必须是偶数,且>=2,该参数为正整数。| 6658| phase | number | 是 | 绘制时的偏移量,该参数为浮点数。 | 6659 6660**返回值:** 6661 6662| 类型 | 说明 | 6663| ------------------------- | --------------------- | 6664| [PathEffect](#patheffect12) | 返回创建的路径效果对象。 | 6665 6666**错误码:** 6667 6668以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 6669 6670| 错误码ID | 错误信息 | 6671| ------- | --------------------------------------------| 6672| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6673 6674**示例:** 6675 6676```ts 6677import { RenderNode } from '@kit.ArkUI'; 6678import { common2D, drawing } from '@kit.ArkGraphics2D'; 6679 6680class DrawingRenderNode extends RenderNode { 6681 draw(context : DrawContext) { 6682 const canvas = context.canvas; 6683 let intervals = [10, 5]; 6684 let effect = drawing.PathEffect.createDashPathEffect(intervals, 5); 6685 } 6686} 6687``` 6688 6689### createPathDashEffect<sup>18+</sup> 6690 6691static createPathDashEffect(path: Path, advance: number, phase: number, style: PathDashStyle): PathEffect 6692 6693通过路径描述的形状创建一个虚线路径效果。 6694 6695**系统能力:** SystemCapability.Graphics.Drawing 6696 6697**参数:** 6698 6699| 参数名 | 类型 | 必填 | 说明 | 6700| ---------- | ------------- | ------- | -------------------------------------------------- | 6701| path | [Path](#path) | 是 | 通过该路径生成一个图形,用来填充每个虚线段。| 6702| advance | number | 是 | 虚线段的步长,该参数为大于0的浮点数,否则会抛错误码。 | 6703| phase | number | 是 | 表示虚线段内图形在虚线步长范围内的偏移量,该参数为浮点数,效果为先对偏移量取绝对值,然后对步长取模。 | 6704| style | [PathDashStyle](#pathdashstyle18) | 是 | 指定虚线效果的样式。 | 6705 6706**返回值:** 6707 6708| 类型 | 说明 | 6709| ------------------------- | --------------------- | 6710| [PathEffect](#patheffect12) | 返回创建的路径效果对象。 | 6711 6712**错误码:** 6713 6714以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 6715 6716| 错误码ID | 错误信息 | 6717| ------- | --------------------------------------------| 6718| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3. Parameter verification failed. | 6719 6720**示例:** 6721 6722```ts 6723import { RenderNode } from '@kit.ArkUI'; 6724import { common2D, drawing } from '@kit.ArkGraphics2D'; 6725 6726class DrawingRenderNode extends RenderNode { 6727 draw(context : DrawContext) { 6728 const canvas = context.canvas; 6729 let pen = new drawing.Pen(); 6730 const penColor: common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 } 6731 pen.setColor(penColor); 6732 pen.setStrokeWidth(10); 6733 canvas.attachPen(pen); 6734 pen.setAntiAlias(true); 6735 6736 const path = new drawing.Path(); 6737 path.moveTo(100, 100); 6738 path.lineTo(150, 50); 6739 path.lineTo(200, 100); 6740 6741 const path1 = new drawing.Path(); 6742 path1.moveTo(0, 0); 6743 path1.lineTo(10, 0); 6744 path1.lineTo(20, 10); 6745 path1.lineTo(0,10); 6746 6747 let pathEffect1: drawing.PathEffect = drawing.PathEffect.createPathDashEffect(path1, 50, -30, 6748 drawing.PathDashStyle.MORPH); 6749 pen.setPathEffect(pathEffect1); 6750 6751 canvas.attachPen(pen); 6752 canvas.drawPath(path); 6753 canvas.detachPen(); 6754 } 6755} 6756``` 6757 6758### createSumPathEffect<sup>18+</sup> 6759 6760static createSumPathEffect(firstPathEffect: PathEffect, secondPathEffect: PathEffect): PathEffect 6761 6762创建一个叠加的路径效果。与createComposePathEffect不同,此接口会分别对两个参数的效果各自独立进行表现,然后将两个效果简单重叠显示。 6763 6764**系统能力:** SystemCapability.Graphics.Drawing 6765 6766**参数:** 6767 6768| 参数名 | 类型 | 必填 | 说明 | 6769| ---------- | ------------- | ------- | -------------------------------------------------- | 6770| firstPathEffect | [PathEffect](#patheffect12) | 是 | 表示第一个路径效果。 | 6771| secondPathEffect | [PathEffect](#patheffect12) | 是 | 表示第二个路径效果。 | 6772 6773**返回值:** 6774 6775| 类型 | 说明 | 6776| ------------------------- | --------------------- | 6777| [PathEffect](#patheffect12) | 返回创建的路径效果对象。 | 6778 6779**示例:** 6780 6781```ts 6782import { RenderNode } from '@kit.ArkUI'; 6783import { drawing } from '@kit.ArkGraphics2D'; 6784 6785class DrawingRenderNode extends RenderNode { 6786 draw(context : DrawContext) { 6787 const canvas = context.canvas; 6788 let intervals = [10, 5]; 6789 let pathEffectOne = drawing.PathEffect.createDashPathEffect(intervals, 5); 6790 let pathEffectTwo = drawing.PathEffect.createDashPathEffect(intervals, 10); 6791 let effect = drawing.PathEffect.createSumPathEffect(pathEffectOne, pathEffectTwo); 6792 } 6793} 6794``` 6795 6796### createCornerPathEffect<sup>12+</sup> 6797 6798static createCornerPathEffect(radius: number): PathEffect 6799 6800创建将路径的夹角变成指定半径的圆角的路径效果对象。 6801 6802**系统能力:** SystemCapability.Graphics.Drawing 6803 6804**参数:** 6805 6806| 参数名 | 类型 | 必填 | 说明 | 6807| ---------- | ------------- | ------- | -------------------------------------------------- | 6808| radius | number | 是 | 圆角的半径,必须大于0,该参数为浮点数。 | 6809 6810**返回值:** 6811 6812| 类型 | 说明 | 6813| ------------------------- | --------------------- | 6814| [PathEffect](#patheffect12) | 返回创建的路径效果对象。 | 6815 6816**错误码:** 6817 6818以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 6819 6820| 错误码ID | 错误信息 | 6821| ------- | --------------------------------------------| 6822| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6823 6824**示例:** 6825 6826```ts 6827import { RenderNode } from '@kit.ArkUI'; 6828import { drawing } from '@kit.ArkGraphics2D'; 6829 6830class DrawingRenderNode extends RenderNode { 6831 draw(context : DrawContext) { 6832 const canvas = context.canvas; 6833 let effect = drawing.PathEffect.createCornerPathEffect(30); 6834 } 6835} 6836``` 6837 6838### createDiscretePathEffect<sup>18+</sup> 6839 6840static createDiscretePathEffect(segLength: number, dev: number, seedAssist?: number): PathEffect 6841 6842创建一种将路径打散,并且在路径上产生不规则分布的效果。 6843 6844**系统能力:** SystemCapability.Graphics.Drawing 6845 6846**参数:** 6847 6848| 参数名 | 类型 | 必填 | 说明 | 6849| ---------- | ------------- | ------- | -------------------------------------------------- | 6850| segLength | number | 是 | 路径中每进行一次打散操作的长度,该长度为浮点数,负数和0时无效果。 | 6851| dev | number | 是 | 绘制时的末端点的最大移动偏离量,该偏移量为浮点数。 | 6852| seedAssist | number | 否 | 生成效果伪随机种子辅助变量,默认值为0,该参数为32位无符号整数。 | 6853 6854**返回值:** 6855 6856| 类型 | 说明 | 6857| ------------------------- | --------------------- | 6858| [PathEffect](#patheffect12) | 返回创建的路径效果对象。 | 6859 6860**示例:** 6861 6862```ts 6863import { RenderNode } from '@kit.ArkUI'; 6864import { drawing } from '@kit.ArkGraphics2D'; 6865 6866class DrawingRenderNode extends RenderNode { 6867 draw(context : DrawContext) { 6868 const canvas = context.canvas; 6869 let effect = drawing.PathEffect.createDiscretePathEffect(100, -50, 0); 6870 } 6871} 6872``` 6873 6874### createComposePathEffect<sup>18+</sup> 6875 6876static createComposePathEffect(outer: PathEffect, inner: PathEffect): PathEffect 6877 6878创建路径组合的路径效果对象,首先应用内部路径效果,然后应用外部路径效果。 6879 6880**系统能力:** SystemCapability.Graphics.Drawing 6881 6882**参数:** 6883 6884| 参数名 | 类型 | 必填 | 说明 | 6885| ------ | --------------------------- | ---- | -------------------------------- | 6886| outer | [PathEffect](#patheffect12) | 是 | 组合路径效果中外部路径效果。 | 6887| inner | [PathEffect](#patheffect12) | 是 | 组合路径效果中内部路径效果。 | 6888 6889**返回值:** 6890 6891| 类型 | 说明 | 6892| ------------------------- | --------------------- | 6893| [PathEffect](#patheffect12) | 返回创建的路径效果对象。 | 6894 6895**示例:** 6896 6897```ts 6898import { RenderNode } from '@kit.ArkUI'; 6899import { drawing } from '@kit.ArkGraphics2D'; 6900 6901class DrawingRenderNode extends RenderNode { 6902 draw(context : DrawContext) { 6903 const canvas = context.canvas; 6904 let pathEffect1 = drawing.PathEffect.createCornerPathEffect(100); 6905 let pathEffect2 = drawing.PathEffect.createCornerPathEffect(10); 6906 let effect = drawing.PathEffect.createComposePathEffect(pathEffect1, pathEffect2); 6907 } 6908} 6909``` 6910 6911## ShadowLayer<sup>12+</sup> 6912 6913阴影层对象。 6914 6915### create<sup>12+</sup> 6916 6917static create(blurRadius: number, x: number, y: number, color: common2D.Color): ShadowLayer 6918 6919创建阴影层对象。 6920 6921**系统能力:** SystemCapability.Graphics.Drawing 6922 6923**参数:** 6924 6925| 参数名 | 类型 | 必填 | 说明 | 6926| ---------- | -------- | ---- | ----------------------------------- | 6927| blurRadius | number | 是 | 阴影的半径,必须为大于零的浮点数。 | 6928| x | number | 是 | x轴上的偏移点,该参数为浮点数。 | 6929| y | number | 是 | Y轴上的偏移点,该参数为浮点数。 | 6930| color | [common2D.Color](js-apis-graphics-common2D.md#color) | 是 | ARGB格式的颜色,每个颜色通道的值是0到255之间的整数。 | 6931 6932**返回值:** 6933 6934| 类型 | 说明 | 6935| --------------------------- | -------------------- | 6936| [ShadowLayer](#shadowlayer12) | 返回创建的阴影层对象。 | 6937 6938**错误码:** 6939 6940以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 6941 6942| 错误码ID | 错误信息 | 6943| ------- | --------------------------------------------| 6944| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6945 6946**示例:** 6947 6948```ts 6949import { RenderNode } from '@kit.ArkUI'; 6950import { common2D, drawing } from '@kit.ArkGraphics2D'; 6951 6952class DrawingRenderNode extends RenderNode { 6953 draw(context : DrawContext) { 6954 const canvas = context.canvas; 6955 let color : common2D.Color = {alpha: 0xFF, red: 0x00, green: 0xFF, blue: 0x00}; 6956 let shadowLayer = drawing.ShadowLayer.create(3, -3, 3, color); 6957 } 6958} 6959``` 6960 6961### create<sup>18+</sup> 6962 6963static create(blurRadius: number, x: number, y: number, color: common2D.Color | number): ShadowLayer 6964 6965创建阴影层对象。 6966 6967**系统能力:** SystemCapability.Graphics.Drawing 6968 6969**参数:** 6970 6971| 参数名 | 类型 | 必填 | 说明 | 6972| ---------- | -------- | ---- | ----------------------------------- | 6973| blurRadius | number | 是 | 阴影的半径,必须为大于零的浮点数。 | 6974| x | number | 是 | x轴上的偏移点,该参数为浮点数。 | 6975| y | number | 是 | Y轴上的偏移点,该参数为浮点数。 | 6976| color | [common2D.Color](js-apis-graphics-common2D.md#color) \| number | 是 | 颜色,可以用16进制ARGB格式的无符号整数表示。 | 6977 6978**返回值:** 6979 6980| 类型 | 说明 | 6981| --------------------------- | -------------------- | 6982| [ShadowLayer](#shadowlayer12) | 返回创建的阴影层对象。 | 6983 6984**错误码:** 6985 6986以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 6987 6988| 错误码ID | 错误信息 | 6989| ------- | --------------------------------------------| 6990| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 6991 6992**示例:** 6993 6994```ts 6995import { RenderNode } from '@kit.ArkUI'; 6996import { drawing } from '@kit.ArkGraphics2D'; 6997 6998class DrawingRenderNode extends RenderNode { 6999 draw(context : DrawContext) { 7000 const canvas = context.canvas; 7001 let shadowLayer = drawing.ShadowLayer.create(3, -3, 3, 0xff00ff00); 7002 } 7003} 7004``` 7005 7006## Pen 7007 7008画笔对象,描述所绘制图形形状的轮廓信息。 7009 7010### constructor<sup>12+</sup> 7011 7012constructor() 7013 7014构造一个新的画笔对象。 7015 7016**系统能力:** SystemCapability.Graphics.Drawing 7017 7018**示例:** 7019 7020```ts 7021import { drawing } from '@kit.ArkGraphics2D'; 7022 7023const pen = new drawing.Pen(); 7024``` 7025 7026### constructor<sup>12+</sup> 7027 7028constructor(pen: Pen) 7029 7030复制构造一个新的画笔对象。 7031 7032**系统能力:** SystemCapability.Graphics.Drawing 7033 7034**参数:** 7035 7036| 参数名 | 类型 | 必填 | 说明 | 7037| ------| ----------- | ---- | ---------------- | 7038| pen | [Pen](#pen) | 是 | 待复制的画笔对象。 | 7039 7040**错误码:** 7041 7042以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 7043 7044| 错误码ID | 错误信息 | 7045| ------- | --------------------------------------------| 7046| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7047 7048**示例:** 7049 7050```ts 7051import { common2D, drawing } from '@kit.ArkGraphics2D'; 7052 7053const pen = new drawing.Pen(); 7054const penColor: common2D.Color = { alpha: 255, red: 0, green: 255, blue: 0 }; 7055pen.setColor(penColor); 7056pen.setStrokeWidth(10); 7057const newPen = new drawing.Pen(pen); 7058``` 7059 7060### setMiterLimit<sup>12+</sup> 7061 7062setMiterLimit(miter: number): void 7063 7064设置折线尖角长度与线宽的最大比值,当画笔绘制一条折线,并且[JoinStyle](#joinstyle12)为MITER_JOIN时,若尖角长度与线宽的比值大于限制值,则该折角使用BEVEL_JOIN绘制。 7065 7066**系统能力:** SystemCapability.Graphics.Drawing 7067 7068**参数:** 7069 7070| 参数名 | 类型 | 必填 | 说明 | 7071| ------ | ------ | ---- | ---------------- | 7072| miter | number | 是 | 折线尖角长度与线宽的最大比值,负数在绘制时会被视作4.0处理,非负数正常生效,该参数为浮点数。 | 7073 7074**错误码:** 7075 7076以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 7077 7078| 错误码ID | 错误信息 | 7079| ------- | --------------------------------------------| 7080| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7081 7082**示例:** 7083 7084```ts 7085import { drawing } from '@kit.ArkGraphics2D'; 7086 7087const pen = new drawing.Pen(); 7088pen.setMiterLimit(5); 7089``` 7090 7091### getMiterLimit<sup>12+</sup> 7092 7093getMiterLimit(): number 7094 7095获取折线尖角的限制值。 7096 7097**系统能力:** SystemCapability.Graphics.Drawing 7098 7099**返回值:** 7100 7101| 类型 | 说明 | 7102| -------| -------------------- | 7103| number | 返回折线尖角长度与线宽的最大比值。 | 7104 7105**示例:** 7106 7107```ts 7108import { drawing } from '@kit.ArkGraphics2D'; 7109 7110const pen = new drawing.Pen(); 7111let miter = pen.getMiterLimit(); 7112``` 7113 7114### setImageFilter<sup>12+</sup> 7115 7116setImageFilter(filter: ImageFilter | null): void 7117 7118设置画笔的图像滤波器。 7119 7120**系统能力:** SystemCapability.Graphics.Drawing 7121 7122**参数:** 7123 7124| 参数名 | 类型 | 必填 | 说明 | 7125| ------ | ------ | ---- | ----------------------- | 7126| filter | [ImageFilter](#imagefilter12) \| null | 是 | 图像滤波器,null表示清空画笔的图像滤波器效果。 | 7127 7128**错误码:** 7129 7130以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 7131 7132| 错误码ID | 错误信息 | 7133| ------- | --------------------------------------------| 7134| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types. | 7135 7136**示例:** 7137 7138```ts 7139import {drawing} from '@kit.ArkGraphics2D'; 7140 7141let colorfilter = drawing.ColorFilter.createSRGBGammaToLinear(); 7142let imgFilter = drawing.ImageFilter.createFromColorFilter(colorfilter); 7143let pen = new drawing.Pen(); 7144pen.setImageFilter(imgFilter); 7145pen.setImageFilter(null); 7146``` 7147 7148### getColorFilter<sup>12+</sup> 7149 7150getColorFilter(): ColorFilter 7151 7152获取画笔的颜色滤波器。 7153 7154**系统能力:** SystemCapability.Graphics.Drawing 7155 7156**返回值:** 7157 7158| 类型 | 说明 | 7159| --------------------------- | ------------------ | 7160| [ColorFilter](#colorfilter) | 返回颜色滤波器。 | 7161 7162**示例:** 7163 7164```ts 7165import {drawing} from '@kit.ArkGraphics2D'; 7166 7167let pen = new drawing.Pen(); 7168let colorfilter = drawing.ColorFilter.createLumaColorFilter(); 7169pen.setColorFilter(colorfilter); 7170let filter = pen.getColorFilter(); 7171``` 7172 7173### setColor 7174 7175setColor(color: common2D.Color) : void 7176 7177设置画笔的颜色。 7178 7179**系统能力:** SystemCapability.Graphics.Drawing 7180 7181**参数:** 7182 7183| 参数名 | 类型 | 必填 | 说明 | 7184| ------ | ---------------------------------------------------- | ---- | ---------------- | 7185| color | [common2D.Color](js-apis-graphics-common2D.md#color) | 是 | ARGB格式的颜色,每个颜色通道的值是0到255之间的整数。 | 7186 7187**错误码:** 7188 7189以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 7190 7191| 错误码ID | 错误信息 | 7192| ------- | --------------------------------------------| 7193| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 7194 7195**示例:** 7196 7197```ts 7198import { common2D, drawing } from '@kit.ArkGraphics2D'; 7199 7200const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 7201const pen = new drawing.Pen(); 7202pen.setColor(color); 7203``` 7204 7205### setColor<sup>12+</sup> 7206 7207setColor(alpha: number, red: number, green: number, blue: number): void 7208 7209设置画笔的颜色。性能优于[setColor](#setcolor)接口,推荐使用本接口。 7210 7211**系统能力:** SystemCapability.Graphics.Drawing 7212 7213**参数:** 7214 7215| 参数名 | 类型 | 必填 | 说明 | 7216| ------ | ------ | ---- | -------------------------------------------------- | 7217| alpha | number | 是 | ARGB格式颜色的透明度通道值,该参数是0到255之间的整数,传入范围内的浮点数会向下取整。 | 7218| red | number | 是 | ARGB格式颜色的红色通道值,该参数是0到255之间的整数,传入范围内的浮点数会向下取整。 | 7219| green | number | 是 | ARGB格式颜色的绿色通道值,该参数是0到255之间的整数,传入范围内的浮点数会向下取整。 | 7220| blue | number | 是 | ARGB格式颜色的蓝色通道值,该参数是0到255之间的整数,传入范围内的浮点数会向下取整。 | 7221 7222**错误码:** 7223 7224以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 7225 7226| 错误码ID | 错误信息 | 7227| ------- | --------------------------------------------| 7228| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7229 7230**示例:** 7231 7232```ts 7233import { drawing } from '@kit.ArkGraphics2D'; 7234 7235const pen = new drawing.Pen(); 7236pen.setColor(255, 255, 0, 0); 7237``` 7238 7239### setColor<sup>18+</sup> 7240 7241setColor(color: number) : void 7242 7243设置画笔的颜色。 7244 7245**系统能力:** SystemCapability.Graphics.Drawing 7246 7247**参数:** 7248 7249| 参数名 | 类型 | 必填 | 说明 | 7250| ------ | ---------------------------------------------------- | ---- | ---------------- | 7251| color | number | 是 | 16进制ARGB格式的颜色。 | 7252 7253**示例:** 7254 7255```ts 7256import { drawing } from '@kit.ArkGraphics2D'; 7257 7258const pen = new drawing.Pen(); 7259pen.setColor(0xffff0000); 7260``` 7261 7262### setColor4f<sup>20+</sup> 7263 7264setColor4f(color4f: common2D.Color4f, colorSpace: colorSpaceManager.ColorSpaceManager | null): void 7265 7266设置画笔的颜色以及标准色域,与[setColor](#setcolor)区别在于可以单独设置色域,适用于需要单独设置色域的场景。 7267 7268**系统能力:** SystemCapability.Graphics.Drawing 7269 7270**参数:** 7271 7272| 参数名 | 类型 | 必填 | 说明 | 7273| ------ | ---------------------------------------------------- | ---- | ---------------- | 7274| color4f | [common2D.Color4f](js-apis-graphics-common2D.md#color4f20) | 是 | ARGB格式的颜色,每个颜色通道的值是0.0-1.0之间的浮点数,大于1.0时,取1.0,小于0.0时,取0.0。| 7275| colorSpace | [colorSpaceManager.ColorSpaceManager](js-apis-colorSpaceManager.md#colorspacemanager) \| null | 是 | 标准色域对象,null表示使用SRGB色域。| 7276 7277**示例:** 7278 7279```ts 7280import { common2D, drawing, colorSpaceManager } from "@kit.ArkGraphics2D"; 7281 7282const pen = new drawing.Pen(); 7283let colorSpace = colorSpaceManager.create(colorSpaceManager.ColorSpace.BT2020_HLG); 7284let color4f:common2D.Color4f = {alpha:1, red:0.5, green:0.4, blue:0.7}; 7285pen.setColor4f(color4f, colorSpace); 7286``` 7287 7288### getColor<sup>12+</sup> 7289 7290getColor(): common2D.Color 7291 7292获取画笔的颜色。 7293 7294**系统能力:** SystemCapability.Graphics.Drawing 7295 7296**返回值:** 7297 7298| 类型 | 说明 | 7299| -------------- | -------------- | 7300| common2D.Color | 返回画笔的颜色。 | 7301 7302**示例:** 7303 7304```ts 7305import { common2D, drawing } from '@kit.ArkGraphics2D'; 7306 7307const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 7308const pen = new drawing.Pen(); 7309pen.setColor(color); 7310let colorGet = pen.getColor(); 7311``` 7312 7313### getColor4f<sup>20+</sup> 7314 7315getColor4f(): common2D.Color4f 7316 7317获取画笔的颜色,与[getColor](#getcolor12)的区别在于返回值类型为浮点数,适用于需要浮点数类型的场景。 7318 7319**系统能力:** SystemCapability.Graphics.Drawing 7320 7321**返回值:** 7322 7323| 类型 | 说明 | 7324| -------------- | -------------- | 7325|[common2D.Color4f](js-apis-graphics-common2D.md#color4f20) | 返回画笔的颜色。 | 7326 7327**示例:** 7328 7329```ts 7330import { common2D, drawing, colorSpaceManager } from "@kit.ArkGraphics2D"; 7331 7332const pen = new drawing.Pen(); 7333let colorSpace = colorSpaceManager.create(colorSpaceManager.ColorSpace.BT2020_HLG); 7334let color4f:common2D.Color4f = {alpha:1, red:0.5, green:0.4, blue:0.7}; 7335pen.setColor4f(color4f, colorSpace); 7336let color = pen.getColor4f(); 7337``` 7338 7339### getHexColor<sup>18+</sup> 7340 7341getHexColor(): number 7342 7343获取画笔的颜色。 7344 7345**系统能力:** SystemCapability.Graphics.Drawing 7346 7347**返回值:** 7348 7349| 类型 | 说明 | 7350| -------------- | -------------- | 7351| number | 返回画笔的颜色,以16进制ARGB格式的32位无符号整数表示。 | 7352 7353**示例:** 7354 7355```ts 7356import { common2D, drawing } from '@kit.ArkGraphics2D'; 7357 7358let color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 7359let pen = new drawing.Pen(); 7360pen.setColor(color); 7361let hex_color: number = pen.getHexColor(); 7362console.info('getHexColor: ', hex_color.toString(16)); 7363``` 7364 7365### setStrokeWidth 7366 7367setStrokeWidth(width: number) : void 7368 7369设置画笔的线宽。0线宽被视作特殊的极细线宽,在绘制时始终会被绘制为1像素,不随画布的缩放而改变;负数线宽在实际绘制时会被视作0线宽。 7370 7371**系统能力:** SystemCapability.Graphics.Drawing 7372 7373**参数:** 7374 7375| 参数名 | 类型 | 必填 | 说明 | 7376| ------ | ------ | ---- | ---------------- | 7377| width | number | 是 | 表示线宽,该参数为浮点数。 | 7378 7379**错误码:** 7380 7381以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 7382 7383| 错误码ID | 错误信息 | 7384| ------- | --------------------------------------------| 7385| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7386 7387**示例:** 7388 7389```ts 7390import { drawing } from '@kit.ArkGraphics2D'; 7391 7392const pen = new drawing.Pen(); 7393pen.setStrokeWidth(5); 7394``` 7395 7396### getWidth<sup>12+</sup> 7397 7398getWidth(): number 7399 7400获取画笔的线宽属性,线宽描述了画笔绘制图形轮廓的宽度。 7401 7402**系统能力:** SystemCapability.Graphics.Drawing 7403 7404**返回值:** 7405 7406| 类型 | 说明 | 7407| ------ | -------------- | 7408| number | 返回画笔的线宽,单位为物理像素px。 | 7409 7410**示例:** 7411 7412```ts 7413import { drawing } from '@kit.ArkGraphics2D'; 7414 7415const pen = new drawing.Pen(); 7416let width = pen.getWidth(); 7417``` 7418 7419### setAntiAlias 7420 7421setAntiAlias(aa: boolean) : void 7422 7423设置画笔是否开启抗锯齿。开启后,可以使得图形的边缘在显示时更平滑。未调用此接口设置时,系统默认关闭抗锯齿。 7424 7425**系统能力:** SystemCapability.Graphics.Drawing 7426 7427**参数:** 7428 7429| 参数名 | 类型 | 必填 | 说明 | 7430| ------ | ------- | ---- | ------------------------------------------------- | 7431| aa | boolean | 是 | 表示是否开启抗锯齿。true表示开启,false表示关闭。 | 7432 7433**错误码:** 7434 7435以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 7436 7437| 错误码ID | 错误信息 | 7438| ------- | --------------------------------------------| 7439| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7440 7441**示例:** 7442 7443```ts 7444import { drawing } from '@kit.ArkGraphics2D'; 7445 7446const pen = new drawing.Pen(); 7447pen.setAntiAlias(true); 7448``` 7449 7450### isAntiAlias<sup>12+</sup> 7451 7452isAntiAlias(): boolean 7453 7454获取画笔是否开启抗锯齿属性。 7455 7456**系统能力:** SystemCapability.Graphics.Drawing 7457 7458**返回值:** 7459 7460| 类型 | 说明 | 7461| ------- | ------------------------- | 7462| boolean | 返回画笔是否开启抗锯齿属性,true表示开启,false表示关闭。 | 7463 7464**示例:** 7465 7466```ts 7467import { drawing } from '@kit.ArkGraphics2D'; 7468 7469const pen = new drawing.Pen(); 7470let isAntiAlias = pen.isAntiAlias(); 7471``` 7472 7473### setAlpha 7474 7475setAlpha(alpha: number) : void 7476 7477设置画笔的透明度。 7478 7479**系统能力:** SystemCapability.Graphics.Drawing 7480 7481**参数:** 7482 7483| 参数名 | 类型 | 必填 | 说明 | 7484| ------ | ------ | ---- | ---------------------------------------- | 7485| alpha | number | 是 | 用于表示透明度的[0, 255]区间内的整数值,传入浮点类型时向下取整。 | 7486 7487**错误码:** 7488 7489以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 7490 7491| 错误码ID | 错误信息 | 7492| ------- | --------------------------------------------| 7493| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 7494 7495**示例:** 7496 7497```ts 7498import { drawing } from '@kit.ArkGraphics2D'; 7499 7500const pen = new drawing.Pen(); 7501pen.setAlpha(128); 7502``` 7503 7504### getAlpha<sup>12+</sup> 7505 7506getAlpha(): number 7507 7508获取画笔的透明度。 7509 7510**系统能力:** SystemCapability.Graphics.Drawing 7511 7512**返回值:** 7513 7514| 类型 | 说明 | 7515| ------ | ---------------- | 7516| number | 返回画笔的透明度,该返回值为0到255之间的整数。 | 7517 7518**示例:** 7519 7520```ts 7521import { drawing } from '@kit.ArkGraphics2D'; 7522 7523const pen = new drawing.Pen(); 7524let alpha = pen.getAlpha(); 7525``` 7526 7527### setColorFilter 7528 7529setColorFilter(filter: ColorFilter) : void 7530 7531给画笔添加额外的颜色滤波器。 7532 7533**系统能力:** SystemCapability.Graphics.Drawing 7534 7535**参数:** 7536 7537| 参数名 | 类型 | 必填 | 说明 | 7538| ------ | --------------------------- | ---- | ------------ | 7539| filter | [ColorFilter](#colorfilter) | 是 | 颜色滤波器。null表示清空颜色滤波器。 | 7540 7541**错误码:** 7542 7543以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 7544 7545| 错误码ID | 错误信息 | 7546| ------- | --------------------------------------------| 7547| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7548 7549**示例:** 7550 7551```ts 7552import { drawing } from '@kit.ArkGraphics2D'; 7553 7554const pen = new drawing.Pen(); 7555let colorFilter = drawing.ColorFilter.createLinearToSRGBGamma(); 7556pen.setColorFilter(colorFilter); 7557``` 7558 7559### setMaskFilter<sup>12+</sup> 7560 7561setMaskFilter(filter: MaskFilter): void 7562 7563给画笔添加额外的蒙版滤镜。 7564 7565**系统能力:** SystemCapability.Graphics.Drawing 7566 7567**参数:** 7568 7569| 参数名 | 类型 | 必填 | 说明 | 7570| ------ | ------------------------- | ---- | --------- | 7571| filter | [MaskFilter](#maskfilter12) | 是 | 蒙版滤镜。null表示清空蒙版滤镜。 | 7572 7573**错误码:** 7574 7575以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 7576 7577| 错误码ID | 错误信息 | 7578| ------- | --------------------------------------------| 7579| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7580 7581**示例:** 7582 7583```ts 7584import { RenderNode } from '@kit.ArkUI'; 7585import { common2D, drawing } from '@kit.ArkGraphics2D'; 7586 7587class DrawingRenderNode extends RenderNode { 7588 draw(context : DrawContext) { 7589 const canvas = context.canvas; 7590 const pen = new drawing.Pen(); 7591 pen.setStrokeWidth(5); 7592 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 7593 let maskFilter = drawing.MaskFilter.createBlurMaskFilter(drawing.BlurType.OUTER, 10); 7594 pen.setMaskFilter(maskFilter); 7595 } 7596} 7597``` 7598 7599### setPathEffect<sup>12+</sup> 7600 7601setPathEffect(effect: PathEffect): void 7602 7603设置画笔路径效果。 7604 7605**系统能力:** SystemCapability.Graphics.Drawing 7606 7607**参数:** 7608 7609| 参数名 | 类型 | 必填 | 说明 | 7610| ------- | ------------------------- | ---- | ------------ | 7611| effect | [PathEffect](#patheffect12) | 是 | 路径效果对象。null表示清空路径效果。 | 7612 7613**错误码:** 7614 7615以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 7616 7617| 错误码ID | 错误信息 | 7618| ------- | --------------------------------------------| 7619| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7620 7621**示例:** 7622 7623```ts 7624import { RenderNode } from '@kit.ArkUI'; 7625import { common2D, drawing } from '@kit.ArkGraphics2D'; 7626 7627class DrawingRenderNode extends RenderNode { 7628 draw(context : DrawContext) { 7629 const canvas = context.canvas; 7630 const pen = new drawing.Pen(); 7631 pen.setStrokeWidth(5); 7632 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 7633 let pathEffect = drawing.PathEffect.createDashPathEffect([30, 10], 0); 7634 pen.setPathEffect(pathEffect); 7635 } 7636} 7637``` 7638 7639### setShaderEffect<sup>12+</sup> 7640 7641setShaderEffect(shaderEffect: ShaderEffect): void 7642 7643设置画笔着色器效果。 7644 7645**系统能力:** SystemCapability.Graphics.Drawing 7646 7647**参数:** 7648 7649| 参数名 | 类型 | 必填 | 说明 | 7650| ------- | ------------------------- | ---- | ------------ | 7651| shaderEffect | [ShaderEffect](#shadereffect12) | 是 | 着色器对象。null表示清空着色器效果。 | 7652 7653**错误码:** 7654 7655以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 7656 7657| 错误码ID | 错误信息 | 7658| ------- | --------------------------------------------| 7659| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7660 7661**示例:** 7662 7663```ts 7664import { drawing } from '@kit.ArkGraphics2D'; 7665 7666const pen = new drawing.Pen(); 7667let shaderEffect = drawing.ShaderEffect.createLinearGradient({x: 100, y: 100}, {x: 300, y: 300}, [0xFF00FF00, 0xFFFF0000], drawing.TileMode.REPEAT); 7668pen.setShaderEffect(shaderEffect); 7669``` 7670 7671### setShadowLayer<sup>12+</sup> 7672 7673setShadowLayer(shadowLayer: ShadowLayer): void 7674 7675设置画笔阴影层效果。当前仅在绘制文字时生效。 7676 7677**系统能力:** SystemCapability.Graphics.Drawing 7678 7679**参数:** 7680 7681| 参数名 | 类型 | 必填 | 说明 | 7682| ------- | ------------------------- | ---- | --------- | 7683| shadowLayer | [ShadowLayer](#shadowlayer12) | 是 | 阴影层对象。null表示清空阴影层效果。 | 7684 7685**错误码:** 7686 7687以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 7688 7689| 错误码ID | 错误信息 | 7690| ------- | --------------------------------------------| 7691| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7692 7693**示例:** 7694 7695```ts 7696import { RenderNode } from '@kit.ArkUI'; 7697import { common2D, drawing } from '@kit.ArkGraphics2D'; 7698 7699class DrawingRenderNode extends RenderNode { 7700 draw(context : DrawContext) { 7701 const canvas = context.canvas; 7702 let font = new drawing.Font(); 7703 font.setSize(60); 7704 let textBlob = drawing.TextBlob.makeFromString("hello", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 7705 let pen = new drawing.Pen(); 7706 pen.setStrokeWidth(2.0); 7707 let pen_color : common2D.Color = {alpha: 0xFF, red: 0xFF, green: 0x00, blue: 0x00}; 7708 pen.setColor(pen_color); 7709 canvas.attachPen(pen); 7710 canvas.drawTextBlob(textBlob, 100, 100); 7711 canvas.detachPen(); 7712 let color : common2D.Color = {alpha: 0xFF, red: 0x00, green: 0xFF, blue: 0x00}; 7713 let shadowLayer = drawing.ShadowLayer.create(3, -3, 3, color); 7714 pen.setShadowLayer(shadowLayer); 7715 canvas.attachPen(pen); 7716 canvas.drawTextBlob(textBlob, 100, 200); 7717 canvas.detachPen(); 7718 } 7719} 7720``` 7721 7722### setBlendMode 7723 7724setBlendMode(mode: BlendMode) : void 7725 7726设置画笔的混合模式。 7727 7728**系统能力:** SystemCapability.Graphics.Drawing 7729 7730**参数:** 7731 7732| 参数名 | 类型 | 必填 | 说明 | 7733| ------ | ----------------------- | ---- | ---------------- | 7734| mode | [BlendMode](#blendmode) | 是 | 颜色的混合模式。 | 7735 7736**错误码:** 7737 7738以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 7739 7740| 错误码ID | 错误信息 | 7741| ------- | --------------------------------------------| 7742| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 7743 7744**示例:** 7745 7746```ts 7747import { drawing } from '@kit.ArkGraphics2D'; 7748 7749const pen = new drawing.Pen(); 7750pen.setBlendMode(drawing.BlendMode.SRC); 7751``` 7752 7753### setJoinStyle<sup>12+</sup> 7754 7755setJoinStyle(style: JoinStyle): void 7756 7757设置画笔绘制转角的样式。未调用此接口设置时,系统默认的转角样式为MITER_JOIN。 7758 7759**系统能力:** SystemCapability.Graphics.Drawing 7760 7761**参数:** 7762 7763| 参数名 | 类型 | 必填 | 说明 | 7764| ------ | ----------------------- | ---- | --------------- | 7765| style | [JoinStyle](#joinstyle12) | 是 | 折线转角样式。 | 7766 7767**错误码:** 7768 7769以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 7770 7771| 错误码ID | 错误信息 | 7772| ------- | --------------------------------------------| 7773| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 7774 7775**示例:** 7776 7777```ts 7778import { RenderNode } from '@kit.ArkUI'; 7779import { common2D, drawing } from '@kit.ArkGraphics2D'; 7780 7781class DrawingRenderNode extends RenderNode { 7782 draw(context : DrawContext) { 7783 const canvas = context.canvas; 7784 const pen = new drawing.Pen(); 7785 pen.setStrokeWidth(5); 7786 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 7787 pen.setJoinStyle(drawing.JoinStyle.ROUND_JOIN); 7788 } 7789} 7790``` 7791 7792### getJoinStyle<sup>12+</sup> 7793 7794getJoinStyle(): JoinStyle 7795 7796获取画笔绘制转角的样式。 7797 7798**系统能力:** SystemCapability.Graphics.Drawing 7799 7800**返回值:** 7801 7802| 类型 | 说明 | 7803| ------------- | ---------------------- | 7804| JoinStyle | 返回折线转角的样式。 | 7805 7806**示例:** 7807 7808```ts 7809import { RenderNode } from '@kit.ArkUI'; 7810import { common2D, drawing } from '@kit.ArkGraphics2D'; 7811 7812class DrawingRenderNode extends RenderNode { 7813 draw(context : DrawContext) { 7814 const canvas = context.canvas; 7815 const pen = new drawing.Pen(); 7816 pen.setStrokeWidth(5); 7817 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 7818 pen.setJoinStyle(drawing.JoinStyle.ROUND_JOIN); 7819 let joinStyle = pen.getJoinStyle(); 7820 } 7821} 7822``` 7823 7824### setCapStyle<sup>12+</sup> 7825 7826setCapStyle(style: CapStyle): void 7827 7828设置画笔的线帽样式。未调用此接口设置时,系统默认的线帽样式为FLAT_CAP。 7829 7830**系统能力:** SystemCapability.Graphics.Drawing 7831 7832**参数:** 7833 7834| 参数名 | 类型 | 必填 | 说明 | 7835| ------ | ----------------------- | ---- | --------------------- | 7836| style | [CapStyle](#capstyle12) | 是 | 描述画笔的线帽样式。 | 7837 7838**错误码:** 7839 7840以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 7841 7842| 错误码ID | 错误信息 | 7843| ------- | --------------------------------------------| 7844| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 7845 7846**示例:** 7847 7848```ts 7849import { RenderNode } from '@kit.ArkUI'; 7850import { common2D, drawing } from '@kit.ArkGraphics2D'; 7851 7852class DrawingRenderNode extends RenderNode { 7853 draw(context : DrawContext) { 7854 const canvas = context.canvas; 7855 const pen = new drawing.Pen(); 7856 pen.setStrokeWidth(5); 7857 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 7858 pen.setCapStyle(drawing.CapStyle.SQUARE_CAP); 7859 } 7860} 7861``` 7862 7863### getCapStyle<sup>12+</sup> 7864 7865getCapStyle(): CapStyle 7866 7867获取画笔的线帽样式。 7868 7869**系统能力:** SystemCapability.Graphics.Drawing 7870 7871**返回值:** 7872 7873| 类型 | 说明 | 7874| ------------ | ------------------ | 7875| CapStyle | 返回画笔的线帽样式。 | 7876 7877**示例:** 7878 7879```ts 7880import { RenderNode } from '@kit.ArkUI'; 7881import { common2D, drawing } from '@kit.ArkGraphics2D'; 7882 7883class DrawingRenderNode extends RenderNode { 7884 draw(context : DrawContext) { 7885 const canvas = context.canvas; 7886 const pen = new drawing.Pen(); 7887 pen.setStrokeWidth(5); 7888 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 7889 pen.setCapStyle(drawing.CapStyle.SQUARE_CAP); 7890 let capStyle = pen.getCapStyle(); 7891 } 7892} 7893``` 7894 7895### setDither 7896 7897setDither(dither: boolean) : void 7898 7899开启画笔的抖动绘制效果。抖动绘制可以使得绘制出的颜色更加真实。 7900 7901**系统能力:** SystemCapability.Graphics.Drawing 7902 7903**参数:** 7904 7905| 参数名 | 类型 | 必填 | 说明 | 7906| ------ | ------- | ---- | --------------------------------------------------------- | 7907| dither | boolean | 是 | 是否开启画笔的抖动绘制效果。true表示开启,false表示关闭。 | 7908 7909**错误码:** 7910 7911以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 7912 7913| 错误码ID | 错误信息 | 7914| ------- | --------------------------------------------| 7915| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7916 7917**示例:** 7918 7919```ts 7920import { drawing } from '@kit.ArkGraphics2D'; 7921 7922const pen = new drawing.Pen(); 7923pen.setDither(true); 7924``` 7925 7926### getFillPath<sup>12+</sup> 7927 7928getFillPath(src: Path, dst: Path): boolean 7929 7930获取使用画笔绘制的源路径轮廓,并用目标路径表示。 7931 7932**系统能力:** SystemCapability.Graphics.Drawing 7933 7934**参数:** 7935 7936| 参数名 | 类型 | 必填 | 说明 | 7937| -------- | -------------------------------------------- | ---- | ------------------------------- | 7938| src | [Path](#path) | 是 | 源路径对象。 | 7939| dst | [Path](#path) | 是 | 目标路径对象。 | 7940 7941**返回值:** 7942 7943| 类型 | 说明 | 7944| --------------------- | -------------- | 7945| boolean | 返回获取源路径轮廓是否成功,true表示成功,false表示失败。 | 7946 7947**错误码:** 7948 7949以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 7950 7951| 错误码ID | 错误信息 | 7952| ------- | --------------------------------------------| 7953| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 7954 7955**示例:** 7956 7957```ts 7958import { drawing } from '@kit.ArkGraphics2D'; 7959 7960let pen = new drawing.Pen(); 7961let pathSrc: drawing.Path = new drawing.Path(); 7962let pathDst: drawing.Path = new drawing.Path(); 7963pathSrc.moveTo(0, 0); 7964pathSrc.lineTo(700, 700); 7965let value = pen.getFillPath(pathSrc, pathDst); 7966``` 7967 7968### reset<sup>12+</sup> 7969 7970reset(): void 7971 7972重置当前画笔为初始状态。 7973 7974**系统能力:** SystemCapability.Graphics.Drawing 7975 7976**示例:** 7977 7978```ts 7979import { drawing } from '@kit.ArkGraphics2D'; 7980 7981const pen = new drawing.Pen(); 7982pen.reset(); 7983``` 7984 7985## Brush 7986 7987画刷对象,描述所绘制图形的填充信息。 7988 7989### constructor<sup>12+</sup> 7990 7991constructor() 7992 7993构造一个新的画刷对象。 7994 7995**系统能力:** SystemCapability.Graphics.Drawing 7996 7997**示例:** 7998 7999```ts 8000import { drawing } from '@kit.ArkGraphics2D'; 8001 8002const brush = new drawing.Brush(); 8003``` 8004 8005### constructor<sup>12+</sup> 8006 8007constructor(brush: Brush) 8008 8009复制构造一个新的画刷对象。 8010 8011**系统能力:** SystemCapability.Graphics.Drawing 8012 8013**参数:** 8014 8015| 参数名 | 类型 | 必填 | 说明 | 8016| ------| ----------- | ---- | ---------------- | 8017| brush | [Brush](#brush) | 是 | 待复制的画刷对象。 | 8018 8019**错误码:** 8020 8021以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 8022 8023| 错误码ID | 错误信息 | 8024| ------- | --------------------------------------------| 8025| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8026 8027**示例:** 8028 8029```ts 8030import { common2D, drawing } from '@kit.ArkGraphics2D'; 8031 8032const brush = new drawing.Brush(); 8033const brushColor: common2D.Color = { alpha: 255, red: 0, green: 255, blue: 0 }; 8034brush.setColor(brushColor); 8035const newBrush = new drawing.Brush(brush); 8036``` 8037 8038### setColor 8039 8040setColor(color: common2D.Color) : void 8041 8042设置画刷的颜色。 8043 8044**系统能力:** SystemCapability.Graphics.Drawing 8045 8046**参数:** 8047 8048| 参数名 | 类型 | 必填 | 说明 | 8049| ------ | ---------------------------------------------------- | ---- | ---------------- | 8050| color | [common2D.Color](js-apis-graphics-common2D.md#color) | 是 | ARGB格式的颜色,每个颜色通道的值是0到255之间的整数。 | 8051 8052**错误码:** 8053 8054以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 8055 8056| 错误码ID | 错误信息 | 8057| ------- | --------------------------------------------| 8058| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 8059 8060**示例:** 8061 8062```ts 8063import { common2D, drawing } from '@kit.ArkGraphics2D'; 8064 8065const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 8066const brush = new drawing.Brush(); 8067brush.setColor(color); 8068``` 8069 8070### setColor<sup>12+</sup> 8071 8072setColor(alpha: number, red: number, green: number, blue: number): void 8073 8074设置画刷的颜色。性能优于[setColor](#setcolor-1)接口,推荐使用本接口。 8075 8076**系统能力:** SystemCapability.Graphics.Drawing 8077 8078**参数:** 8079 8080| 参数名 | 类型 | 必填 | 说明 | 8081| ------ | ------ | ---- | -------------------------------------------------- | 8082| alpha | number | 是 | ARGB格式颜色的透明度通道值,该参数是0到255之间的整数,传入范围内的浮点数会向下取整。 | 8083| red | number | 是 | ARGB格式颜色的红色通道值,该参数是0到255之间的整数,传入范围内的浮点数会向下取整。 | 8084| green | number | 是 | ARGB格式颜色的绿色通道值,该参数是0到255之间的整数,传入范围内的浮点数会向下取整。 | 8085| blue | number | 是 | ARGB格式颜色的蓝色通道值,该参数是0到255之间的整数,传入范围内的浮点数会向下取整。 | 8086 8087**错误码:** 8088 8089以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 8090 8091| 错误码ID | 错误信息 | 8092| ------- | --------------------------------------------| 8093| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 8094 8095**示例:** 8096 8097```ts 8098import { drawing } from '@kit.ArkGraphics2D'; 8099 8100const brush = new drawing.Brush(); 8101brush.setColor(255, 255, 0, 0); 8102``` 8103 8104### setColor<sup>18+</sup> 8105 8106setColor(color: number) : void 8107 8108设置画刷的颜色。 8109 8110**系统能力:** SystemCapability.Graphics.Drawing 8111 8112**参数:** 8113 8114| 参数名 | 类型 | 必填 | 说明 | 8115| ------ | ---------------------------------------------------- | ---- | ---------------- | 8116| color | number | 是 | 16进制ARGB格式的颜色。 | 8117 8118**错误码:** 8119 8120以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 8121 8122| 错误码ID | 错误信息 | 8123| ------- | --------------------------------------------| 8124| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 8125 8126**示例:** 8127 8128```ts 8129import { drawing } from '@kit.ArkGraphics2D'; 8130 8131const brush = new drawing.Brush(); 8132brush.setColor(0xffff0000); 8133``` 8134 8135### setColor4f<sup>20+</sup> 8136 8137setColor4f(color4f: common2D.Color4f, colorSpace: colorSpaceManager.ColorSpaceManager | null): void 8138 8139设置画刷的颜色以及标准色域,与[setColor](#setcolor-1)区别在于可以单独设置色域,适用于需要单独设置色域的场景。 8140 8141**系统能力:** SystemCapability.Graphics.Drawing 8142 8143**参数:** 8144 8145| 参数名 | 类型 | 必填 | 说明 | 8146| ------ | ---------------------------------------------------- | ---- | ---------------- | 8147| color4f | [common2D.Color4f](js-apis-graphics-common2D.md#color4f20) | 是 | ARGB格式的颜色,每个颜色通道的值是0.0-1.0之间的浮点数,大于1.0时,取1.0,小于0.0时,取0.0。| 8148| colorSpace | [colorSpaceManager.ColorSpaceManager](js-apis-colorSpaceManager.md#colorspacemanager) \| null | 是 | 标准色域对象,null表示使用SRGB色域。| 8149 8150**示例:** 8151 8152```ts 8153import { common2D, drawing, colorSpaceManager } from "@kit.ArkGraphics2D"; 8154 8155const brush = new drawing.Brush(); 8156let colorSpace = colorSpaceManager.create(colorSpaceManager.ColorSpace.BT2020_HLG); 8157let color4f:common2D.Color4f = {alpha:1, red:0.5, green:0.4, blue:0.7}; 8158brush.setColor4f(color4f, colorSpace); 8159``` 8160 8161### getColor<sup>12+</sup> 8162 8163getColor(): common2D.Color 8164 8165获取画刷的颜色。 8166 8167**系统能力:** SystemCapability.Graphics.Drawing 8168 8169**返回值:** 8170 8171| 类型 | 说明 | 8172| -------------- | -------------- | 8173| common2D.Color | 返回画刷的颜色。 | 8174 8175**示例:** 8176 8177```ts 8178import { common2D, drawing } from '@kit.ArkGraphics2D'; 8179 8180const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 8181const brush = new drawing.Brush(); 8182brush.setColor(color); 8183let colorGet = brush.getColor(); 8184``` 8185 8186### getColor4f<sup>20+</sup> 8187 8188getColor4f(): common2D.Color4f 8189 8190获取画刷的颜色,与[getColor](#getcolor12-1)的区别是返回值类型为浮点数,适用于需要浮点数类型的场景。 8191 8192**系统能力:** SystemCapability.Graphics.Drawing 8193 8194**返回值:** 8195 8196| 类型 | 说明 | 8197| -------------- | -------------- | 8198| [common2D.Color4f](js-apis-graphics-common2D.md#color4f20) | 返回画刷的颜色。 | 8199 8200**示例:** 8201 8202```ts 8203import { common2D, drawing, colorSpaceManager } from "@kit.ArkGraphics2D"; 8204 8205const brush = new drawing.Brush(); 8206let colorSpace = colorSpaceManager.create(colorSpaceManager.ColorSpace.BT2020_HLG); 8207let color4f:common2D.Color4f = {alpha:1, red:0.5, green:0.4, blue:0.7}; 8208brush.setColor4f(color4f, colorSpace); 8209let color = brush.getColor4f(); 8210``` 8211 8212### getHexColor<sup>18+</sup> 8213 8214getHexColor(): number 8215 8216获取画刷的颜色。 8217 8218**系统能力:** SystemCapability.Graphics.Drawing 8219 8220**返回值:** 8221 8222| 类型 | 说明 | 8223| -------------- | -------------- | 8224| number | 返回画刷的颜色,以16进制ARGB格式的32位无符号整数表示。 | 8225 8226**示例:** 8227 8228```ts 8229import { common2D, drawing } from '@kit.ArkGraphics2D'; 8230 8231let color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 8232let brush = new drawing.Brush(); 8233brush.setColor(color); 8234let hex_color: number = brush.getHexColor(); 8235console.info('getHexColor: ', hex_color.toString(16)); 8236``` 8237 8238### setAntiAlias 8239 8240setAntiAlias(aa: boolean) : void 8241 8242设置画刷是否开启抗锯齿。开启后,可以使得图形的边缘在显示时更平滑。未调用此接口设置时,系统默认关闭抗锯齿。 8243 8244**系统能力:** SystemCapability.Graphics.Drawing 8245 8246**参数:** 8247 8248| 参数名 | 类型 | 必填 | 说明 | 8249| ------ | ------- | ---- | ------------------------------------------------- | 8250| aa | boolean | 是 | 表示是否开启抗锯齿,true表示开启,false表示关闭。 | 8251 8252**错误码:** 8253 8254以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 8255 8256| 错误码ID | 错误信息 | 8257| ------- | --------------------------------------------| 8258| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8259 8260**示例:** 8261 8262```ts 8263import { drawing } from '@kit.ArkGraphics2D'; 8264 8265const brush = new drawing.Brush(); 8266brush.setAntiAlias(true); 8267``` 8268 8269### isAntiAlias<sup>12+</sup> 8270 8271isAntiAlias(): boolean 8272 8273获取画刷是否开启抗锯齿属性。 8274 8275**系统能力:** SystemCapability.Graphics.Drawing 8276 8277**返回值:** 8278 8279| 类型 | 说明 | 8280| ------- | ------------------------- | 8281| boolean | 返回画刷是否开启抗锯齿属性,true表示开启,false表示关闭。 | 8282 8283**示例:** 8284 8285```ts 8286import { drawing } from '@kit.ArkGraphics2D'; 8287 8288const brush = new drawing.Brush(); 8289let isAntiAlias = brush.isAntiAlias(); 8290``` 8291 8292### setAlpha 8293 8294setAlpha(alpha: number) : void 8295 8296设置画刷的透明度。 8297 8298**系统能力:** SystemCapability.Graphics.Drawing 8299 8300**参数:** 8301 8302| 参数名 | 类型 | 必填 | 说明 | 8303| ------ | ------ | ---- | ---------------------------------------- | 8304| alpha | number | 是 | 用于表示透明度的[0, 255]区间内的整数值,传入浮点类型时向下取整。 | 8305 8306**错误码:** 8307 8308以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 8309 8310| 错误码ID | 错误信息 | 8311| ------- | --------------------------------------------| 8312| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 8313 8314**示例:** 8315 8316```ts 8317import { drawing } from '@kit.ArkGraphics2D'; 8318 8319const brush = new drawing.Brush(); 8320brush.setAlpha(128); 8321``` 8322 8323### getAlpha<sup>12+</sup> 8324 8325getAlpha(): number 8326 8327获取画刷的透明度。 8328 8329**系统能力:** SystemCapability.Graphics.Drawing 8330 8331**返回值:** 8332 8333| 类型 | 说明 | 8334| ------ | ---------------- | 8335| number | 返回画刷的透明度,该返回值为0到255之间的整数。 | 8336 8337**示例:** 8338 8339```ts 8340import { drawing } from '@kit.ArkGraphics2D'; 8341 8342const brush = new drawing.Brush(); 8343let alpha = brush.getAlpha(); 8344``` 8345 8346### setColorFilter 8347 8348setColorFilter(filter: ColorFilter) : void 8349 8350给画刷添加额外的颜色滤波器。 8351 8352**系统能力:** SystemCapability.Graphics.Drawing 8353 8354**参数:** 8355 8356| 参数名 | 类型 | 必填 | 说明 | 8357| ------ | --------------------------- | ---- | ------------ | 8358| filter | [ColorFilter](#colorfilter) | 是 | 颜色滤波器。null表示清空颜色滤波器。 | 8359 8360**错误码:** 8361 8362以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 8363 8364| 错误码ID | 错误信息 | 8365| ------- | --------------------------------------------| 8366| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8367 8368**示例:** 8369 8370```ts 8371import { drawing } from '@kit.ArkGraphics2D'; 8372 8373const brush = new drawing.Brush(); 8374let colorFilter = drawing.ColorFilter.createLinearToSRGBGamma(); 8375brush.setColorFilter(colorFilter); 8376``` 8377 8378### setMaskFilter<sup>12+</sup> 8379 8380setMaskFilter(filter: MaskFilter): void 8381 8382给画刷添加额外的蒙版滤镜。 8383 8384**系统能力:** SystemCapability.Graphics.Drawing 8385 8386**参数:** 8387 8388| 参数名 | 类型 | 必填 | 说明 | 8389| ------ | ------------------------- | ---- | --------- | 8390| filter | [MaskFilter](#maskfilter12) | 是 | 蒙版滤镜。null表示清空蒙版滤镜。 | 8391 8392**错误码:** 8393 8394以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 8395 8396| 错误码ID | 错误信息 | 8397| ------- | --------------------------------------------| 8398| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8399 8400**示例:** 8401 8402```ts 8403import { RenderNode } from '@kit.ArkUI'; 8404import { common2D, drawing } from '@kit.ArkGraphics2D'; 8405 8406class DrawingRenderNode extends RenderNode { 8407 draw(context : DrawContext) { 8408 const canvas = context.canvas; 8409 const brush = new drawing.Brush(); 8410 let maskFilter = drawing.MaskFilter.createBlurMaskFilter(drawing.BlurType.OUTER, 10); 8411 brush.setMaskFilter(maskFilter); 8412 } 8413} 8414``` 8415 8416### setShaderEffect<sup>12+</sup> 8417 8418setShaderEffect(shaderEffect: ShaderEffect): void 8419 8420设置画刷着色器效果。 8421 8422**系统能力:** SystemCapability.Graphics.Drawing 8423 8424**参数:** 8425 8426| 参数名 | 类型 | 必填 | 说明 | 8427| ------- | ------------------------- | ---- | ------------ | 8428| shaderEffect | [ShaderEffect](#shadereffect12) | 是 | 着色器对象。null表示清空着色器效果。 | 8429 8430**错误码:** 8431 8432以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 8433 8434| 错误码ID | 错误信息 | 8435| ------- | --------------------------------------------| 8436| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8437 8438**示例:** 8439 8440```ts 8441import { drawing } from '@kit.ArkGraphics2D'; 8442 8443const brush = new drawing.Brush(); 8444let shaderEffect = drawing.ShaderEffect.createLinearGradient({x: 100, y: 100}, {x: 300, y: 300}, [0xFF00FF00, 0xFFFF0000], drawing.TileMode.REPEAT); 8445brush.setShaderEffect(shaderEffect); 8446``` 8447 8448### setShadowLayer<sup>12+</sup> 8449 8450setShadowLayer(shadowLayer: ShadowLayer): void 8451 8452设置画刷阴影层效果。当前仅在绘制文字时生效。 8453 8454**系统能力:** SystemCapability.Graphics.Drawing 8455 8456**参数:** 8457 8458| 参数名 | 类型 | 必填 | 说明 | 8459| ------- | ------------------------- | ---- | --------- | 8460| shadowLayer | [ShadowLayer](#shadowlayer12) | 是 | 阴影层对象。null表示清空阴影层效果。 | 8461 8462**错误码:** 8463 8464以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 8465 8466| 错误码ID | 错误信息 | 8467| ------- | --------------------------------------------| 8468| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8469 8470**示例:** 8471 8472```ts 8473import { RenderNode } from '@kit.ArkUI'; 8474import { common2D, drawing } from '@kit.ArkGraphics2D'; 8475 8476class DrawingRenderNode extends RenderNode { 8477 draw(context : DrawContext) { 8478 const canvas = context.canvas; 8479 let font = new drawing.Font(); 8480 font.setSize(60); 8481 8482 let textBlob = drawing.TextBlob.makeFromString("hello", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 8483 let pen = new drawing.Pen(); 8484 pen.setStrokeWidth(2.0); 8485 8486 let pen_color : common2D.Color = {alpha: 0xFF, red: 0xFF, green: 0x00, blue: 0x00}; 8487 pen.setColor(pen_color); 8488 canvas.attachPen(pen); 8489 canvas.drawTextBlob(textBlob, 100, 100); 8490 canvas.detachPen(); 8491 8492 let color : common2D.Color = {alpha: 0xFF, red: 0x00, green: 0xFF, blue: 0x00}; 8493 let shadowLayer = drawing.ShadowLayer.create(3, -3, 3, color); 8494 pen.setShadowLayer(shadowLayer); 8495 canvas.attachPen(pen); 8496 canvas.drawTextBlob(textBlob, 100, 200); 8497 canvas.detachPen(); 8498 8499 let brush = new drawing.Brush(); 8500 let brush_color : common2D.Color = {alpha: 0xFF, red: 0xFF, green: 0x00, blue: 0x00}; 8501 brush.setColor(brush_color); 8502 canvas.attachBrush(brush); 8503 canvas.drawTextBlob(textBlob, 300, 100); 8504 canvas.detachBrush(); 8505 8506 brush.setShadowLayer(shadowLayer); 8507 canvas.attachBrush(brush); 8508 canvas.drawTextBlob(textBlob, 300, 200); 8509 canvas.detachBrush(); 8510 } 8511} 8512``` 8513 8514### setBlendMode 8515 8516setBlendMode(mode: BlendMode) : void 8517 8518设置画刷的混合模式。未调用此接口设置时,系统默认的混合模式为SRC_OVER。 8519 8520**系统能力:** SystemCapability.Graphics.Drawing 8521 8522**参数:** 8523 8524| 参数名 | 类型 | 必填 | 说明 | 8525| ------ | ----------------------- | ---- | ---------------- | 8526| mode | [BlendMode](#blendmode) | 是 | 颜色的混合模式。 | 8527 8528**错误码:** 8529 8530以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 8531 8532| 错误码ID | 错误信息 | 8533| ------- | --------------------------------------------| 8534| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 8535 8536**示例:** 8537 8538```ts 8539import { drawing } from '@kit.ArkGraphics2D'; 8540 8541const brush = new drawing.Brush(); 8542brush.setBlendMode(drawing.BlendMode.SRC); 8543``` 8544 8545### setImageFilter<sup>12+</sup> 8546 8547setImageFilter(filter: ImageFilter | null): void 8548 8549为画刷设置图像滤波器。 8550 8551**系统能力:** SystemCapability.Graphics.Drawing 8552 8553**参数:** 8554 8555| 参数名 | 类型 | 必填 | 说明 | 8556| ------ | ------ | ---- | ----------------------- | 8557| filter | [ImageFilter](#imagefilter12) \| null | 是 | 图像滤波器,null表示清空图像滤波器效果。 | 8558 8559**错误码:** 8560 8561以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 8562 8563| 错误码ID | 错误信息 | 8564| ------- | --------------------------------------------| 8565| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types. | 8566 8567**示例:** 8568 8569```ts 8570import {drawing} from '@kit.ArkGraphics2D'; 8571 8572let brush = new drawing.Brush(); 8573let imgFilter = drawing.ImageFilter.createBlurImageFilter(5, 10, drawing.TileMode.DECAL); 8574brush.setImageFilter(imgFilter); 8575brush.setImageFilter(null); 8576``` 8577 8578### getColorFilter<sup>12+</sup> 8579 8580getColorFilter(): ColorFilter 8581 8582获取画刷的颜色滤波器。 8583 8584**系统能力:** SystemCapability.Graphics.Drawing 8585 8586**返回值:** 8587 8588| 类型 | 说明 | 8589| --------------------------- | ------------------ | 8590| [ColorFilter](#colorfilter) | 返回颜色滤波器。 | 8591 8592**示例:** 8593 8594```ts 8595import {drawing} from '@kit.ArkGraphics2D'; 8596 8597let brush = new drawing.Brush(); 8598let setColorFilter = drawing.ColorFilter.createSRGBGammaToLinear(); 8599brush.setColorFilter(setColorFilter); 8600let filter = brush.getColorFilter(); 8601``` 8602 8603### reset<sup>12+</sup> 8604 8605reset(): void 8606 8607重置当前画刷为初始状态。 8608 8609**系统能力:** SystemCapability.Graphics.Drawing 8610 8611**示例:** 8612 8613```ts 8614import { drawing } from '@kit.ArkGraphics2D'; 8615 8616const brush = new drawing.Brush(); 8617brush.reset(); 8618``` 8619 8620## ScaleToFit<sup>12+</sup> 8621 8622源矩形到目标矩形的缩放方式枚举。 8623 8624**系统能力:** SystemCapability.Graphics.Drawing 8625 8626| 名称 | 值 | 说明 | 8627| ---------------------- | ---- | ------------------------------ | 8628| FILL_SCALE_TO_FIT | 0 | 将源矩形缩放以填充满整个目标矩形,可能会改变源矩形的长宽比。 | 8629| START_SCALE_TO_FIT | 1 | 保持源矩形的长宽比进行缩放,并对齐到目标矩形的左上方。 | 8630| CENTER_SCALE_TO_FIT | 2 | 保持源矩形的长宽比进行缩放,并居中对齐到目标矩形。 | 8631| END_SCALE_TO_FIT | 3 | 保持源矩形的长宽比进行缩放,并对齐到目标矩形的右下方。 | 8632 8633## Matrix<sup>12+</sup> 8634 8635矩阵对象。 8636 8637表示为3*3的矩阵,如下图所示: 8638 8639 8640 8641矩阵中的元素从左到右,从上到下分别表示水平缩放系数、水平倾斜系数、水平位移系数、垂直倾斜系数、垂直缩放系数、垂直位移系数、X轴透视系数、Y轴透视系数、透视缩放系数。 8642设(x<sub>1</sub>, y<sub>1</sub>)为源坐标点,(x<sub>2</sub>, y<sub>2</sub>)为源坐标点通过矩阵变换后的坐标点,则两个坐标点的关系如下: 8643 8644 8645 8646### constructor<sup>12+</sup> 8647 8648constructor() 8649 8650构造一个矩阵对象。 8651 8652**系统能力:** SystemCapability.Graphics.Drawing 8653 8654**示例:** 8655 8656```ts 8657import { drawing } from '@kit.ArkGraphics2D'; 8658 8659let matrix = new drawing.Matrix(); 8660``` 8661 8662### constructor<sup>20+</sup> 8663 8664constructor(matrix: Matrix) 8665 8666拷贝一个矩阵。 8667 8668**系统能力:** SystemCapability.Graphics.Drawing 8669 8670**参数:** 8671 8672| 参数名 | 类型 | 必填 | 说明 | 8673| ----------- | ---------------------------------------- | ---- | ------------------- | 8674| matrix | [Matrix](#matrix12) | 是 | 被拷贝的矩阵。| 8675 8676**示例:** 8677 8678```ts 8679import { drawing } from '@kit.ArkGraphics2D'; 8680 8681let matrix = new drawing.Matrix(); 8682let matrix2 = new drawing.Matrix(matrix); 8683``` 8684 8685### isAffine<sup>20+</sup> 8686 8687isAffine(): boolean 8688 8689判断当前矩阵是否为仿射矩阵。仿射矩阵是一种包括平移、旋转、缩放等变换的矩阵。 8690 8691**系统能力:** SystemCapability.Graphics.Drawing 8692 8693**返回值:** 8694 8695| 类型 | 说明 | 8696| --------------------------- | -------------------- | 8697| boolean | 返回当前矩阵是否为仿射矩阵。true表示是仿射矩阵,false表示不是仿射矩阵。 | 8698 8699**示例:** 8700 8701```ts 8702import { drawing } from '@kit.ArkGraphics2D'; 8703 8704let matrix = new drawing.Matrix(); 8705matrix.setMatrix([1, 0.5, 1, 0.5, 1, 1, 1, 1, 1]); 8706let isAff = matrix.isAffine(); 8707console.info('isAff :', isAff); 8708``` 8709 8710### rectStaysRect<sup>20+</sup> 8711 8712rectStaysRect(): boolean 8713 8714判断经过该矩阵映射后的矩形的形状是否仍为矩形。 8715 8716**系统能力:** SystemCapability.Graphics.Drawing 8717 8718**返回值:** 8719 8720| 类型 | 说明 | 8721| --------------------------- | -------------------- | 8722| boolean | 返回经过该矩阵映射后的矩形的形状是否仍为矩形。true表示仍是矩形,false表示不是矩形。 | 8723 8724**示例:** 8725 8726```ts 8727import { drawing } from '@kit.ArkGraphics2D'; 8728 8729let matrix = new drawing.Matrix(); 8730matrix.setMatrix([1, 0.5, 1, 0.5, 1, 1, 1, 1, 1]); 8731let matrix2 = new drawing.Matrix(matrix); 8732let isRect = matrix2.rectStaysRect(); 8733console.info('isRect :', isRect); 8734``` 8735 8736### setSkew<sup>20+</sup> 8737 8738setSkew(kx: number, ky: number, px: number, py: number): void 8739 8740设置矩阵的倾斜系数。 8741 8742**系统能力:** SystemCapability.Graphics.Drawing 8743 8744**参数:** 8745 8746| 参数名 | 类型 | 必填 | 说明 | 8747| ----------- | ---------------------------------------- | ---- | ------------------- | 8748| kx | number | 是 | x轴上的倾斜量,该参数为浮点数。正值会使绘制沿y轴增量方向向右倾斜;负值会使绘制沿y轴增量方向向左倾斜。 | 8749| ky | number | 是 | y轴上的倾斜量,该参数为浮点数。正值会使绘制沿x轴增量方向向下倾斜;负值会使绘制沿x轴增量方向向上倾斜。 | 8750| px | number | 是 | 倾斜中心点的x轴坐标,该参数为浮点数。0表示坐标原点,正数表示位于坐标原点右侧,负数表示位于坐标原点左侧。 | 8751| py | number | 是 | 倾斜中心点的y轴坐标,该参数为浮点数。0表示坐标原点,正数表示位于坐标原点下侧,负数表示位于坐标原点上侧。 | 8752 8753**示例:** 8754 8755```ts 8756import { drawing } from '@kit.ArkGraphics2D'; 8757 8758let matrix = new drawing.Matrix(); 8759matrix.setMatrix([1, 0.5, 1, 0.5, 1, 1, 1, 1, 1]); 8760matrix.setSkew(2, 0.5, 0.5, 2); 8761``` 8762 8763### setSinCos<sup>20+</sup> 8764 8765setSinCos(sinValue: number, cosValue: number, px: number, py: number): void 8766 8767设置矩阵,使其围绕旋转中心(px, py)以指定的正弦值和余弦值旋转。 8768 8769**系统能力:** SystemCapability.Graphics.Drawing 8770 8771**参数:** 8772 8773| 参数名 | 类型 | 必填 | 说明 | 8774| ----------- | ---------------------------------------- | ---- | ------------------- | 8775| sinValue | number | 是 | 旋转角度的正弦值。仅当正弦值和余弦值的平方和为1时,为旋转变换,否则矩阵可能包含平移缩放等其他变换。 | 8776| cosValue | number | 是 | 旋转角度的余弦值。仅当正弦值和余弦值的平方和为1时,为旋转变换,否则矩阵可能包含平移缩放等其他变换。 | 8777| px | number | 是 | 旋转中心的x轴坐标,该参数为浮点数。0表示坐标原点,正数表示位于坐标原点右侧,负数表示位于坐标原点左侧。 | 8778| py | number | 是 | 旋转中心的y轴坐标,该参数为浮点数。0表示坐标原点,正数表示位于坐标原点下侧,负数表示位于坐标原点上侧。 | 8779 8780**示例:** 8781 8782```ts 8783import { drawing } from '@kit.ArkGraphics2D'; 8784 8785let matrix = new drawing.Matrix(); 8786matrix.setMatrix([1, 0.5, 1, 0.5, 1, 1, 1, 1, 1]); 8787matrix.setSinCos(0, 1, 1, 0); 8788``` 8789### setRotation<sup>12+</sup> 8790 8791setRotation(degree: number, px: number, py: number): void 8792 8793设置矩阵为单位矩阵,并围绕位于(px, py)的旋转轴点进行旋转。 8794 8795**系统能力:** SystemCapability.Graphics.Drawing 8796 8797**参数:** 8798 8799| 参数名 | 类型 | 必填 | 说明 | 8800| ----------- | ---------------------------------------- | ---- | ------------------- | 8801| degree | number | 是 | 角度,单位为度。正数表示顺时针旋转,负数表示逆时针旋转,该参数为浮点数。| 8802| px | number | 是 | 旋转轴点的横坐标,该参数为浮点数。 | 8803| py | number | 是 | 旋转轴点的纵坐标,该参数为浮点数。 | 8804 8805**错误码:** 8806 8807以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 8808 8809| 错误码ID | 错误信息 | 8810| ------- | --------------------------------------------| 8811| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8812 8813**示例:** 8814 8815```ts 8816import { drawing } from '@kit.ArkGraphics2D'; 8817 8818let matrix = new drawing.Matrix(); 8819matrix.setRotation(90, 100, 100); 8820``` 8821 8822### setScale<sup>12+</sup> 8823 8824setScale(sx: number, sy: number, px: number, py: number): void 8825 8826设置矩阵为单位矩阵围绕位于(px, py)的中心点,以sx和sy进行缩放后的结果。 8827 8828**系统能力:** SystemCapability.Graphics.Drawing 8829 8830**参数:** 8831 8832| 参数名 | 类型 | 必填 | 说明 | 8833| ----------- | ---------------------------------------- | ---- | ------------------- | 8834| sx | number | 是 | x轴方向缩放系数,为负数时可看作是先关于y = px作镜像翻转后再进行缩放,该参数为浮点数。 | 8835| sy | number | 是 | y轴方向缩放系数,为负数时可看作是先关于x = py作镜像翻转后再进行缩放,该参数为浮点数。 | 8836| px | number | 是 | 缩放中心点的横坐标,该参数为浮点数。 | 8837| py | number | 是 | 缩放中心点的纵坐标,该参数为浮点数。 | 8838 8839**错误码:** 8840 8841以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 8842 8843| 错误码ID | 错误信息 | 8844| ------- | --------------------------------------------| 8845| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8846 8847**示例:** 8848 8849```ts 8850import { drawing } from '@kit.ArkGraphics2D'; 8851 8852let matrix = new drawing.Matrix(); 8853matrix.setScale(100, 100, 150, 150); 8854``` 8855 8856### setTranslation<sup>12+</sup> 8857 8858setTranslation(dx: number, dy: number): void 8859 8860设置矩阵为单位矩阵平移(dx, dy)后的结果。 8861 8862**系统能力:** SystemCapability.Graphics.Drawing 8863 8864**参数:** 8865 8866| 参数名 | 类型 | 必填 | 说明 | 8867| ----------- | ---------------------------------------- | ---- | ------------------- | 8868| dx | number | 是 | x轴方向平移距离,正数表示往x轴正方向平移,负数表示往x轴负方向平移,该参数为浮点数。 | 8869| dy | number | 是 | y轴方向平移距离,正数表示往y轴正方向平移,负数表示往y轴负方向平移,该参数为浮点数。 | 8870 8871**错误码:** 8872 8873以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 8874 8875| 错误码ID | 错误信息 | 8876| ------- | --------------------------------------------| 8877| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8878 8879**示例:** 8880 8881```ts 8882import { drawing } from '@kit.ArkGraphics2D'; 8883 8884let matrix = new drawing.Matrix(); 8885matrix.setTranslation(100, 100); 8886``` 8887 8888### setMatrix<sup>12+</sup> 8889 8890setMatrix(values: Array\<number>): void 8891 8892设置矩阵对象的各项参数。 8893 8894**系统能力:** SystemCapability.Graphics.Drawing 8895 8896**参数:** 8897 8898| 参数名 | 类型 | 必填 | 说明 | 8899| ------ | ---------------------------------------------------- | ---- | ---------------- | 8900| values | Array\<number> | 是 | 长度为9的浮点数组,表示矩阵对象参数。数组中的值按下标从小,到大分别表示水平缩放系数、水平倾斜系数、水平位移系数、垂直倾斜系数、垂直缩放系数、垂直位移系数、X轴透视系数、Y轴透视系数、透视缩放系数。 | 8901 8902**错误码:** 8903 8904以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 8905 8906| 错误码ID | 错误信息 | 8907| ------- | --------------------------------------------| 8908| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types; 3. Parameter verification failed. | 8909 8910**示例:** 8911 8912```ts 8913import { drawing } from '@kit.ArkGraphics2D'; 8914 8915let matrix = new drawing.Matrix(); 8916let value : Array<number> = [2, 2, 2, 2, 2, 2, 2, 2, 2]; 8917matrix.setMatrix(value); 8918``` 8919 8920### preConcat<sup>12+</sup> 8921 8922preConcat(matrix: Matrix): void 8923 8924将当前矩阵设置为当前矩阵左乘matrix的结果。 8925 8926**系统能力:** SystemCapability.Graphics.Drawing 8927 8928**参数:** 8929 8930| 参数名 | 类型 | 必填 | 说明 | 8931| ------ | ---------------------------------------------------- | ---- | ---------------- | 8932| matrix | [Matrix](#matrix12) | 是 | 表示矩阵对象,位于乘法表达式右侧。 | 8933 8934**错误码:** 8935 8936以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 8937 8938| 错误码ID | 错误信息 | 8939| ------- | --------------------------------------------| 8940| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 8941 8942**示例:** 8943 8944```ts 8945import { drawing } from '@kit.ArkGraphics2D'; 8946 8947let matrix1 = new drawing.Matrix(); 8948matrix1.setMatrix([2, 1, 3, 1, 2, 1, 3, 1, 2]); 8949let matrix2 = new drawing.Matrix(); 8950matrix2.setMatrix([-2, 1, 3, 1, 0, -1, 3, -1, 2]); 8951matrix1.preConcat(matrix2); 8952``` 8953 8954### setMatrix<sup>20+</sup> 8955 8956setMatrix(matrix: Array\<number\> \| Matrix): void 8957 8958用一个矩阵对当前矩阵进行更新。 8959 8960**系统能力:** SystemCapability.Graphics.Drawing 8961 8962| 参数名 | 类型 | 必填 | 说明 | 8963| ------ | ---------------------------------------------------- | ---- | ---------------- | 8964| matrix | Array\<number\> \| [Matrix](#matrix12) | 是 | 用于更新的数组或矩阵。 | 8965 8966**示例:** 8967 8968```ts 8969import { drawing } from '@kit.ArkGraphics2D'; 8970 8971let matrix1 = new drawing.Matrix(); 8972matrix1.setMatrix([2, 1, 3, 1, 2, 1, 3, 1, 2]); 8973let matrix2 = new drawing.Matrix(); 8974matrix1.setMatrix(matrix2); 8975``` 8976 8977### setConcat<sup>20+</sup> 8978 8979setConcat(matrixA: Matrix, matrixB: Matrix): void 8980 8981用两个矩阵的乘积更新当前矩阵。 8982 8983**系统能力:** SystemCapability.Graphics.Drawing 8984 8985| 参数名 | 类型 | 必填 | 说明 | 8986| ------ | ---------------------------------------------------- | ---- | ---------------- | 8987| matrixA | [Matrix](#matrix12) | 是 | 用于运算的矩阵A。 | 8988| matrixB | [Matrix](#matrix12) | 是 | 用于运算的矩阵B。 | 8989 8990**示例:** 8991 8992```ts 8993import { drawing } from '@kit.ArkGraphics2D'; 8994 8995let matrix1 = new drawing.Matrix(); 8996matrix1.setMatrix([2, 1, 3, 1, 2, 1, 3, 1, 2]); 8997let matrix2 = new drawing.Matrix(); 8998matrix2.setMatrix([-2, 1, 3, 1, 0, -1, 3, -1, 2]); 8999matrix1.setConcat(matrix2, matrix1); 9000``` 9001 9002### postConcat<sup>20+</sup> 9003 9004postConcat(matrix: Matrix): void 9005 9006用当前矩阵右乘一个矩阵。 9007 9008**系统能力:** SystemCapability.Graphics.Drawing 9009 9010| 参数名 | 类型 | 必填 | 说明 | 9011| ------ | ---------------------------------------------------- | ---- | ---------------- | 9012| matrix | [Matrix](#matrix12) | 是 | 用于运算的矩阵。 | 9013 9014**示例:** 9015 9016```ts 9017import { drawing } from '@kit.ArkGraphics2D'; 9018 9019let matrix = new drawing.Matrix(); 9020if (matrix.isIdentity()) { 9021 console.info("matrix is identity."); 9022} else { 9023 console.info("matrix is not identity."); 9024} 9025let matrix1 = new drawing.Matrix(); 9026matrix1.setMatrix([2, 1, 3, 1, 2, 1, 3, 1, 2]); 9027let matrix2 = new drawing.Matrix(); 9028matrix2.setMatrix([-2, 1, 3, 1, 0, -1, 3, -1, 2]); 9029matrix1.postConcat(matrix2); 9030``` 9031 9032### isEqual<sup>12+</sup> 9033 9034isEqual(matrix: Matrix): Boolean 9035 9036判断两个矩阵是否相等。 9037 9038**系统能力:** SystemCapability.Graphics.Drawing 9039 9040**参数:** 9041 9042| 参数名 | 类型 | 必填 | 说明 | 9043| ------ | ---------------------------------------------------- | ---- | ---------------- | 9044| matrix | [Matrix](#matrix12) | 是 | 另一个矩阵。 | 9045 9046**返回值:** 9047 9048| 类型 | 说明 | 9049| --------------------------- | -------------------- | 9050| Boolean | 返回两个矩阵的比较结果。true表示两个矩阵相等,false表示两个矩阵不相等。 | 9051 9052**错误码:** 9053 9054以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 9055 9056| 错误码ID | 错误信息 | 9057| ------- | --------------------------------------------| 9058| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 9059 9060**示例:** 9061 9062```ts 9063import { drawing } from '@kit.ArkGraphics2D'; 9064 9065let matrix1 = new drawing.Matrix(); 9066matrix1.setMatrix([2, 1, 3, 1, 2, 1, 3, 1, 2]); 9067let matrix2 = new drawing.Matrix(); 9068matrix2.setMatrix([-2, 1, 3, 1, 0, -1, 3, -1, 2]); 9069if (matrix1.isEqual(matrix2)) { 9070 console.info("matrix1 and matrix2 are equal."); 9071} else { 9072 console.info("matrix1 and matrix2 are not equal."); 9073} 9074``` 9075 9076### invert<sup>12+</sup> 9077 9078invert(matrix: Matrix): Boolean 9079 9080将矩阵matrix设置为当前矩阵的逆矩阵,并返回是否设置成功的结果。 9081 9082**系统能力:** SystemCapability.Graphics.Drawing 9083 9084**参数:** 9085 9086| 参数名 | 类型 | 必填 | 说明 | 9087| ------ | ---------------------------------------------------- | ---- | ---------------- | 9088| matrix | [Matrix](#matrix12) | 是 | 矩阵对象,用于存储获取到的逆矩阵。 | 9089 9090**返回值:** 9091 9092| 类型 | 说明 | 9093| --------------------------- | -------------------- | 9094| Boolean | 返回matrix是否被设置为逆矩阵的结果。true表示当前矩阵可逆,matrix被设置为逆矩阵,false表示当前矩阵不可逆,matrix不被设置。 | 9095 9096**错误码:** 9097 9098以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 9099 9100| 错误码ID | 错误信息 | 9101| ------- | --------------------------------------------| 9102| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 9103 9104**示例:** 9105 9106```ts 9107import { drawing } from '@kit.ArkGraphics2D'; 9108 9109let matrix1 = new drawing.Matrix(); 9110matrix1.setMatrix([2, 1, 3, 1, 2, 1, 3, 1, 2]); 9111let matrix2 = new drawing.Matrix(); 9112matrix2.setMatrix([-2, 1, 3, 1, 0, -1, 3, -1, 2]); 9113if (matrix1.invert(matrix2)) { 9114 console.info("matrix1 is invertible and matrix2 is set as an inverse matrix of the matrix1."); 9115} else { 9116 console.info("matrix1 is not invertible and matrix2 is not changed."); 9117} 9118``` 9119 9120### isIdentity<sup>12+</sup> 9121 9122isIdentity(): Boolean 9123 9124判断矩阵是否是单位矩阵。 9125 9126**系统能力:** SystemCapability.Graphics.Drawing 9127 9128**返回值:** 9129 9130| 类型 | 说明 | 9131| --------------------------- | -------------------- | 9132| Boolean | 返回矩阵是否是单位矩阵。true表示矩阵是单位矩阵,false表示矩阵不是单位矩阵。 | 9133 9134**示例:** 9135 9136```ts 9137import { drawing } from '@kit.ArkGraphics2D'; 9138 9139let matrix = new drawing.Matrix(); 9140if (matrix.isIdentity()) { 9141 console.info("matrix is identity."); 9142} else { 9143 console.info("matrix is not identity."); 9144} 9145``` 9146 9147### getValue<sup>12+</sup> 9148 9149getValue(index: number): number 9150 9151获取矩阵给定索引位的值。索引范围0-8。 9152 9153**系统能力:** SystemCapability.Graphics.Drawing 9154 9155**参数:** 9156 9157| 参数名 | 类型 | 必填 | 说明 | 9158| --------------- | ------- | ---- | ----------------------------------------------------------- | 9159| index | number | 是 | 索引位置,范围0-8,该参数为整数。 | 9160 9161**返回值:** 9162 9163| 类型 | 说明 | 9164| --------------------- | -------------- | 9165| number | 函数返回矩阵给定索引位对应的值,该返回值为整数。 | 9166 9167**错误码:** 9168 9169以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 9170 9171| 错误码ID | 错误信息 | 9172| ------- | --------------------------------------------| 9173| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types;3. Parameter verification failed.| 9174 9175**示例:** 9176 9177```ts 9178import {drawing} from "@kit.ArkGraphics2D"; 9179 9180let matrix = new drawing.Matrix(); 9181for (let i = 0; i < 9; i++) { 9182 console.info("matrix "+matrix.getValue(i).toString()); 9183} 9184``` 9185 9186### postRotate<sup>12+</sup> 9187 9188postRotate(degree: number, px: number, py: number): void 9189 9190将矩阵设置为矩阵右乘围绕轴心点旋转一定角度的单位矩阵后得到的矩阵。 9191 9192**系统能力:** SystemCapability.Graphics.Drawing 9193 9194**参数:** 9195 9196| 参数名 | 类型 | 必填 | 说明 | 9197| --------------- | ------- | ---- | ----------------------------------------------------------- | 9198| degree | number | 是 | 旋转角度,单位为度。正数表示顺时针旋转,负数表示逆时针旋转,该参数为浮点数。 | 9199| px | number | 是 | 旋转中心点的横坐标,该参数为浮点数。 | 9200| py | number | 是 | 旋转中心点的纵坐标,该参数为浮点数。 | 9201 9202**错误码:** 9203 9204以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 9205 9206| 错误码ID | 错误信息 | 9207| ------- | --------------------------------------------| 9208| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 9209 9210**示例:** 9211 9212```ts 9213import {drawing} from "@kit.ArkGraphics2D"; 9214 9215let matrix = new drawing.Matrix(); 9216let degree: number = 2; 9217let px: number = 3; 9218let py: number = 4; 9219matrix.postRotate(degree, px, py); 9220console.info("matrix= "+matrix.getAll().toString()); 9221``` 9222 9223### postScale<sup>12+</sup> 9224 9225postScale(sx: number, sy: number, px: number, py: number): void 9226 9227将矩阵设置为矩阵右乘围绕轴心点按一定缩放系数缩放后的单位矩阵后得到的矩阵。 9228 9229**系统能力:** SystemCapability.Graphics.Drawing 9230 9231**参数:** 9232 9233| 参数名 | 类型 | 必填 | 说明 | 9234| --------------- | ------- | ---- | ----------------------------------------------------------- | 9235| sx | number | 是 | x轴方向缩放系数,负数表示先关于y = px作镜像翻转后再进行缩放,该参数为浮点数。 | 9236| sy | number | 是 | y轴方向缩放系数,负数表示先关于x = py作镜像翻转后再进行缩放,该参数为浮点数。 | 9237| px | number | 是 | 缩放中心点的横坐标,该参数为浮点数。 | 9238| py | number | 是 | 缩放中心点的纵坐标,该参数为浮点数。 | 9239 9240**错误码:** 9241 9242以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 9243 9244| 错误码ID | 错误信息 | 9245| ------- | --------------------------------------------| 9246| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 9247 9248**示例:** 9249 9250```ts 9251import {drawing} from "@kit.ArkGraphics2D"; 9252 9253let matrix = new drawing.Matrix(); 9254let sx: number = 2; 9255let sy: number = 0.5; 9256let px: number = 1; 9257let py: number = 1; 9258matrix.postScale(sx, sy, px, py); 9259console.info("matrix= "+matrix.getAll().toString()); 9260``` 9261 9262### postTranslate<sup>12+</sup> 9263 9264postTranslate(dx: number, dy: number): void 9265 9266将矩阵设置为矩阵右乘平移一定距离后的单位矩阵后得到的矩阵。 9267 9268**系统能力:** SystemCapability.Graphics.Drawing 9269 9270**参数:** 9271 9272| 参数名 | 类型 | 必填 | 说明 | 9273| --------------- | ------- | ---- | ----------------------------------------------------------- | 9274| dx | number | 是 | x轴方向平移距离,正数表示往x轴正方向平移,负数表示往x轴负方向平移,该参数为浮点数。 | 9275| dy | number | 是 | y轴方向平移距离,正数表示往y轴正方向平移,负数表示往y轴负方向平移,该参数为浮点数。 | 9276 9277**错误码:** 9278 9279以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 9280 9281| 错误码ID | 错误信息 | 9282| ------- | --------------------------------------------| 9283| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 9284 9285**示例:** 9286 9287```ts 9288import {drawing} from "@kit.ArkGraphics2D"; 9289 9290let matrix = new drawing.Matrix(); 9291let dx: number = 3; 9292let dy: number = 4; 9293matrix.postTranslate(dx, dy); 9294console.info("matrix= "+matrix.getAll().toString()); 9295``` 9296 9297### preRotate<sup>12+</sup> 9298 9299preRotate(degree: number, px: number, py: number): void 9300 9301将矩阵设置为矩阵左乘围绕轴心点旋转一定角度的单位矩阵后得到的矩阵。 9302 9303**系统能力:** SystemCapability.Graphics.Drawing 9304 9305**参数:** 9306 9307| 参数名 | 类型 | 必填 | 说明 | 9308| --------------- | ------- | ---- | ----------------------------------------------------------- | 9309| degree | number | 是 | 旋转角度,单位为度。正数表示顺时针旋转,负数表示逆时针旋转,该参数为浮点数。 | 9310| px | number | 是 | 旋转中心点的横坐标,该参数为浮点数。 | 9311| py | number | 是 | 旋转中心点的纵坐标,该参数为浮点数。 | 9312 9313**错误码:** 9314 9315以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 9316 9317| 错误码ID | 错误信息 | 9318| ------- | --------------------------------------------| 9319| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 9320 9321**示例:** 9322 9323```ts 9324import {drawing} from "@kit.ArkGraphics2D"; 9325 9326let matrix = new drawing.Matrix(); 9327let degree: number = 2; 9328let px: number = 3; 9329let py: number = 4; 9330matrix.preRotate(degree, px, py); 9331console.info("matrix= "+matrix.getAll().toString()); 9332``` 9333 9334### postSkew<sup>20+</sup> 9335 9336postSkew(kx: number, ky: number, px: number, py: number): void 9337 9338当前矩阵右乘一个倾斜变换矩阵。 9339 9340**系统能力:** SystemCapability.Graphics.Drawing 9341 9342**参数:** 9343 9344| 参数名 | 类型 | 必填 | 说明 | 9345| ----------- | ---------------------------------------- | ---- | ------------------- | 9346| kx | number | 是 | x轴上的倾斜量,该参数为浮点数。正值会使绘制沿y轴增量方向向右倾斜;负值会使绘制沿y轴增量方向向左倾斜。 | 9347| ky | number | 是 | y轴上的倾斜量,该参数为浮点数。正值会使绘制沿x轴增量方向向下倾斜;负值会使绘制沿x轴增量方向向上倾斜。 | 9348| px | number | 是 | 倾斜中心点的x轴坐标,该参数为浮点数。0表示坐标原点,正数表示位于坐标原点右侧,负数表示位于坐标原点左侧。 | 9349| py | number | 是 | 倾斜中心点的y轴坐标,该参数为浮点数。0表示坐标原点,正数表示位于坐标原点下侧,负数表示位于坐标原点上侧。 | 9350 9351**示例:** 9352 9353```ts 9354import {drawing} from "@kit.ArkGraphics2D" 9355let matrix = new drawing.Matrix(); 9356matrix.postSkew(2.0, 1.0, 2.0, 1.0); 9357``` 9358 9359### preSkew<sup>20+</sup> 9360 9361 preSkew(kx: number, ky: number, px: number, py: number): void 9362 9363当前矩阵左乘一个倾斜变换矩阵。 9364 9365**系统能力:** SystemCapability.Graphics.Drawing 9366 9367**参数:** 9368 9369| 参数名 | 类型 | 必填 | 说明 | 9370| ----------- | ---------------------------------------- | ---- | ------------------- | 9371| kx | number | 是 | x轴上的倾斜量,该参数为浮点数。正值会使绘制沿y轴增量方向向右倾斜;负值会使绘制沿y轴增量方向向左倾斜。 | 9372| ky | number | 是 | y轴上的倾斜量,该参数为浮点数。正值会使绘制沿x轴增量方向向下倾斜;负值会使绘制沿x轴增量方向向上倾斜。 | 9373| px | number | 是 | 倾斜中心点的x轴坐标,该参数为浮点数。0表示坐标原点,正数表示位于坐标原点右侧,负数表示位于坐标原点左侧。 | 9374| py | number | 是 | 倾斜中心点的y轴坐标,该参数为浮点数。0表示坐标原点,正数表示位于坐标原点下侧,负数表示位于坐标原点上侧。 | 9375 9376**示例:** 9377 9378```ts 9379import {drawing} from "@kit.ArkGraphics2D" 9380let matrix = new drawing.Matrix(); 9381matrix.preSkew(2.0, 1.0, 2.0, 1.0); 9382``` 9383 9384### mapRadius<sup>20+</sup> 9385 9386mapRadius(radius: number): number 9387 9388返回半径为radius的圆经过当前矩阵映射形成的椭圆的平均半径。平均半径的平方为椭圆长轴长度和短轴长度的乘积。若当前矩阵包含透视变换,则该结果无意义。 9389 9390**系统能力:** SystemCapability.Graphics.Drawing 9391 9392| 参数名 | 类型 | 必填 | 说明 | 9393| ------ | ---------------------------------------------------- | ---- | ---------------- | 9394| radius | number | 是 | 用于计算的圆的半径,浮点数。如果是负数,则按照绝对值进行计算。 | 9395 9396**返回值:** 9397 9398| 类型 | 说明 | 9399| --------------------------- | -------------------- | 9400| number | 返回经过变换之后的平均半径。 | 9401 9402**示例:** 9403 9404```ts 9405import {drawing} from "@kit.ArkGraphics2D" 9406 9407let matrix = new drawing.Matrix(); 9408matrix.setMatrix([2, 1, 3, 1, 2, 1, 3, 1, 2]); 9409let radius = matrix.mapRadius(10); 9410console.info('radius', radius); 9411``` 9412 9413### preScale<sup>12+</sup> 9414 9415preScale(sx: number, sy: number, px: number, py: number): void 9416 9417将矩阵设置为矩阵左乘围绕轴心点按一定缩放系数缩放后的单位矩阵后得到的矩阵。 9418 9419**系统能力:** SystemCapability.Graphics.Drawing 9420 9421**参数:** 9422 9423| 参数名 | 类型 | 必填 | 说明 | 9424| --------------- | ------- | ---- | ----------------------------------------------------------- | 9425| sx | number | 是 | x轴方向缩放系数,为负数时可看作是先关于y = px作镜像翻转后再进行缩放,该参数为浮点数。 | 9426| sy | number | 是 | y轴方向缩放系数,为负数时可看作是先关于x = py作镜像翻转后再进行缩放,该参数为浮点数。 | 9427| px | number | 是 | 轴心点横坐标,该参数为浮点数。 | 9428| py | number | 是 | 轴心点纵坐标,该参数为浮点数。 | 9429 9430**错误码:** 9431 9432以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 9433 9434| 错误码ID | 错误信息 | 9435| ------- | --------------------------------------------| 9436| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 9437 9438**示例:** 9439 9440```ts 9441import {drawing} from "@kit.ArkGraphics2D"; 9442 9443let matrix = new drawing.Matrix(); 9444let sx: number = 2; 9445let sy: number = 0.5; 9446let px: number = 1; 9447let py: number = 1; 9448matrix.preScale(sx, sy, px, py); 9449console.info("matrix"+matrix.getAll().toString()); 9450``` 9451 9452### preTranslate<sup>12+</sup> 9453 9454preTranslate(dx: number, dy: number): void 9455 9456将矩阵设置为矩阵左乘平移一定距离后的单位矩阵后得到的矩阵。 9457 9458**系统能力:** SystemCapability.Graphics.Drawing 9459 9460**参数:** 9461 9462| 参数名 | 类型 | 必填 | 说明 | 9463| --------------- | ------- | ---- | ----------------------------------------------------------- | 9464| dx | number | 是 | x轴方向平移距离,正数表示往x轴正方向平移,负数表示往x轴负方向平移,该参数为浮点数。 | 9465| dy | number | 是 | y轴方向平移距离,正数表示往y轴正方向平移,负数表示往y轴负方向平移,该参数为浮点数。 | 9466 9467**错误码:** 9468 9469以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 9470 9471| 错误码ID | 错误信息 | 9472| ------- | --------------------------------------------| 9473| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 9474 9475**示例:** 9476 9477```ts 9478import {drawing} from "@kit.ArkGraphics2D"; 9479 9480let matrix = new drawing.Matrix(); 9481let dx: number = 3; 9482let dy: number = 4; 9483matrix.preTranslate(dx, dy); 9484console.info("matrix"+matrix.getAll().toString()); 9485``` 9486 9487### reset<sup>12+</sup> 9488 9489reset(): void 9490 9491重置当前矩阵为单位矩阵。 9492 9493**系统能力:** SystemCapability.Graphics.Drawing 9494 9495**示例:** 9496 9497```ts 9498import {drawing} from "@kit.ArkGraphics2D"; 9499 9500let matrix = new drawing.Matrix(); 9501matrix.postScale(2, 3, 4, 5); 9502matrix.reset(); 9503console.info("matrix= "+matrix.getAll().toString()); 9504``` 9505 9506### mapPoints<sup>12+</sup> 9507 9508mapPoints(src: Array\<common2D.Point>): Array\<common2D.Point> 9509 9510通过矩阵变换将源点数组映射到目标点数组。 9511 9512**系统能力:** SystemCapability.Graphics.Drawing 9513 9514**参数:** 9515 9516| 参数名 | 类型 | 必填 | 说明 | 9517| --------------- | ------- | ---- | ----------------------------------------------------------- | 9518| src | Array\<[common2D.Point](js-apis-graphics-common2D.md#point12)> | 是 | 源点数组。 | 9519 9520**返回值:** 9521 9522| 类型 | 说明 | 9523| --------------------- | -------------- | 9524| Array\<[common2D.Point](js-apis-graphics-common2D.md#point12)> | 源点数组经矩阵变换后的点数组。 | 9525 9526**错误码:** 9527 9528以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 9529 9530| 错误码ID | 错误信息 | 9531| ------- | --------------------------------------------| 9532| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 9533 9534**示例:** 9535 9536```ts 9537import {drawing,common2D} from "@kit.ArkGraphics2D"; 9538 9539let src: Array<common2D.Point> = []; 9540src.push({x: 15, y: 20}); 9541src.push({x: 20, y: 15}); 9542src.push({x: 30, y: 10}); 9543let matrix = new drawing.Matrix(); 9544let dst: Array<common2D.Point> = matrix.mapPoints(src); 9545console.info("matrix= src: "+JSON.stringify(src)); 9546console.info("matrix= dst: "+JSON.stringify(dst)); 9547``` 9548 9549### getAll<sup>12+</sup> 9550 9551getAll(): Array\<number> 9552 9553获取矩阵的所有元素值。 9554 9555**系统能力:** SystemCapability.Graphics.Drawing 9556 9557**返回值:** 9558 9559| 类型 | 说明 | 9560| --------------------- | -------------- | 9561| Array\<number> | 存储矩阵元素值的浮点数组,长度为9。 | 9562 9563**示例:** 9564 9565```ts 9566import {drawing} from "@kit.ArkGraphics2D"; 9567 9568let matrix = new drawing.Matrix(); 9569console.info("matrix "+ matrix.getAll()); 9570``` 9571 9572### mapRect<sup>12+</sup> 9573 9574mapRect(dst: common2D.Rect, src: common2D.Rect): boolean 9575 9576将目标矩形设置为源矩形通过矩阵变换后的图形的外接矩形。如下图所示,蓝色矩形为源矩形,假设黄色矩形为源矩形通过矩阵变换形成的图形,此时黄色矩形的边不与坐标轴平行,无法使用矩形对象表示,因此,将目标矩形设置为黄色矩形的外接矩形,即黑色矩形。 9577 9578 9579 9580**系统能力:** SystemCapability.Graphics.Drawing 9581 9582**参数:** 9583 9584| 参数名 | 类型 | 必填 | 说明 | 9585| --------------- | ------- | ---- | ----------------------------------------------------------- | 9586| dst | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 目标矩形对象,用于存储源矩形经矩阵变换后的图形的外接矩形。 | 9587| src |[common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 源矩形对象。 | 9588 9589**返回值:** 9590 9591| 类型 | 说明 | 9592| --------------------- | -------------- | 9593| boolean | 返回源矩形经过矩阵变换后的图形是否仍然是矩形,true表示是矩形,false表示不是矩形。 | 9594 9595**错误码:** 9596 9597以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 9598 9599| 错误码ID | 错误信息 | 9600| ------- | --------------------------------------------| 9601| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 9602 9603**示例:** 9604 9605```ts 9606import {drawing,common2D} from "@kit.ArkGraphics2D"; 9607 9608let dst: common2D.Rect = { left: 100, top: 20, right: 130, bottom: 60 }; 9609let src: common2D.Rect = { left: 100, top: 80, right: 130, bottom: 120 }; 9610let matrix = new drawing.Matrix(); 9611if (matrix.mapRect(dst, src)) { 9612 console.info("matrix= dst "+JSON.stringify(dst)); 9613} 9614``` 9615 9616### setRectToRect<sup>12+</sup> 9617 9618setRectToRect(src: common2D.Rect, dst: common2D.Rect, scaleToFit: ScaleToFit): boolean 9619 9620将当前矩阵设置为能使源矩形映射到目标矩形的变换矩阵。 9621 9622**系统能力:** SystemCapability.Graphics.Drawing 9623 9624**参数:** 9625 9626| 参数名 | 类型 | 必填 | 说明 | 9627| --------------- | ------- | ---- | ----------------------------------------------------------- | 9628| src | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 源矩形。 | 9629| dst | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 目标矩形。 | 9630| scaleToFit | [ScaleToFit](#scaletofit12) | 是 | 源矩形到目标矩形的映射方式。 | 9631 9632**返回值:** 9633 9634| 类型 | 说明 | 9635| --------------------- | -------------- | 9636| boolean | 返回矩阵是否可以表示矩形之间的映射,true表示可以,false表示不可以。如果源矩形的宽高任意一个小于等于0,则返回false,并将矩阵设置为单位矩阵;如果目标矩形的宽高任意一个小于等于0,则返回true,并将矩阵设置为除透视缩放系数为1外其余值皆为0的矩阵。 | 9637 9638**错误码:** 9639 9640以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 9641 9642| 错误码ID | 错误信息 | 9643| ------- | --------------------------------------------| 9644| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 9645 9646**示例:** 9647 9648```ts 9649import {drawing,common2D} from "@kit.ArkGraphics2D"; 9650 9651let src: common2D.Rect = { left: 100, top: 100, right: 300, bottom: 300 }; 9652let dst: common2D.Rect = { left: 200, top: 200, right: 600, bottom: 600 }; 9653let scaleToFit: drawing.ScaleToFit = drawing.ScaleToFit.FILL_SCALE_TO_FIT 9654let matrix = new drawing.Matrix(); 9655if (matrix.setRectToRect(src, dst, scaleToFit)) { 9656 console.info("matrix"+matrix.getAll().toString()); 9657} 9658``` 9659 9660### setPolyToPoly<sup>12+</sup> 9661 9662setPolyToPoly(src: Array\<common2D.Point>, dst: Array\<common2D.Point>, count: number): boolean 9663 9664将当前矩阵设置为能够将源点数组映射到目标点数组的变换矩阵。源点和目标点的个数必须大于等于0,小于等于4。 9665 9666**系统能力:** SystemCapability.Graphics.Drawing 9667 9668**参数:** 9669 9670| 参数名 | 类型 | 必填 | 说明 | 9671| --------------- | ------- | ---- | ----------------------------------------------------------- | 9672| src | Array\<[common2D.Point](js-apis-graphics-common2D.md#point12)> | 是 | 源点数组,长度必须为count。 | 9673| dst | Array\<[common2D.Point](js-apis-graphics-common2D.md#point12)> | 是 | 目标点数组,长度必须为count。 | 9674| count | number | 是 | 在src和dst点的数量,该参数为整数。 | 9675 9676**返回值:** 9677 9678| 类型 | 说明 | 9679| --------------------- | -------------- | 9680| boolean | 返回设置矩阵是否成功的结果,true表示设置成功,false表示设置失败。 | 9681 9682**错误码:** 9683 9684以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 9685 9686| 错误码ID | 错误信息 | 9687| ------- | --------------------------------------------| 9688| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 9689 9690**示例:** 9691 9692```ts 9693import {drawing,common2D} from "@kit.ArkGraphics2D"; 9694 9695let srcPoints: Array<common2D.Point> = [ {x: 10, y: 20}, {x: 200, y: 150} ]; 9696let dstPoints: Array<common2D.Point> = [{ x:0, y: 10 }, { x:300, y: 600 }]; 9697let matrix = new drawing.Matrix(); 9698if (matrix.setPolyToPoly(srcPoints, dstPoints, 2)) { 9699 console.info("matrix"+matrix.getAll().toString()); 9700} 9701``` 9702 9703## RoundRect<sup>12+</sup> 9704 9705圆角矩形对象。 9706 9707### constructor<sup>20+</sup> 9708 9709constructor(roundRect: RoundRect) 9710 9711拷贝一个圆角矩形。 9712 9713**系统能力:** SystemCapability.Graphics.Drawing 9714 9715**参数:** 9716 9717| 参数名 | 类型 | 必填 | 说明 | 9718| ----------- | ---------------------------------------- | ---- | ------------------- | 9719| roundRect | [RoundRect](#roundrect12) | 是 | 用于拷贝的圆角矩形。 | 9720 9721**示例:** 9722 9723```ts 9724import { common2D, drawing } from '@kit.ArkGraphics2D'; 9725 9726let rect: common2D.Rect = {left : 100, top : 100, right : 500, bottom : 300}; 9727let roundRect = new drawing.RoundRect(rect, 50, 50); 9728let roundRect2 = new drawing.RoundRect(roundRect); 9729``` 9730 9731### constructor<sup>12+</sup> 9732 9733constructor(rect: common2D.Rect, xRadii: number, yRadii: number) 9734 9735构造一个圆角矩形对象,当且仅当xRadii和yRadii均大于0时,圆角生效,否则只会构造一个矩形。 9736 9737**系统能力:** SystemCapability.Graphics.Drawing 9738 9739**参数:** 9740 9741| 参数名 | 类型 | 必填 | 说明 | 9742| ----------- | ---------------------------------------- | ---- | ------------------- | 9743| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 需要创建的圆角矩形区域。 | 9744| xRadii | number | 是 | X轴上的圆角半径,该参数为浮点数,小于等于0时无效。 | 9745| yRadii | number | 是 | Y轴上的圆角半径,该参数为浮点数,小于等于0时无效。 | 9746 9747**错误码:** 9748 9749以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 9750 9751| 错误码ID | 错误信息 | 9752| ------- | --------------------------------------------| 9753| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 9754 9755**示例:** 9756 9757```ts 9758import { common2D, drawing } from '@kit.ArkGraphics2D'; 9759 9760let rect: common2D.Rect = {left : 100, top : 100, right : 500, bottom : 300}; 9761let roundRect = new drawing.RoundRect(rect, 50, 50); 9762``` 9763### setCorner<sup>12+</sup> 9764 9765setCorner(pos: CornerPos, x: number, y: number): void 9766 9767设置圆角矩形中指定圆角位置的圆角半径。 9768 9769**系统能力:** SystemCapability.Graphics.Drawing 9770 9771**参数:** 9772 9773| 参数名 | 类型 | 必填 | 说明 | 9774| -------- | -------------------------------------------- | ---- | ------------------------------- | 9775| pos | [CornerPos](#cornerpos12) | 是 | 圆角位置。 | 9776| x | number | 是 | x轴方向的圆角半径,该参数为浮点数,小于等于0时无效。 | 9777| y | number | 是 | y轴方向的圆角半径,该参数为浮点数,小于等于0时无效。 | 9778 9779**错误码:** 9780 9781以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 9782 9783| 错误码ID | 错误信息 | 9784| ------- | --------------------------------------------| 9785| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 9786 9787**示例:** 9788 9789```ts 9790import { drawing } from '@kit.ArkGraphics2D'; 9791 9792let roundRect : drawing.RoundRect = new drawing.RoundRect({left: 0, top: 0, right: 300, bottom: 300}, 50, 50); 9793roundRect.setCorner(drawing.CornerPos.TOP_LEFT_POS, 150, 150); 9794``` 9795 9796### getCorner<sup>12+</sup> 9797 9798getCorner(pos: CornerPos): common2D.Point 9799 9800获取圆角矩形中指定圆角位置的圆角半径。 9801 9802**系统能力:** SystemCapability.Graphics.Drawing 9803 9804**参数:** 9805 9806| 参数名 | 类型 | 必填 | 说明 | 9807| -------- | -------------------------------------------- | ---- | ------------------------------- | 9808| pos | [CornerPos](#cornerpos12) | 是 | 圆角位置。 | 9809 9810**返回值:** 9811 9812| 类型 | 说明 | 9813| --------------------- | -------------- | 9814| [common2D.Point](js-apis-graphics-common2D.md#point12) | 返回一个点,其横坐标表示圆角x轴方向上的半径,纵坐标表示y轴方向上的半径。 | 9815 9816**错误码:** 9817 9818以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 9819 9820| 错误码ID | 错误信息 | 9821| ------- | --------------------------------------------| 9822| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 9823 9824**示例:** 9825 9826```ts 9827import { drawing } from '@kit.ArkGraphics2D'; 9828 9829let roundRect : drawing.RoundRect = new drawing.RoundRect({left: 0, top: 0, right: 300, bottom: 300}, 50, 50); 9830let cornerRadius = roundRect.getCorner(drawing.CornerPos.BOTTOM_LEFT_POS); 9831console.info("getCorner---"+cornerRadius.x) 9832console.info("getCorner---"+cornerRadius.y) 9833``` 9834 9835### offset<sup>12+</sup> 9836 9837offset(dx: number, dy: number): void 9838 9839将圆角矩形分别沿x轴方向和y轴方向平移dx,dy。 9840 9841**系统能力:** SystemCapability.Graphics.Drawing 9842 9843**参数:** 9844 9845| 参数名 | 类型 | 必填 | 说明 | 9846| -------- | -------------------------------------------- | ---- | ------------------------------- | 9847| dx | number | 是 | 表示x轴方向上的偏移量。正数表示向x轴正方向平移,负数表示向x轴负方向平移,该参数为浮点数。 | 9848| dy | number | 是 | 表示y轴方向上的偏移量。正数表示向y轴正方向平移,负数表示向y轴负方向平移,该参数为浮点数。 | 9849 9850**错误码:** 9851 9852以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 9853 9854| 错误码ID | 错误信息 | 9855| ------- | --------------------------------------------| 9856| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 9857 9858**示例:** 9859 9860```ts 9861import { drawing } from '@kit.ArkGraphics2D'; 9862 9863let roundRect : drawing.RoundRect = new drawing.RoundRect({left: 0, top: 0, right: 300, bottom: 300}, 50, 50); 9864roundRect.offset(100, 100); 9865``` 9866 9867## Region<sup>12+</sup> 9868 9869区域对象,用于描述所绘制图形的区域信息。 9870 9871### constructor<sup>20+</sup> 9872 9873constructor() 9874 9875构造一个区域对象。 9876 9877**系统能力:** SystemCapability.Graphics.Drawing 9878 9879```ts 9880import { RenderNode } from '@kit.ArkUI'; 9881import { drawing } from '@kit.ArkGraphics2D'; 9882class DrawingRenderNode extends RenderNode { 9883 draw(context : DrawContext) { 9884 const canvas = context.canvas; 9885 const pen = new drawing.Pen(); 9886 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 9887 pen.setStrokeWidth(10); 9888 canvas.attachPen(pen); 9889 let region = new drawing.Region(); 9890 region.setRect(200, 200, 400, 400); 9891 canvas.drawRegion(region); 9892 canvas.detachPen(); 9893 } 9894} 9895``` 9896 9897### constructor<sup>20+</sup> 9898 9899constructor(region: Region) 9900 9901拷贝一个区域对象。 9902 9903**系统能力:** SystemCapability.Graphics.Drawing 9904 9905**参数:** 9906 9907| 参数名 | 类型 | 必填 | 说明 | 9908| ------ | ------ | ---- | ----------------------- | 9909| region | [Region](#region12) | 是 | 用于拷贝的区域。 | 9910 9911**示例:** 9912 9913```ts 9914import { RenderNode } from '@kit.ArkUI'; 9915import { drawing } from '@kit.ArkGraphics2D'; 9916class DrawingRenderNode extends RenderNode { 9917 draw(context : DrawContext) { 9918 const canvas = context.canvas; 9919 const pen = new drawing.Pen(); 9920 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 9921 pen.setStrokeWidth(10); 9922 canvas.attachPen(pen); 9923 let region = new drawing.Region(); 9924 region.setRect(200, 200, 400, 400); 9925 let region2 = new drawing.Region(region); 9926 canvas.drawRegion(region2); 9927 canvas.detachPen(); 9928 } 9929} 9930``` 9931 9932### constructor<sup>20+</sup> 9933 9934constructor(left: number, top: number, right: number, bottom: number) 9935 9936构造矩形区域。 9937 9938**系统能力:** SystemCapability.Graphics.Drawing 9939 9940**参数:** 9941 9942| 参数名 | 类型 | 必填 | 说明 | 9943| ------ | ------ | ---- | ----------------------- | 9944| left | number | 是 | 矩形区域的左侧位置(矩形左上角横坐标)。该参数必须为整数。0表示坐标原点,负数表示位于坐标原点左侧,正数表示位于坐标原点右侧。| 9945| top | number | 是 | 矩形区域的顶部位置(矩形左上角纵坐标)。该参数必须为整数。0表示坐标原点,负数表示位于坐标原点上侧,正数表示位于坐标原点下侧。 | 9946| right | number | 是 | 矩形区域的右侧位置(矩形右下角横坐标)。该参数必须为整数。0表示坐标原点,负数表示位于坐标原点左侧,正数表示位于坐标原点右侧。 | 9947| bottom | number | 是 | 矩形区域的底部位置(矩形右下角纵坐标)。该参数必须为整数。0表示坐标原点,负数表示位于坐标原点上侧,正数表示位于坐标原点下侧。 | 9948 9949**示例:** 9950 9951```ts 9952import { RenderNode } from '@kit.ArkUI'; 9953import { drawing } from '@kit.ArkGraphics2D'; 9954class DrawingRenderNode extends RenderNode { 9955 draw(context : DrawContext) { 9956 const canvas = context.canvas; 9957 const pen = new drawing.Pen(); 9958 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 9959 pen.setStrokeWidth(10); 9960 canvas.attachPen(pen); 9961 let region = new drawing.Region(100, 100, 200, 200); 9962 canvas.drawRegion(region); 9963 canvas.detachPen(); 9964 } 9965} 9966``` 9967 9968### isEqual<sup>20+</sup> 9969 9970isEqual(other: Region): boolean 9971 9972用于判断其他区域是否与当前区域相等。 9973 9974**系统能力:** SystemCapability.Graphics.Drawing 9975 9976**参数:** 9977 9978| 参数名 | 类型 | 必填 | 说明 | 9979| ------ | ------ | ---- | ----------------------- | 9980| other | [Region](#region12) | 是 | 区域对象。 | 9981 9982**返回值:** 9983 9984| 类型 | 说明 | 9985| ------- | -------------- | 9986| boolean | 返回其他区域是否与当前区域相等的结果。true表示相等,false表示不相等。 | 9987 9988**示例:** 9989 9990```ts 9991import { RenderNode } from '@kit.ArkUI'; 9992import { drawing } from '@kit.ArkGraphics2D'; 9993class DrawingRenderNode extends RenderNode { 9994 draw(context : DrawContext) { 9995 const canvas = context.canvas; 9996 const pen = new drawing.Pen(); 9997 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 9998 pen.setStrokeWidth(10); 9999 canvas.attachPen(pen); 10000 let region = new drawing.Region(); 10001 let other = new drawing.Region(); 10002 region.setRect(100, 100, 400, 400); 10003 other.setRect(150, 150, 250 ,250); 10004 let flag: boolean = false; 10005 flag = region.isEqual(other); 10006 console.info('flag: ', flag); 10007 canvas.drawRegion(region); 10008 canvas.drawRegion(other); 10009 canvas.detachPen(); 10010 } 10011} 10012``` 10013 10014### isComplex<sup>20+</sup> 10015 10016isComplex(): boolean 10017 10018判断当前区域是否包含多个矩形。 10019 10020**系统能力:** SystemCapability.Graphics.Drawing 10021 10022**返回值:** 10023 10024| 类型 | 说明 | 10025| ------- | -------------- | 10026| boolean | 返回当前区域是否包含多个矩形的结果。true表示当前区域包含多个矩形,false表示当前区域不包含多个矩形。 | 10027 10028**示例:** 10029 10030```ts 10031import { common2D, drawing } from '@kit.ArkGraphics2D'; 10032import { RenderNode } from '@kit.ArkUI'; 10033 10034class DrawingRenderNode extends RenderNode { 10035 draw(context : DrawContext) { 10036 const canvas = context.canvas; 10037 const pen = new drawing.Pen(); 10038 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 10039 pen.setStrokeWidth(10); 10040 canvas.attachPen(pen); 10041 let region = new drawing.Region(); 10042 let other = new drawing.Region(); 10043 region.setRect(100, 100, 200, 200); 10044 region.op(new drawing.Region(220, 200, 280, 280), drawing.RegionOp.UNION); 10045 let flag: boolean = false; 10046 flag = region.isComplex(); 10047 console.info('flag :', flag); 10048 canvas.drawRegion(region); 10049 canvas.drawRegion(other); 10050 canvas.detachPen(); 10051 } 10052} 10053``` 10054 10055### isEmpty<sup>20+</sup> 10056 10057isEmpty(): boolean 10058 10059判断当前区域是否为空。 10060 10061**系统能力:** SystemCapability.Graphics.Drawing 10062 10063**返回值:** 10064 10065| 类型 | 说明 | 10066| ------- | -------------- | 10067| boolean | 返回当前区域是否为空。true表示当前区域为空,false表示当前区域不为空。 | 10068 10069**示例:** 10070 10071```ts 10072import { RenderNode } from '@kit.ArkUI'; 10073import { drawing } from '@kit.ArkGraphics2D'; 10074 10075class DrawingRenderNode extends RenderNode { 10076 draw(context : DrawContext) { 10077 const canvas = context.canvas; 10078 const pen = new drawing.Pen(); 10079 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 10080 pen.setStrokeWidth(10); 10081 canvas.attachPen(pen); 10082 let region = new drawing.Region(); 10083 let flag: boolean = region.isEmpty(); 10084 console.info('flag: ', flag); 10085 region.setRect(100, 100, 400, 400); 10086 flag = region.isEmpty(); 10087 console.info('flag: ', flag); 10088 canvas.drawRegion(region); 10089 canvas.detachPen(); 10090 } 10091} 10092``` 10093 10094### getBounds<sup>20+</sup> 10095 10096getBounds(): common2D.Rect 10097 10098获取区域的边界。 10099 10100**系统能力:** SystemCapability.Graphics.Drawing 10101 10102**返回值:** 10103 10104| 类型 | 说明 | 10105| ------- | -------------- | 10106| [common2D.Rect](js-apis-graphics-common2D.md#rect) | 返回当前区域的边界矩形。 | 10107 10108**示例:** 10109 10110```ts 10111import { drawing } from '@kit.ArkGraphics2D'; 10112 10113let region = new drawing.Region(); 10114let rect = region.getBounds(); 10115``` 10116 10117### getBoundaryPath<sup>20+</sup> 10118 10119getBoundaryPath(): Path 10120 10121返回一个新路径,该路径取自当前区域的边界。 10122 10123**系统能力:** SystemCapability.Graphics.Drawing 10124 10125**返回值:** 10126 10127| 类型 | 说明 | 10128| ------- | -------------- | 10129| [Path](#path) | 返回当前区域边界的路径。 | 10130 10131**示例:** 10132 10133```ts 10134import { drawing } from '@kit.ArkGraphics2D'; 10135let region = new drawing.Region(); 10136let path = region.getBoundaryPath(); 10137``` 10138 10139### isPointContained<sup>12+</sup> 10140 10141isPointContained(x: number, y: number) : boolean 10142 10143判断测试点是否在区域内。 10144 10145**系统能力:** SystemCapability.Graphics.Drawing 10146 10147**参数:** 10148 10149| 参数名 | 类型 | 必填 | 说明 | 10150| ------ | ------ | ---- | ----------------------- | 10151| x | number | 是 | 测试点的x轴坐标。该参数必须为整数。如果输入的数字包含小数部分,小数部分将被舍去。 | 10152| y | number | 是 | 测试点的y轴坐标。该参数必须为整数。如果输入的数字包含小数部分,小数部分将被舍去。 | 10153 10154**返回值:** 10155 10156| 类型 | 说明 | 10157| ------- | -------------- | 10158| boolean | 返回测试点是否在区域内的结果。true表示测试点在区域内,false表示测试点不在区域内。 | 10159 10160**错误码:** 10161 10162以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 10163 10164| 错误码ID | 错误信息 | 10165| ------- | --------------------------------------------| 10166| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 10167 10168**示例:** 10169 10170```ts 10171import { RenderNode } from '@kit.ArkUI'; 10172import { drawing } from '@kit.ArkGraphics2D'; 10173 10174class DrawingRenderNode extends RenderNode { 10175 draw(context : DrawContext) { 10176 const canvas = context.canvas; 10177 const pen = new drawing.Pen(); 10178 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 10179 pen.setStrokeWidth(10); 10180 canvas.attachPen(pen); 10181 let region = new drawing.Region(); 10182 region.setRect(100, 100, 400, 400); 10183 let flag: boolean = false; 10184 flag = region.isPointContained(200,200); 10185 console.info("region isPointContained : " + flag); 10186 canvas.drawPoint(200,200); 10187 canvas.drawRegion(region); 10188 canvas.detachPen(); 10189 } 10190} 10191``` 10192 10193### offset<sup>20+</sup> 10194 10195offset(dx: number, dy: number): void 10196 10197对区域进行平移。 10198 10199**系统能力:** SystemCapability.Graphics.Drawing 10200 10201**参数:** 10202 10203| 参数名 | 类型 | 必填 | 说明 | 10204| ------ | ------ | ---- | ----------------------- | 10205| dx | number | 是 | x轴方向平移量,正数往x轴正方向平移,负数往x轴负方向平移,该参数为整数。 | 10206| dy | number | 是 | y轴方向平移量,正数往y轴正方向平移,负数往y轴负方向平移,该参数为整数。| 10207 10208**示例:** 10209 10210```ts 10211import { RenderNode } from '@kit.ArkUI'; 10212import { drawing } from '@kit.ArkGraphics2D'; 10213class DrawingRenderNode extends RenderNode { 10214 draw(context : DrawContext) { 10215 const canvas = context.canvas; 10216 const pen = new drawing.Pen(); 10217 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 10218 pen.setStrokeWidth(10); 10219 canvas.attachPen(pen); 10220 let region = new drawing.Region(); 10221 region.setRect(100, 100, 400, 400); 10222 region.offset(10, 20); 10223 canvas.drawPoint(200,200); 10224 canvas.drawRegion(region); 10225 canvas.detachPen(); 10226 } 10227} 10228``` 10229 10230### isRegionContained<sup>12+</sup> 10231 10232isRegionContained(other: Region) : boolean 10233 10234判断其他区域是否在当前区域内。 10235 10236**系统能力:** SystemCapability.Graphics.Drawing 10237 10238**参数:** 10239 10240| 参数名 | 类型 | 必填 | 说明 | 10241| ------ | ------ | ---- | ----------------------- | 10242| other | [Region](#region12) | 是 | 区域对象。 | 10243 10244**返回值:** 10245 10246| 类型 | 说明 | 10247| ------- | -------------- | 10248| boolean | 返回其他区域是否在当前区域内的结果。true表示其他区域在当前区域内,false表示其他区域不在当前区域内。 | 10249 10250**错误码:** 10251 10252以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 10253 10254| 错误码ID | 错误信息 | 10255| ------- | --------------------------------------------| 10256| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 10257 10258**示例:** 10259 10260```ts 10261import { RenderNode } from '@kit.ArkUI'; 10262import { drawing } from '@kit.ArkGraphics2D'; 10263 10264class DrawingRenderNode extends RenderNode { 10265 draw(context : DrawContext) { 10266 const canvas = context.canvas; 10267 const pen = new drawing.Pen(); 10268 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 10269 pen.setStrokeWidth(10); 10270 canvas.attachPen(pen); 10271 let region = new drawing.Region(); 10272 let other = new drawing.Region(); 10273 region.setRect(100, 100, 400, 400); 10274 other.setRect(150, 150, 250 ,250); 10275 let flag: boolean = false; 10276 flag = region.isRegionContained(other); 10277 console.info("region isRegionContained : " + flag); 10278 canvas.drawRegion(region); 10279 canvas.drawRegion(other); 10280 canvas.detachPen(); 10281 } 10282} 10283``` 10284 10285### op<sup>12+</sup> 10286 10287op(region: Region, regionOp: RegionOp) : boolean 10288 10289将当前区域与指定区域进行运算,并替换为运算结果。 10290 10291**系统能力:** SystemCapability.Graphics.Drawing 10292 10293**参数:** 10294 10295| 参数名 | 类型 | 必填 | 说明 | 10296| ------ | ------ | ---- | ----------------------- | 10297| region | [Region](#region12) | 是 | 区域对象。 | 10298| regionOp | [RegionOp](#regionop12) | 是 | 区域合并操作类型。 | 10299 10300**返回值:** 10301 10302| 类型 | 说明 | 10303| ------- | -------------- | 10304| boolean | 返回区域运算结果是否成功替换当前区域。true表示区域运算结果替换当前区域成功,false表示区域运算结果替换当前区域失败。 | 10305 10306**错误码:** 10307 10308以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 10309 10310| 错误码ID | 错误信息 | 10311| ------- | --------------------------------------------| 10312| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 10313 10314**示例:** 10315 10316```ts 10317import { RenderNode } from '@kit.ArkUI'; 10318import { drawing } from '@kit.ArkGraphics2D'; 10319 10320class DrawingRenderNode extends RenderNode { 10321 draw(context : DrawContext) { 10322 const canvas = context.canvas; 10323 const pen = new drawing.Pen(); 10324 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 10325 pen.setStrokeWidth(10); 10326 canvas.attachPen(pen); 10327 let region = new drawing.Region(); 10328 region.setRect(200, 200, 400, 400); 10329 let othregion = new drawing.Region(); 10330 othregion.setRect(110, 110, 240, 240); 10331 let flag: boolean = false; 10332 flag = region.op(othregion,drawing.RegionOp.REPLACE); 10333 console.info("region op : " + flag); 10334 canvas.drawRegion(region); 10335 canvas.detachPen(); 10336 } 10337} 10338``` 10339 10340### quickReject<sup>12+</sup> 10341 10342quickReject(left: number, top: number, right: number, bottom: number) : boolean 10343 10344快速判断矩形和区域是否不相交,实际上比较的是矩形和区域的外接矩形是否不相交,因此会有误差。 10345 10346**系统能力:** SystemCapability.Graphics.Drawing 10347 10348**参数:** 10349 10350| 参数名 | 类型 | 必填 | 说明 | 10351| ------ | ------ | ---- | ----------------------- | 10352| left | number | 是 | 矩形区域的左侧位置。该参数必须为整数。当输入的数字带小数时,小数部分会被舍去。 | 10353| top | number | 是 | 矩形区域的顶部位置。该参数必须为整数。当输入的数字带小数时,小数部分会被舍去。 | 10354| right | number | 是 | 矩形区域的右侧位置。该参数必须为整数。当输入的数字带小数时,小数部分会被舍去。 | 10355| bottom | number | 是 | 矩形区域的底部位置。该参数必须为整数。当输入的数字带小数时,小数部分会被舍去。 | 10356 10357**返回值:** 10358 10359| 类型 | 说明 | 10360| ------- | -------------- | 10361| boolean | 返回矩形是否与区域不相交的结果。true表示矩形与区域不相交,false表示矩形与区域相交。 | 10362 10363**错误码:** 10364 10365以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 10366 10367| 错误码ID | 错误信息 | 10368| ------- | --------------------------------------------| 10369| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 10370 10371**示例:** 10372 10373```ts 10374import { RenderNode } from '@kit.ArkUI'; 10375import { drawing } from '@kit.ArkGraphics2D'; 10376 10377class DrawingRenderNode extends RenderNode { 10378 draw(context : DrawContext) { 10379 const canvas = context.canvas; 10380 const pen = new drawing.Pen(); 10381 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 10382 pen.setStrokeWidth(10); 10383 canvas.attachPen(pen); 10384 let region = new drawing.Region(); 10385 region.setRect(100, 100, 400, 400); 10386 let flag: boolean = false; 10387 flag = region.quickReject(50, 50, 70, 70); 10388 console.info("region quickReject : " + flag); 10389 canvas.drawRegion(region); 10390 canvas.detachPen(); 10391 } 10392} 10393``` 10394 10395### quickRejectRegion<sup>20+</sup> 10396 10397quickRejectRegion(region: Region): boolean 10398 10399判断当前区域是否与另一个区域不相交。实际上比较的是两个区域的外接矩形是否不相交,因此会有误差。 10400 10401**系统能力:** SystemCapability.Graphics.Drawing 10402 10403**参数:** 10404 10405| 参数名 | 类型 | 必填 | 说明 | 10406| ------ | ------ | ---- | ----------------------- | 10407| region | [Region](#region12) | 是 | 指定的区域对象。 | 10408 10409**返回值:** 10410 10411| 类型 | 说明 | 10412| ------- | -------------- | 10413| boolean | 返回是否当前区域与另外的区域不相交的结果。true表示不相交,false表示相交。仅点和边相交返回true。| 10414 10415**示例:** 10416 10417```ts 10418import { RenderNode } from '@kit.ArkUI'; 10419import { drawing } from '@kit.ArkGraphics2D'; 10420 10421class DrawingRenderNode extends RenderNode { 10422 draw(context : DrawContext) { 10423 const canvas = context.canvas; 10424 const pen = new drawing.Pen(); 10425 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 10426 pen.setStrokeWidth(10); 10427 canvas.attachPen(pen); 10428 let region = new drawing.Region(); 10429 let region2 = new drawing.Region(); 10430 region2.setRect(100, 100, 400, 400); 10431 let flag: boolean = false; 10432 flag = region.quickRejectRegion(region2); 10433 console.info("region quickRejectRegion: " + flag); 10434 canvas.drawRegion(region); 10435 canvas.detachPen(); 10436 } 10437} 10438``` 10439 10440### setPath<sup>12+</sup> 10441 10442setPath(path: Path, clip: Region) : boolean 10443 10444设置一个与裁剪区域内路径轮廓相匹配的区域。 10445 10446**系统能力:** SystemCapability.Graphics.Drawing 10447 10448**参数:** 10449 10450| 参数名 | 类型 | 必填 | 说明 | 10451| ------ | ------ | ---- | ----------------------- | 10452| path | [Path](#path) | 是 | 路径对象。 | 10453| clip | [Region](#region12) | 是 | 区域对象。 | 10454 10455**返回值:** 10456 10457| 类型 | 说明 | 10458| ------- | -------------- | 10459| boolean | 返回设置一个与裁剪区域内路径轮廓相匹配的区域是否成功。true表示设置成功,false表示设置失败。 | 10460 10461**错误码:** 10462 10463以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 10464 10465| 错误码ID | 错误信息 | 10466| ------- | --------------------------------------------| 10467| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 10468 10469**示例:** 10470 10471```ts 10472import { RenderNode } from '@kit.ArkUI'; 10473import { drawing } from '@kit.ArkGraphics2D'; 10474 10475class DrawingRenderNode extends RenderNode { 10476 draw(context : DrawContext) { 10477 const canvas = context.canvas; 10478 const pen = new drawing.Pen(); 10479 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 10480 pen.setStrokeWidth(10); 10481 canvas.attachPen(pen); 10482 let region = new drawing.Region(); 10483 let path = new drawing.Path(); 10484 region.setRect(100, 100, 400, 400); 10485 path.arcTo(50, 50, 300, 300, 0, 359); 10486 let flag: boolean = false; 10487 flag = region.setPath(path,region); 10488 console.info("region setPath : " + flag); 10489 canvas.drawRegion(region); 10490 canvas.detachPen(); 10491 } 10492} 10493``` 10494 10495### setRegion<sup>20+</sup> 10496 10497setRegion(region: Region): void 10498 10499设置当前区域为另一块区域。 10500 10501**系统能力:** SystemCapability.Graphics.Drawing 10502 10503**参数:** 10504 10505| 参数名 | 类型 | 必填 | 说明 | 10506| ------ | ------ | ---- | ----------------------- | 10507| region | [Region](#region12) | 是 | 用于赋值的区域。 | 10508 10509**示例:** 10510 10511```ts 10512import { RenderNode } from '@kit.ArkUI'; 10513import { drawing } from '@kit.ArkGraphics2D'; 10514 10515class DrawingRenderNode extends RenderNode { 10516 draw(context : DrawContext) { 10517 const canvas = context.canvas; 10518 const pen = new drawing.Pen(); 10519 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 10520 pen.setStrokeWidth(10); 10521 canvas.attachPen(pen); 10522 let region = new drawing.Region(); 10523 region.setRect(100, 100, 200, 200); 10524 let region2 = new drawing.Region(); 10525 region2.setRegion(region); 10526 canvas.drawRegion(region2); 10527 canvas.detachPen(); 10528 } 10529} 10530``` 10531 10532### setEmpty<sup>20+</sup> 10533 10534setEmpty(): void 10535 10536设置当前区域为空。 10537 10538**系统能力:** SystemCapability.Graphics.Drawing 10539 10540**示例:** 10541 10542```ts 10543import { RenderNode } from '@kit.ArkUI'; 10544import { drawing } from '@kit.ArkGraphics2D'; 10545 10546class DrawingRenderNode extends RenderNode { 10547 draw(context : DrawContext) { 10548 let region = new drawing.Region(); 10549 region.setRect(100, 100, 200, 200); 10550 let isEmpty = region.isEmpty(); 10551 console.info("isEmpty :" + isEmpty); 10552 region.setEmpty(); 10553 isEmpty = region.isEmpty(); 10554 console.info("isEmpty :" + isEmpty); 10555 } 10556} 10557``` 10558 10559### setRect<sup>12+</sup> 10560 10561setRect(left: number, top: number, right: number, bottom: number) : boolean 10562 10563设置一个矩形区域。 10564 10565**系统能力:** SystemCapability.Graphics.Drawing 10566 10567**参数:** 10568 10569| 参数名 | 类型 | 必填 | 说明 | 10570| ------ | ------ | ---- | ----------------------- | 10571| left | number | 是 | 矩形区域的左侧位置。该参数必须为整数。当输入的数字带小数时,小数部分会被舍去。 | 10572| top | number | 是 | 矩形区域的顶部位置。该参数必须为整数。当输入的数字带小数时,小数部分会被舍去。 | 10573| right | number | 是 | 矩形区域的右侧位置。该参数必须为整数。当输入的数字带小数时,小数部分会被舍去。 | 10574| bottom | number | 是 | 矩形区域的底部位置。该参数必须为整数。当输入的数字带小数时,小数部分会被舍去。 | 10575 10576**返回值:** 10577 10578| 类型 | 说明 | 10579| ------- | -------------- | 10580| boolean | 返回设置矩形区域是否成功的结果。true表示设置矩形区域成功,false表示设置矩形区域失败。 | 10581 10582**错误码:** 10583 10584以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 10585 10586| 错误码ID | 错误信息 | 10587| ------- | --------------------------------------------| 10588| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 10589 10590**示例:** 10591 10592```ts 10593import { RenderNode } from '@kit.ArkUI'; 10594import { drawing } from '@kit.ArkGraphics2D'; 10595 10596class DrawingRenderNode extends RenderNode { 10597 draw(context : DrawContext) { 10598 const canvas = context.canvas; 10599 const pen = new drawing.Pen(); 10600 pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 10601 pen.setStrokeWidth(10); 10602 canvas.attachPen(pen); 10603 let region = new drawing.Region(); 10604 let flag: boolean = false; 10605 flag = region.setRect(50, 50, 300, 300); 10606 console.info("region setRect : " + flag); 10607 canvas.drawRegion(region); 10608 canvas.detachPen(); 10609 } 10610} 10611``` 10612 10613## TileMode<sup>12+</sup> 10614 10615着色器效果平铺模式的枚举。 10616 10617**系统能力:** SystemCapability.Graphics.Drawing 10618 10619| 名称 | 值 | 说明 | 10620| ---------------------- | ---- | ------------------------------ | 10621| CLAMP | 0 | 如果着色器效果超出其原始边界,剩余区域使用着色器的边缘颜色填充。 | 10622| REPEAT | 1 | 在水平和垂直方向上重复着色器效果。 | 10623| MIRROR | 2 | 在水平和垂直方向上重复着色器效果,交替镜像图像,以便相邻图像始终接合。 | 10624| DECAL | 3 | 仅在其原始边界内渲染着色器效果。| 10625 10626## ShaderEffect<sup>12+</sup> 10627 10628着色器。画刷和画笔设置着色器后,会使用着色器效果而不是颜色属性去绘制,但此时画笔和画刷的透明度属性仍然生效。 10629 10630### createComposeShader<sup>20+</sup> 10631 10632static createComposeShader(dstShaderEffect: ShaderEffect, srcShaderEffect: ShaderEffect, blendMode: BlendMode): ShaderEffect 10633 10634按照指定的混合模式对两个着色器进行叠加,生成一个新的着色器。 10635 10636**系统能力:** SystemCapability.Graphics.Drawing 10637 10638**参数:** 10639 10640| 参数名 | 类型 | 必填 | 说明 | 10641| ------ | -------------------------------------------------- | ---- | -------------- | 10642| dstShaderEffect | [ShaderEffect](#shadereffect12) | 是 | 在混合模式中作为目标色的着色器。 | 10643| srcShaderEffect | [ShaderEffect](#shadereffect12) | 是 | 在混合模式中作为源色的着色器。 | 10644| blendMode | [BlendMode](#blendmode) | 是 | 混合模式。 | 10645 10646**返回值:** 10647 10648| 类型 | 说明 | 10649| ------- | ------------------------- | 10650| [ShaderEffect](#shadereffect12) | 返回创建的着色器对象。 | 10651 10652**错误码:** 10653 10654以下错误码的详细介绍请参见[图形绘制与显示错误码](../apis-arkgraphics2d/errorcode-drawing.md)。 10655 10656| 错误码ID | 错误信息 | 10657| ------- | --------------------------------------------| 10658| 25900001 | Parameter error.Possible causes: Incorrect parameter range. | 10659 10660**示例:** 10661 10662```ts 10663import { drawing } from '@kit.ArkGraphics2D'; 10664 10665let dstShader = drawing.ShaderEffect.createColorShader(0xFF0000FF); 10666let srcShader = drawing.ShaderEffect.createColorShader(0xFFFF0000); 10667let shader = drawing.ShaderEffect.createComposeShader(dstShader, srcShader, drawing.BlendMode.SRC); 10668``` 10669 10670### createImageShader<sup>20+</sup> 10671 10672static createImageShader(pixelmap: image.PixelMap, tileX: TileMode, tileY: TileMode, samplingOptions: SamplingOptions, matrix?: Matrix | null): ShaderEffect 10673 10674基于图片创建一个着色器。此接口不建议用于录制类型的画布,会影响性能。 10675 10676**系统能力:** SystemCapability.Graphics.Drawing 10677 10678**参数:** 10679 10680| 参数名 | 类型 | 必填 | 说明 | 10681| ------ | -------------------------------------------------- | ---- | -------------- | 10682| pixelmap | [image.PixelMap](../apis-image-kit/arkts-apis-image-PixelMap.md) | 是 | 进行采样的图片对象。 | 10683| tileX | [TileMode](#tilemode12) | 是 | 水平方向的平铺模式。 | 10684| tileY | [TileMode](#tilemode12) | 是 | 竖直方向的平铺模式。 | 10685| samplingOptions | [SamplingOptions](#samplingoptions12) | 是 | 图片采样参数。 | 10686| matrix | [Matrix](#matrix12) \| null | 否 | 可选参数,对图片施加的矩阵变换,如果为空,则不施加任何变换。 | 10687 10688**返回值:** 10689 10690| 类型 | 说明 | 10691| ------- | ------------------------- | 10692| [ShaderEffect](#shadereffect12) | 返回创建的着色器对象。 | 10693 10694**错误码:** 10695 10696以下错误码的详细介绍请参见[图形绘制与显示错误码](../apis-arkgraphics2d/errorcode-drawing.md)。 10697 10698| 错误码ID | 错误信息 | 10699| ------- | --------------------------------------------| 10700| 25900001 | Parameter error.Possible causes: Incorrect parameter range. | 10701 10702**示例:** 10703 10704```ts 10705import { RenderNode } from '@kit.ArkUI'; 10706import { image } from '@kit.ImageKit'; 10707import { drawing } from '@kit.ArkGraphics2D'; 10708class DrawingRenderNode extends RenderNode { 10709 pixelMap: image.PixelMap | null = null; 10710 10711 async draw(context : DrawContext) { 10712 let matrix = new drawing.Matrix(); 10713 let options = new drawing.SamplingOptions(drawing.FilterMode.FILTER_MODE_NEAREST); 10714 if (this.pixelMap != null) { 10715 let imageShader = drawing.ShaderEffect.createImageShader(this.pixelMap, drawing.TileMode.REPEAT, drawing.TileMode.MIRROR, options, matrix); 10716 } 10717 } 10718} 10719``` 10720 10721### createColorShader<sup>12+</sup> 10722 10723static createColorShader(color: number): ShaderEffect 10724 10725创建具有单一颜色的着色器。 10726 10727**系统能力:** SystemCapability.Graphics.Drawing 10728 10729**参数:** 10730 10731| 参数名 | 类型 | 必填 | 说明 | 10732| ------ | -------------------------------------------------- | ---- | -------------- | 10733| color | number | 是 | 表示着色器的ARGB格式颜色,该参数为32位无符号整数。 | 10734 10735**返回值:** 10736 10737| 类型 | 说明 | 10738| ------- | ------------------------- | 10739| [ShaderEffect](#shadereffect12) | 返回具有单一颜色的着色器对象。 | 10740 10741**错误码:** 10742 10743以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 10744 10745| 错误码ID | 错误信息 | 10746| ------- | --------------------------------------------| 10747| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 10748 10749**示例:** 10750 10751```ts 10752import { drawing } from '@kit.ArkGraphics2D'; 10753 10754let shaderEffect = drawing.ShaderEffect.createColorShader(0xFFFF0000); 10755``` 10756 10757### createLinearGradient<sup>12+</sup> 10758 10759static createLinearGradient(startPt: common2D.Point, endPt: common2D.Point, colors: Array 10760\<number>, mode: TileMode, pos?: Array\<number> | null, matrix?: Matrix | null): ShaderEffect 10761 10762创建着色器,在两个指定点之间生成线性渐变。 10763 10764**系统能力:** SystemCapability.Graphics.Drawing 10765 10766**参数:** 10767 10768| 参数名 | 类型 | 必填 | 说明 | 10769| ------ | -------------------------------------------------- | ---- | -------------- | 10770| startPt | [common2D.Point](js-apis-graphics-common2D.md#point12) | 是 | 表示渐变的起点。 | 10771| endPt | [common2D.Point](js-apis-graphics-common2D.md#point12) | 是 | 表示渐变的终点。 | 10772| colors | Array\<number> | 是 | 表示在两个点之间分布的颜色数组,数组中的值为32位(ARGB)无符号整数。 | 10773| mode | [TileMode](#tilemode12) | 是 | 着色器效果平铺模式。 | 10774| pos | Array\<number> \|null| 否 | 表示每种对应颜色在颜色数组中的相对位置。数组长度需和colors保持一致,数组的首个元素应当是0.0,末尾元素应当是1.0,中间的元素应当在0与1之间并且逐下标递增,表示colors中每个对应颜色的相对位置。默认为null,表示颜色均匀分布在起点和终点之间。 | 10775| matrix | [Matrix](#matrix12) \| null | 否 | 矩阵对象,用于对着色器做矩阵变换。默认为null,表示单位矩阵。 | 10776 10777 10778 10779如上图所示,设置颜色数组为红绿蓝,位置数组为0.0、0.75和1.0后的显示效果。三角下标表示对应颜色的起始点和终点之间的相对位置,颜色之间使用渐变填充。 10780 10781**返回值:** 10782 10783| 类型 | 说明 | 10784| ------- | ------------------------- | 10785| [ShaderEffect](#shadereffect12) | 返回创建的着色器对象。 | 10786 10787**错误码:** 10788 10789以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 10790 10791| 错误码ID | 错误信息 | 10792| ------- | --------------------------------------------| 10793| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types; 3. Parameter verification failed. | 10794 10795**示例:** 10796 10797```ts 10798import { common2D,drawing } from '@kit.ArkGraphics2D'; 10799 10800let startPt: common2D.Point = { x: 100, y: 100 }; 10801let endPt: common2D.Point = { x: 300, y: 300 }; 10802let shaderEffect = drawing.ShaderEffect.createLinearGradient(startPt, endPt, [0xFF00FF00, 0xFFFF0000], drawing.TileMode.REPEAT); 10803``` 10804 10805### createRadialGradient<sup>12+</sup> 10806 10807static createRadialGradient(centerPt: common2D.Point, radius: number, colors: Array\<number>, mode: TileMode, pos?: Array\<number> | null, matrix?: Matrix | null): ShaderEffect; 10808 10809创建着色器,使用给定的圆心和半径生成径向渐变。径向渐变是指颜色从圆心逐渐向外扩散形成的渐变。 10810 10811**系统能力:** SystemCapability.Graphics.Drawing 10812 10813**参数:** 10814 10815| 参数名 | 类型 | 必填 | 说明 | 10816| ------ | -------------------------------------------------- | ---- | -------------- | 10817| centerPt | [common2D.Point](js-apis-graphics-common2D.md#point12) | 是 | 表示渐变的圆心。 | 10818| radius | number | 是 | 表示渐变的半径,小于等于0时无效,该参数为浮点数。 | 10819| colors | Array\<number> | 是 | 表示在圆心和圆边界之间分布的颜色数组,数组中的值为32位(ARGB)无符号整数。 | 10820| mode | [TileMode](#tilemode12) | 是 | 着色器效果平铺模式。 | 10821| pos | Array\<number> \| null | 否 | 表示每种对应颜色在颜色数组中的相对位置。数组长度需和colors保持一致,数组的首个元素应当是0.0,末尾元素应当是1.0,中间的元素应当在0与1之间并且逐下标递增,表示colors中每个对应颜色的相对位置。默认为null,表示颜色均匀分布在圆心和圆边界之间。 | 10822| matrix | [Matrix](#matrix12) \| null | 否 | 矩阵对象,用于对着色器做矩阵变换。默认为null,表示单位矩阵。 | 10823 10824 10825 10826如上图所示,设置颜色数组为红绿蓝,位置数组为0.0、0.75和1.0后的显示效果。三角下标表示对应颜色所在圆心和圆边界之间的相对位置,颜色之间使用渐变填充。 10827 10828**返回值:** 10829 10830| 类型 | 说明 | 10831| ------- | ------------------------- | 10832| [ShaderEffect](#shadereffect12) | 返回创建的着色器对象。 | 10833 10834**错误码:** 10835 10836以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 10837 10838| 错误码ID | 错误信息 | 10839| ------- | --------------------------------------------| 10840| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types; 3. Parameter verification failed. | 10841 10842**示例:** 10843 10844```ts 10845import { common2D,drawing } from '@kit.ArkGraphics2D'; 10846 10847let centerPt: common2D.Point = { x: 100, y: 100 }; 10848let shaderEffect = drawing.ShaderEffect.createRadialGradient(centerPt, 100, [0xFF00FF00, 0xFFFF0000], drawing.TileMode.REPEAT); 10849``` 10850 10851### createSweepGradient<sup>12+</sup> 10852 10853static createSweepGradient(centerPt: common2D.Point, colors: Array\<number>, 10854 mode: TileMode, startAngle: number, endAngle: number, pos?: Array\<number> | null, 10855 matrix?: Matrix | null): ShaderEffect; 10856 10857创建着色器。该着色器以给定中心点为圆心,在顺时针或逆时针方向上生成颜色扫描渐变。 10858 10859**系统能力:** SystemCapability.Graphics.Drawing 10860 10861**参数:** 10862 10863| 参数名 | 类型 | 必填 | 说明 | 10864| ------ | -------------------------------------------------- | ---- | -------------- | 10865| centerPt | [common2D.Point](js-apis-graphics-common2D.md#point12) | 是 | 表示渐变的圆心。 | 10866| colors | Array\<number> | 是 | 表示在起始角度和结束角度之间分布的颜色数组,数组中的值为32位(ARGB)无符号整数。 | 10867| mode | [TileMode](#tilemode12) | 是 | 着色器效果平铺模式。 | 10868| startAngle | number | 是 | 表示扇形渐变的起始角度,单位为度。0度时为x轴正方向,正数往顺时针方向偏移,负数往逆时针方向偏移。该参数为浮点数。 | 10869| endAngle | number | 是 | 表示扇形渐变的结束角度,单位为度。0度时为x轴正方向,正数往顺时针方向偏移,负数往逆时针方向偏移。小于起始角度时无效。该参数为浮点数。 | 10870| pos | Array\<number> \| null | 否 | 表示每种对应颜色在颜色数组中的相对位置。数组长度需和colors保持一致,数组的首个元素应当是0.0,末尾元素应当是1.0,中间的元素应当在0与1之间并且逐下标递增,表示colors中每个对应颜色的相对位置。默认为null,表示颜色均匀分布在起始角度和结束角度之间。 | 10871| matrix | [Matrix](#matrix12) \| null | 否 |矩阵对象,用于对着色器做矩阵变换。默认为null,表示单位矩阵。 | 10872 10873 10874 10875如上图所示,设置颜色数组为红绿蓝,位置数组为0.0、0.75和1.0,起始角度设置为0度,结束角度设置为180度后的显示效果。0.0对应0度的位置,0.75对应135度的位置,1.0对应180度的位置,颜色之间使用渐变填充。 10876 10877**返回值:** 10878 10879| 类型 | 说明 | 10880| ------- | ------------------------- | 10881| [ShaderEffect](#shadereffect12) | 返回创建的着色器对象。 | 10882 10883**错误码:** 10884 10885以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 10886 10887| 错误码ID | 错误信息 | 10888| ------- | --------------------------------------------| 10889| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types; 3. Parameter verification failed. | 10890 10891**示例:** 10892 10893```ts 10894import { common2D,drawing } from '@kit.ArkGraphics2D'; 10895 10896let centerPt: common2D.Point = { x: 100, y: 100 }; 10897let shaderEffect = drawing.ShaderEffect.createSweepGradient(centerPt, [0xFF00FF00, 0xFFFF0000], drawing.TileMode.REPEAT, 100, 200); 10898``` 10899 10900### createConicalGradient<sup>12+</sup> 10901 10902static createConicalGradient(startPt: common2D.Point, startRadius: number, endPt: common2D.Point, endRadius: number, colors: Array\<number>, mode: TileMode, 10903pos?: Array\<number> | null, matrix?: Matrix | null): ShaderEffect; 10904 10905创建着色器,在给定两个圆之间生成径向渐变。 10906 10907**系统能力:** SystemCapability.Graphics.Drawing 10908 10909**参数:** 10910 10911| 参数名 | 类型 | 必填 | 说明 | 10912| ------ | -------------------------------------------------- | ---- | -------------- | 10913| startPt | [common2D.Point](js-apis-graphics-common2D.md#point12) | 是 |表示渐变的起始圆的圆心。 | 10914| startRadius | number | 是 | 表示渐变的起始圆的半径,小于0时无效。该参数为浮点数。 | 10915| endPt | [common2D.Point](js-apis-graphics-common2D.md#point12) | 是 | 表示渐变的结束圆的圆心。 | 10916| endRadius | number | 是 | 表示渐变的结束圆的半径,小于0时无效。该参数为浮点数。 | 10917| colors | Array\<number> | 是 | 表示在起始圆和结束圆之间分布的颜色数组,数组中的值为32位(ARGB)无符号整数。 | 10918| mode | [TileMode](#tilemode12) | 是 | 着色器效果平铺模式。 | 10919| pos | Array\<number> \| null | 否 | 表示每种对应颜色在颜色数组中的相对位置。数组长度需和colors保持一致,数组的首个元素应当是0.0,末尾元素应当是1.0,中间的元素应当在0与1之间并且逐下标递增,表示colors中每个对应颜色的相对位置。默认为null,表示颜色均匀分布在起始圆和结束圆之间。| 10920| matrix | [Matrix](#matrix12) \| null | 否 | 矩阵对象,用于对着色器做矩阵变换。默认为null,表示单位矩阵。 | 10921 10922 10923 10924如上图所示,设置颜色数组为红绿蓝,位置数组为0.0、0.5和1.0的绘制结果。左侧为起始圆不在结束圆内的绘制结果,右侧为起始圆在结束圆内的绘制结果。 10925 10926**返回值:** 10927 10928| 类型 | 说明 | 10929| ------- | ------------------------- | 10930| [ShaderEffect](#shadereffect12) | 返回创建的着色器对象。 | 10931 10932**错误码:** 10933 10934以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 10935 10936| 错误码ID | 错误信息 | 10937| ------- | --------------------------------------------| 10938| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types; 3. Parameter verification failed. | 10939 10940**示例:** 10941 10942```ts 10943import { common2D,drawing } from '@kit.ArkGraphics2D'; 10944 10945let startPt: common2D.Point = { x: 100, y: 100 }; 10946let endPt: common2D.Point = {x: 200, y: 200}; 10947let shaderEffect = drawing.ShaderEffect.createConicalGradient(startPt, 100, endPt, 50, [0xFF00FF00, 0xFFFF0000], drawing.TileMode.REPEAT); 10948``` 10949 10950## Tool<sup>15+</sup> 10951 10952本模块定义的工具类,仅提供静态的方法,主要完成其他模块和[common2D](js-apis-graphics-common2D.md)中定义的数据结构的转换功能等操作。 10953 10954### makeColorFromResourceColor<sup>15+</sup> 10955 10956static makeColorFromResourceColor(resourceColor: ResourceColor): common2D.Color 10957 10958将ResourceColor类型的值转换为common2D.Color对象。 10959 10960**系统能力:** SystemCapability.Graphics.Drawing 10961 10962**参数:** 10963 10964| 参数名 | 类型 | 必填 | 说明 | 10965| ------ | -------------------------------------------------- | ---- | -------------- | 10966| resourceColor | [ResourceColor](../apis-arkui/arkui-ts/ts-types.md#resourcecolor) | 是 | ResourceColor格式的颜色值(支持所有的4种输入,示例中提供13个示例输入)。其中第4种类型[Resource](../apis-arkui/arkui-ts/ts-types.md#resource)只接受``$r('belonging.type.name')``构造方法,需要确保该资源在main/resources/base/element目录下已定义(app支持color、string和integer,sys只支持color)。 | 10967 10968**返回值:** 10969 10970| 类型 | 说明 | 10971| ------- | ------------------------- | 10972| [common2D.Color](js-apis-graphics-common2D.md#color) | 转换后的common2D.Color颜色对象,若转换失败则返回空指针。 | 10973 10974**错误码:** 10975 10976以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 10977 10978| 错误码ID | 错误信息 | 10979| ------- | --------------------------------------------| 10980| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types. | 10981 10982**示例:** 10983 10984```ts 10985import { drawing, common2D } from '@kit.ArkGraphics2D'; 10986 10987// Color 10988let color1: common2D.Color = drawing.Tool.makeColorFromResourceColor(Color.Blue); 10989 10990// Number 10991let color2: common2D.Color = drawing.Tool.makeColorFromResourceColor(0xffc0cb); 10992let color3: common2D.Color = drawing.Tool.makeColorFromResourceColor(0x11ffa500); 10993 10994// String 10995let color4: common2D.Color = drawing.Tool.makeColorFromResourceColor('#ff0000'); 10996let color5: common2D.Color = drawing.Tool.makeColorFromResourceColor('#110000ff'); 10997let color6: common2D.Color = drawing.Tool.makeColorFromResourceColor('#00f'); 10998let color7: common2D.Color = drawing.Tool.makeColorFromResourceColor('#100f'); 10999let color8: common2D.Color = drawing.Tool.makeColorFromResourceColor('rgb(255, 100, 255)'); 11000let color9: common2D.Color = drawing.Tool.makeColorFromResourceColor('rgba(255, 100, 255, 0.5)'); 11001 11002// Resource 11003let color10: common2D.Color = drawing.Tool.makeColorFromResourceColor($r('sys.color.ohos_id_color_secondary')); 11004let color11: common2D.Color = drawing.Tool.makeColorFromResourceColor($r('app.color.appColorTest')); 11005let color12: common2D.Color = drawing.Tool.makeColorFromResourceColor($r('app.string.appColorTest')); 11006let color13: common2D.Color = drawing.Tool.makeColorFromResourceColor($r('app.integer.appColorTest')); 11007 11008// Use color 11009let brush = new drawing.Brush(); 11010brush.setColor(color1); 11011``` 11012 11013## RegionOp<sup>12+</sup> 11014 11015两个区域合并时的操作的枚举。 11016 11017**系统能力:** SystemCapability.Graphics.Drawing 11018 11019| 名称 | 值 | 说明 | 示意图 | 11020| --------------------- | ---- | ------------------------------ | -------- | 11021| DIFFERENCE | 0 | 两个区域的相减操作。 |  | 11022| INTERSECT | 1 | 两个区域的相交操作。 |  | 11023| UNION | 2 | 两个区域的联合操作。 |  | 11024| XOR | 3 | 两个区域的异或操作。 |  | 11025| REVERSE_DIFFERENCE | 4 | 两个区域的反向相减操作。 |  | 11026| REPLACE | 5 | 两个区域替换操作。 |  | 11027 11028> **说明:** 11029> 11030> 示意图展示了一个以红色区域为基础,使用不同枚举值与另一个蓝色区域合并后获得的结果,其中绿色区域为最终得到的区域。 11031 11032## CornerPos<sup>12+</sup> 11033 11034圆角位置枚举。 11035 11036**系统能力:** SystemCapability.Graphics.Drawing 11037 11038| 名称 | 值 | 说明 | 11039| --------------------- | ---- | ------------------------------ | 11040| TOP_LEFT_POS | 0 | 左上角圆角位置。 | 11041| TOP_RIGHT_POS | 1 | 右上角圆角位置。 | 11042| BOTTOM_RIGHT_POS | 2 | 右下角圆角位置。 | 11043| BOTTOM_LEFT_POS | 3 | 左下角圆角位置。 | 11044 11045## RectUtils<sup>20+</sup> 11046 11047提供了处理矩形的工具。 11048 11049主要的使用场景: 11050 110511. 矩形快速构建与获取基本属性,如构造新矩形、拷贝矩形、获取矩形的宽高以及中心点等。 11052 110532. 边界计算与调整,如获取包含关系、计算与更新矩形之间交集和并集,更新边界值等。 11054 11055### makeEmpty<sup>20+</sup> 11056 11057static makeEmpty(): common2D.Rect 11058 11059创建一个上下左右边界坐标都是0的矩形。 11060 11061**系统能力:** SystemCapability.Graphics.Drawing 11062 11063**返回值:** 11064 11065| 类型 | 说明 | 11066| ------- | ------------------------- | 11067| [common2D.Rect](js-apis-graphics-common2D.md#rect) | 创建的矩形对象。 | 11068 11069**示例:** 11070 11071```ts 11072import { drawing, common2D } from '@kit.ArkGraphics2D'; 11073 11074let rect = drawing.RectUtils.makeEmpty(); 11075``` 11076 11077### makeLtrb<sup>20+</sup> 11078 11079static makeLtrb(left: number, top: number, right: number, bottom: number): common2D.Rect 11080 11081创建指定上下左右边界的矩形。 11082 11083**系统能力:** SystemCapability.Graphics.Drawing 11084 11085**参数:** 11086 11087| 参数名 | 类型 | 必填 | 说明 | 11088| ------ | ------ | ---- | -------------- | 11089| left | number | 是 | 矩形的左上角x轴坐标,该参数为浮点数。0表示坐标原点,负数表示位于坐标原点左侧,正数表示位于坐标原点右侧。 | 11090| top | number | 是 | 矩形的左上角y轴坐标,该参数为浮点数。0表示坐标原点,负数表示位于坐标原点上侧,正数表示位于坐标原点下侧。 | 11091| right | number | 是 | 矩形的右下角x轴坐标,该参数为浮点数。0表示坐标原点,负数表示位于坐标原点左侧,正数表示位于坐标原点右侧。 | 11092| bottom | number | 是 | 矩形的右下角y轴坐标,该参数为浮点数。0表示坐标原点,负数表示位于坐标原点上侧,正数表示位于坐标原点下侧。 | 11093 11094**返回值:** 11095 11096| 类型 | 说明 | 11097| ------- | ------------------------- | 11098| [common2D.Rect](js-apis-graphics-common2D.md#rect) | 创建的矩形。 | 11099 11100**示例:** 11101 11102```ts 11103import { drawing, common2D } from '@kit.ArkGraphics2D'; 11104 11105let rect = drawing.RectUtils.makeLtrb(10, 10, 20, 20); 11106``` 11107 11108### makeCopy<sup>20+</sup> 11109 11110static makeCopy(src: common2D.Rect): common2D.Rect; 11111 11112拷贝一个矩形。 11113 11114**系统能力**:SystemCapability.Graphics.Drawing 11115 11116**参数:** 11117 11118| 参数名 | 类型 | 必填 | 说明 | 11119| ------ | ------ | ---- | -------------- | 11120| src | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 用于拷贝的矩形。 | 11121 11122 11123**返回值:** 11124 11125| 类型 | 说明 | 11126| ------- | ------------------------- | 11127| [common2D.Rect](js-apis-graphics-common2D.md#rect) | 创建的新矩形。 | 11128 11129**示例:** 11130 11131```ts 11132import { drawing, common2D } from '@kit.ArkGraphics2D'; 11133let rect = drawing.RectUtils.makeLtrb(10, 10, 20, 20); 11134let rect2 = drawing.RectUtils.makeCopy(rect); 11135console.info('rect2.left:', rect2.left); 11136console.info('rect2.top: ', rect2.top); 11137console.info('rect2.right: ', rect2.right); 11138console.info('rect2.bottom: ', rect2.bottom); 11139``` 11140 11141### getWidth<sup>20+</sup> 11142 11143static getWidth(rect: common2D.Rect): number 11144 11145获取矩形的宽度。 11146 11147**系统能力:** SystemCapability.Graphics.Drawing 11148 11149**参数:** 11150 11151| 参数名 | 类型 | 必填 | 说明 | 11152| ------ | ------ | ---- | -------------- | 11153| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 矩形对象。 | 11154 11155 11156**返回值:** 11157 11158| 类型 | 说明 | 11159| ------- | ------------------------- | 11160| number | 返回矩形的宽。如果矩形的左边界大于右边界,获取的宽度为负值,左边界小于右边界则为正值。 | 11161 11162**示例:** 11163 11164```ts 11165import { drawing, common2D } from '@kit.ArkGraphics2D'; 11166let rect = drawing.RectUtils.makeLtrb(10, 10, 20, 20); 11167let width = drawing.RectUtils.getWidth(rect); 11168console.info('width :', width); 11169``` 11170 11171### getHeight<sup>20+</sup> 11172 11173static getHeight(rect: common2D.Rect): number 11174 11175获取矩形的高度。 11176 11177**系统能力:** SystemCapability.Graphics.Drawing 11178 11179**参数:** 11180 11181| 参数名 | 类型 | 必填 | 说明 | 11182| ------ | ------ | ---- | -------------- | 11183| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 矩形对象。 | 11184 11185**返回值:** 11186 11187| 类型 | 说明 | 11188| ------- | ------------------------- | 11189| number | 返回矩形的高。如果矩形的上边界大于下边界,获取的高度为负值,上边界小于下边界则为正值。| 11190 11191**示例:** 11192 11193```ts 11194import { drawing, common2D } from '@kit.ArkGraphics2D'; 11195let rect = drawing.RectUtils.makeLtrb(10, 10, 20, 20); 11196let height = drawing.RectUtils.getHeight(rect); 11197``` 11198 11199### centerX<sup>20+</sup> 11200 11201static centerX(rect: common2D.Rect): number 11202 11203获取矩形中心的横坐标。 11204 11205**系统能力:** SystemCapability.Graphics.Drawing 11206 11207**参数:** 11208 11209| 参数名 | 类型 | 必填 | 说明 | 11210| ------ | ------ | ---- | -------------- | 11211| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 矩形对象。 | 11212 11213**返回值:** 11214 11215| 类型 | 说明 | 11216| ------- | ------------------------- | 11217| number | 返回矩形中心的横坐标。 | 11218 11219**示例:** 11220 11221```ts 11222import { drawing, common2D } from '@kit.ArkGraphics2D'; 11223let rect = drawing.RectUtils.makeLtrb(20, 30, 30, 40); 11224let x = drawing.RectUtils.centerX(rect); 11225``` 11226 11227### centerY<sup>20+</sup> 11228 11229static centerY(rect: common2D.Rect): number 11230 11231获取矩形中心的纵坐标。 11232 11233**系统能力:** SystemCapability.Graphics.Drawing 11234 11235**参数:** 11236 11237| 参数名 | 类型 | 必填 | 说明 | 11238| ------ | ------ | ---- | -------------- | 11239| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 矩形对象。 | 11240 11241**返回值:** 11242 11243| 类型 | 说明 | 11244| ------- | ------------------------- | 11245| number | 返回矩形中心的纵坐标。 | 11246 11247**示例:** 11248 11249```ts 11250import { drawing, common2D } from '@kit.ArkGraphics2D'; 11251let rect = drawing.RectUtils.makeLtrb(20, 30, 30, 40); 11252let x = drawing.RectUtils.centerY(rect); 11253``` 11254 11255### contains<sup>20+</sup> 11256 11257static contains(rect: common2D.Rect, other: common2D.Rect): boolean 11258 11259判断一个矩形是否完全包含另外一个矩形。 11260 11261**系统能力:** SystemCapability.Graphics.Drawing 11262 11263**参数:** 11264 11265| 参数名 | 类型 | 必填 | 说明 | 11266| ------ | ------ | ---- | -------------- | 11267| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 矩形对象。 | 11268| other | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 判断是否被包含的矩形对象。 | 11269 11270**返回值:** 11271 11272| 类型 | 说明 | 11273| ------- | ------------------------- | 11274| boolean | 返回矩形是否完全包含另一个矩形的结果。true表示指定矩形在另一个矩形内部或者相等,false表示指定矩形在另一个矩形外部。空的矩形不包含任何矩形。| 11275 11276**示例:** 11277 11278```ts 11279import { drawing, common2D } from '@kit.ArkGraphics2D'; 11280let rect = drawing.RectUtils.makeLtrb(10, 10, 20, 20); 11281let rect2 = drawing.RectUtils.makeLtrb(0, 0, 40, 40); 11282let isContains = drawing.RectUtils.contains(rect2, rect); 11283console.info('isContains: ', isContains); 11284``` 11285 11286### contains<sup>20+</sup> 11287 11288static contains(rect: common2D.Rect, left: number, top: number, right: number, bottom: number): boolean 11289 11290判断一个矩形是否完全包含另外一个矩形(另一个矩形分别用左上右下坐标表示)。 11291 11292**系统能力:** SystemCapability.Graphics.Drawing 11293 11294**参数:** 11295 11296| 参数名 | 类型 | 必填 | 说明 | 11297| ------ | ------ | ---- | -------------- | 11298| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 矩形对象。 | 11299| left | number | 是 | 矩形的左上角x轴坐标,该参数为浮点数。0表示坐标原点,负数表示位于坐标原点左侧,正数表示位于坐标原点右侧。 | 11300| top | number | 是 | 矩形的左上角y轴坐标,该参数为浮点数。0表示坐标原点,负数表示位于坐标原点上侧,正数表示位于坐标原点下侧。 | 11301| right | number | 是 | 矩形的右下角x轴坐标,该参数为浮点数。0表示坐标原点,负数表示位于坐标原点左侧,正数表示位于坐标原点右侧。 | 11302| bottom | number | 是 | 矩形的右下角y轴坐标,该参数为浮点数。0表示坐标原点,负数表示位于坐标原点上侧,正数表示位于坐标原点下侧。 | 11303 11304**返回值:** 11305 11306| 类型 | 说明 | 11307| ------- | ------------------------- | 11308| boolean | 返回矩形是否完全包含由左上右下坐标组成的矩形的结果。true表示指定左上右下坐标组成的矩形在矩形的内部或者相等,false表示指定左上右下坐标组成的矩形在矩形的外部。空的矩形不包含任何矩形。| 11309 11310**示例:** 11311 11312```ts 11313import { drawing, common2D } from '@kit.ArkGraphics2D'; 11314let rect = drawing.RectUtils.makeLtrb(0, 0, 100, 100); 11315let isContains = drawing.RectUtils.contains(rect, 10, 20, 30, 40); 11316console.info('isContains :', isContains); 11317``` 11318 11319### contains<sup>20+</sup> 11320 11321static contains(rect: common2D.Rect, x: number, y: number): boolean 11322 11323判断一个矩形是否完全包含一个点。 11324 11325**系统能力:** SystemCapability.Graphics.Drawing 11326 11327**参数:** 11328 11329| 参数名 | 类型 | 必填 | 说明 | 11330| ------ | ------ | ---- | -------------- | 11331| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 矩形对象。 | 11332| x | number | 是 | 要判断点的x轴坐标,该参数为浮点数。0表示坐标原点,负数表示位于坐标原点左侧,正数表示位于坐标原点右侧。 | 11333| y | number | 是 | 要判断点的y轴坐标,该参数为浮点数。0表示坐标原点,负数表示位于坐标原点上侧,正数表示位于坐标原点下侧。 | 11334 11335**返回值:** 11336 11337| 类型 | 说明 | 11338| ------- | ------------------------- | 11339| boolean | 返回矩形是否完全包含x、y组成的点的结果。true表示矩形完全包含x、y组成的点,false表示矩形不完全包含x、y组成的点。左边界和上边界属于矩形内部,右边界和下边界不属于矩形内部。空的矩形不包含任何点。| 11340 11341**示例:** 11342 11343```ts 11344import { drawing, common2D } from '@kit.ArkGraphics2D'; 11345let rect = drawing.RectUtils.makeLtrb(0, 0, 100, 100); 11346let isContains = drawing.RectUtils.contains(rect, 10, 20); 11347console.info('isContains: ', isContains); 11348``` 11349 11350### inset<sup>20+</sup> 11351 11352static inset(rect: common2D.Rect, left: number, top: number, right: number, bottom: number): void 11353 11354将指定矩形的左边界、上边界、右边界和下边界分别和传入的"左上右下"的值相加。 11355 11356**系统能力:** SystemCapability.Graphics.Drawing 11357 11358**参数:** 11359 11360| 参数名 | 类型 | 必填 | 说明 | 11361| ------ | ------ | ---- | -------------- | 11362| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 矩形对象。 | 11363| left | number | 是 | 添加到矩形左边界的值(矩形左上角横坐标),该参数为浮点数。0表示不进行任何运算,正数表示进行相加运算,负数表示相减运算。 | 11364| top | number | 是 | 添加到矩形上边界的值(矩形左上角纵坐标),该参数为浮点数。0表示不进行任何运算,正数表示进行相加运算,负数表示相减运算。 | 11365| right | number | 是 | 添加到矩形右边界的值(矩形右下角横坐标),该参数为浮点数。0表示不进行任何运算,正数表示进行相加运算,负数表示相减运算。 | 11366| bottom | number | 是 | 添加到矩形下边界的值(矩形右下角纵坐标),该参数为浮点数。0表示不进行任何运算,正数表示进行相加运算,负数表示相减运算。 | 11367 11368**示例:** 11369 11370```ts 11371import { drawing, common2D } from '@kit.ArkGraphics2D'; 11372let rect = drawing.RectUtils.makeLtrb(10, 10, 20, 20); 11373drawing.RectUtils.inset(rect, 10, -20, 30, 60); 11374console.info('rect.left:', rect.left); 11375console.info('rect.top: ', rect.top); 11376console.info('rect.right: ', rect.right); 11377console.info('rect.bottom: ', rect.bottom); 11378``` 11379 11380### intersect<sup>20+</sup> 11381 11382static intersect(rect: common2D.Rect, other: common2D.Rect): boolean 11383 11384计算两个矩形的交集区域,并将交集结果更新到第一个入参代表的矩形区域。 11385 11386**系统能力:** SystemCapability.Graphics.Drawing 11387 11388**参数:** 11389 11390| 参数名 | 类型 | 必填 | 说明 | 11391| ------ | ------ | ---- | -------------- | 11392| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 用于计算交集的原矩形。 | 11393| other | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 用于计算交集的另一个矩形。 | 11394 11395**返回值:** 11396 11397| 类型 | 说明 | 11398| ------- | ------------------------- | 11399| boolean | 返回两个矩形是否有交集的结果。true表示两个矩形有交集,false表示两个矩形没有交集。 | 11400 11401**示例:** 11402 11403```ts 11404import { drawing, common2D } from '@kit.ArkGraphics2D'; 11405let rect = drawing.RectUtils.makeLtrb(0, 0, 20, 20); 11406let rect2 = drawing.RectUtils.makeLtrb(10, 10, 40, 40); 11407let isIntersect = drawing.RectUtils.intersect(rect, rect2); 11408console.info('isIntersect :', isIntersect); 11409console.info('rect.left:', rect.left); 11410console.info('rect.top: ', rect.top); 11411console.info('rect.right: ', rect.right); 11412console.info('rect.bottom: ', rect.bottom); 11413``` 11414 11415### isIntersect<sup>20+</sup> 11416 11417static isIntersect(rect: common2D.Rect, other: common2D.Rect): boolean 11418 11419判断两个矩形是否相交。 11420 11421**系统能力:** SystemCapability.Graphics.Drawing 11422 11423**参数:** 11424 11425| 参数名 | 类型 | 必填 | 说明 | 11426| ------ | ------ | ---- | -------------- | 11427| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 用于计算交集的原矩形。 | 11428| other | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 用于计算交集的另一个矩形。 | 11429 11430**返回值:** 11431 11432| 类型 | 说明 | 11433| ------- | ------------------------- | 11434| boolean | 返回两个矩形是否有交集的结果。true表示指定矩形与原矩形相交,false表示指定矩形和原矩形没有交集。两矩形仅边重叠或点相交返回false。| 11435 11436**示例:** 11437 11438```ts 11439import { drawing, common2D } from '@kit.ArkGraphics2D'; 11440let rect = drawing.RectUtils.makeLtrb(0, 0, 20, 20); 11441let rect2 = drawing.RectUtils.makeLtrb(10, 10, 40, 40); 11442let isIntersect = drawing.RectUtils.isIntersect(rect, rect2); 11443console.info('isIntersect :', isIntersect); 11444``` 11445 11446### union<sup>20+</sup> 11447 11448static union(rect: common2D.Rect, other: common2D.Rect): void 11449 11450计算矩形的并集区域,并将并集结果更新到第一个入参表示的矩形区域。如果第一个入参矩形为空,则将并集结果更新到第二个入参代表的矩形区域;如果第二个入参的矩形为空,则不进行任何操作。 11451 11452**系统能力:** SystemCapability.Graphics.Drawing 11453 11454**参数:** 11455 11456| 参数名 | 类型 | 必填 | 说明 | 11457| ------ | ------ | ---- | -------------- | 11458| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 用于计算并集的原矩形。 | 11459| other | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 用于计算并集的另一个矩形。 | 11460 11461**示例:** 11462 11463```ts 11464import { drawing, common2D } from '@kit.ArkGraphics2D'; 11465let rect = drawing.RectUtils.makeLtrb(0, 0, 20, 20); 11466let rect2 = drawing.RectUtils.makeLtrb(10, 10, 40, 40); 11467drawing.RectUtils.union(rect, rect2); 11468console.info('rect.left:', rect.left); 11469console.info('rect.top: ', rect.top); 11470console.info('rect.right: ', rect.right); 11471console.info('rect.bottom: ', rect.bottom); 11472``` 11473 11474### isEmpty<sup>20+</sup> 11475 11476static isEmpty(rect: common2D.Rect): boolean 11477 11478判断矩形是否为空(左边界大于等于右边界或者上边界大于等于下边界)。 11479 11480**系统能力:** SystemCapability.Graphics.Drawing 11481 11482**参数:** 11483 11484| 参数名 | 类型 | 必填 | 说明 | 11485| ------ | ------ | ---- | -------------- | 11486| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 用于判断的矩形对象。 | 11487 11488**返回值:** 11489 11490| 类型 | 说明 | 11491| ------- | ------------------------- | 11492| boolean | 返回矩形是否为空的结果。true表示矩形是空,false表示矩形不为空。 | 11493 11494**示例:** 11495 11496```ts 11497import { drawing, common2D } from '@kit.ArkGraphics2D'; 11498let rect = drawing.RectUtils.makeEmpty(); 11499let isEmpty = drawing.RectUtils.isEmpty(rect); 11500console.info('isEmpty :', isEmpty); 11501let rect2 = drawing.RectUtils.makeLtrb(0, 0, 20, 20); 11502isEmpty = drawing.RectUtils.isEmpty(rect); 11503console.info('isEmpty :', isEmpty); 11504``` 11505 11506### offset<sup>20+</sup> 11507 11508static offset(rect: common2D.Rect, dx: number, dy: number): void 11509 11510对矩形进行平移。 11511 11512**系统能力:** SystemCapability.Graphics.Drawing 11513 11514**参数:** 11515 11516| 参数名 | 类型 | 必填 | 说明 | 11517| ------ | ------ | ---- | -------------- | 11518| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 发生偏移的矩形区域。 | 11519| dx | number | 是 | 水平方向平移的距离,该参数为浮点数。0表示不平移,负数表示向左平移,正数表示向右平移。 | 11520| dy | number | 是 | 竖直方向平移的距离,该参数为浮点数。0表示不平移,负数表示向上平移,正数表示向右平移。 | 11521 11522**示例:** 11523 11524```ts 11525import { drawing, common2D } from '@kit.ArkGraphics2D'; 11526let rect = drawing.RectUtils.makeLtrb(0, 0, 20, 20); 11527drawing.RectUtils.offset(rect, 10, 20); 11528console.info('rect.left:', rect.left); 11529console.info('rect.top: ', rect.top); 11530console.info('rect.right: ', rect.right); 11531console.info('rect.bottom: ', rect.bottom); 11532``` 11533 11534### offsetTo<sup>20+</sup> 11535 11536static offsetTo(rect: common2D.Rect, newLeft: number, newTop: number): void 11537 11538将矩形平移到指定位置。 11539 11540**系统能力:** SystemCapability.Graphics.Drawing 11541 11542**参数:** 11543 11544| 参数名 | 类型 | 必填 | 说明 | 11545| ------ | ------ | ---- | -------------- | 11546| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 发生偏移的矩形区域。 | 11547| newLeft | number | 是 | 要平移到的对应位置的x轴坐标,浮点数。0表示坐标原点,负数位于坐标原点左侧,正数位于坐标原点右侧。 | 11548| newTop | number | 是 | 要平移到的对应位置的y轴坐标,浮点数。0表示坐标原点,负数位于坐标原点上侧,正数位于坐标原点下侧。 | 11549 11550**示例:** 11551 11552```ts 11553import { drawing, common2D } from '@kit.ArkGraphics2D'; 11554let rect = drawing.RectUtils.makeLtrb(40, 40, 20, 20); 11555drawing.RectUtils.offsetTo(rect, 10, 20); 11556console.info('rect.left:', rect.left); 11557console.info('rect.top: ', rect.top); 11558console.info('rect.right: ', rect.right); 11559console.info('rect.bottom: ', rect.bottom); 11560``` 11561 11562### setRect<sup>20+</sup> 11563 11564static setRect(rect: common2D.Rect, other: common2D.Rect): void 11565 11566使用另一个矩形对当前矩形进行赋值。 11567 11568**系统能力:** SystemCapability.Graphics.Drawing 11569 11570**参数:** 11571 11572| 参数名 | 类型 | 必填 | 说明 | 11573| ------ | ------ | ---- | -------------- | 11574| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 原矩形。 | 11575| other | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 用于赋值的矩形。 | 11576 11577**示例:** 11578 11579```ts 11580import { drawing, common2D } from '@kit.ArkGraphics2D'; 11581let rect = drawing.RectUtils.makeLtrb(10, 20, 30, 40); 11582let rect2 = drawing.RectUtils.makeEmpty(); 11583drawing.RectUtils.setRect(rect2, rect); 11584console.info('rect2.left:', rect2.left); 11585console.info('rect2.top: ', rect2.top); 11586console.info('rect2.right: ', rect2.right); 11587console.info('rect2.bottom: ', rect2.bottom); 11588``` 11589 11590### setLtrb<sup>20+</sup> 11591 11592static setLtrb(rect: common2D.Rect, left: number, top: number, right: number, bottom: number): void 11593 11594使用传入的"上下左右"的值更新当前矩形的上下左右边界值。 11595 11596**系统能力**:SystemCapability.Graphics.Drawing 11597 11598**参数:** 11599 11600| 参数名 | 类型 | 必填 | 说明 | 11601| ------ | ------ | ---- | -------------- | 11602| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 矩形对象。 | 11603| left | number | 是 | 矩形的左上角x轴坐标,该参数为浮点数。0表示坐标原点,负数表示位于坐标原点左侧,正数表示位于坐标原点右侧。 | 11604| top | number | 是 | 矩形的左上角y轴坐标,该参数为浮点数。0表示坐标原点,负数表示位于坐标原点上侧,正数表示位于坐标原点下侧。 | 11605| right | number | 是 | 矩形的右下角x轴坐标,该参数为浮点数。0表示坐标原点,负数表示位于坐标原点左侧,正数表示位于坐标原点右侧。 | 11606| bottom | number | 是 | 矩形的右下角y轴坐标,该参数为浮点数。0表示坐标原点,负数表示位于坐标原点上侧,正数表示位于坐标原点下侧。 | 11607 11608**示例:** 11609 11610```ts 11611import { drawing, common2D } from '@kit.ArkGraphics2D'; 11612let rect = drawing.RectUtils.makeEmpty(); 11613drawing.RectUtils.setLtrb(rect, 10, 20, 30, 60); 11614console.info('rect.left:', rect.left); 11615console.info('rect.top: ', rect.top); 11616console.info('rect.right: ', rect.right); 11617console.info('rect.bottom: ', rect.bottom); 11618``` 11619 11620### setEmpty<sup>20+</sup> 11621 11622static setEmpty(rect: common2D.Rect): void 11623 11624将矩形的上下左右边界都设为0。 11625 11626**系统能力:** SystemCapability.Graphics.Drawing 11627 11628**参数:** 11629 11630| 参数名 | 类型 | 必填 | 说明 | 11631| ------ | ------ | ---- | -------------- | 11632| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 用于设置为空的矩形对象。 | 11633 11634**示例:** 11635 11636```ts 11637import { drawing, common2D } from '@kit.ArkGraphics2D'; 11638let rect = drawing.RectUtils.makeLtrb(10, 20, 20, 30); 11639drawing.RectUtils.setEmpty(rect) 11640console.info('rect.left:', rect.left); 11641console.info('rect.top: ', rect.top); 11642console.info('rect.right: ', rect.right); 11643console.info('rect.bottom: ', rect.bottom); 11644``` 11645 11646### sort<sup>20+</sup> 11647 11648static sort(rect: common2D.Rect): void 11649 11650如果矩形存在反转的情况(即左边界大于右边界或上边界大于下边界),则对矩形的上下(左右)边界值进行交换,使得上边界小于下边界(左边界小于右边界)。 11651 11652如果矩形不存在反转的情况(即左边界小于等于右边界或上边界小于等于下边界),不做任何操作。 11653 11654**系统能力:** SystemCapability.Graphics.Drawing 11655 11656**参数:** 11657 11658| 参数名 | 类型 | 必填 | 说明 | 11659| ------ | ------ | ---- | -------------- | 11660| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 用于设置的矩形对象。 | 11661 11662**示例:** 11663 11664```ts 11665import { drawing, common2D } from '@kit.ArkGraphics2D'; 11666let rect = drawing.RectUtils.makeLtrb(20, 40, 30, 30); 11667drawing.RectUtils.sort(rect); 11668console.info('rect.left:', rect.left); 11669console.info('rect.top: ', rect.top); 11670console.info('rect.right: ', rect.right); 11671console.info('rect.bottom: ', rect.bottom); 11672``` 11673 11674### isEqual<sup>20+</sup> 11675 11676static isEqual(rect: common2D.Rect, other: common2D.Rect): boolean 11677 11678判断两个矩形是否相等。 11679 11680**系统能力:** SystemCapability.Graphics.Drawing 11681 11682**参数:** 11683 11684| 参数名 | 类型 | 必填 | 说明 | 11685| ------ | ------ | ---- | -------------- | 11686| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 需要判断的原矩形。 | 11687| other | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 需要判断的另一矩形。 | 11688 11689**返回值:** 11690 11691| 类型 | 说明 | 11692| ------- | ------------------------- | 11693| boolean | 返回两个矩形是否相等的结果。true表示两个矩形相等,false表示两个矩形不相等。 | 11694 11695**示例:** 11696 11697```ts 11698import { drawing, common2D } from '@kit.ArkGraphics2D'; 11699let rect = drawing.RectUtils.makeLtrb(10, 20, 20, 30); 11700let rect2 = drawing.RectUtils.makeEmpty(); 11701let isEqual = drawing.RectUtils.isEqual(rect, rect2); 11702console.info('isEqual :', isEqual); 11703```