1# @ohos.graphics.drawing (绘制模块) 2 3drawing模块提供了基本的绘制能力，如绘制矩形、圆形、点、直线、自定义Path、字体等等。 4 5> **说明：** 6> 7> - 本模块首批接口从API version 11开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 8> 9> - 本模块不提供像素单位，和应用上下文环境保持一致。如果处于ArkUI开发环境中，采用框架默认像素单位vp。像素单位请参考[像素单位说明文档](../apis-arkui/arkui-ts/ts-pixel-units.md)。 10 11## 导入模块 12 13```ts 14import drawing from '@ohos.graphics.drawing' 15``` 16 17## BlendMode 18 19混合模式枚举。混合模式的操作会为两种颜色（源色、目标色）生成一种新的颜色。 这些操作在4个颜色通道（红、绿、蓝、透明度）上是相同的。 对于这些，我们使用透明度通道作为示例，而不是单独命名每个通道。 20 21为简洁起见，我们使用以下缩写： 22 23s : source 源的缩写。 d : destination 目标的缩写。 sa : source alpha 源透明度的缩写。 da : destination alpha 目标透明度的缩写。 24 25计算结果用如下缩写表示： 26 27r : 如果4个通道的计算方式相同，用r表示。 ra : 如果只操作透明度通道，用ra表示。 rc : 如果操作3个颜色通道，用rc表示。 28 29**系统能力：** SystemCapability.Graphics.Drawing 30 31| 名称 | 值 | 说明 | 32| ----------- | ---- | ------------------------------------------------------------ | 33| CLEAR | 0 | 清除模式，r = 0。 | 34| SRC | 1 | r = s（result的4个通道，都等于source的4个通道，即结果等于源。） | 35| DST | 2 | r = d（result的4个通道，都等于destination的4个通道，即结果等于目标。） | 36| SRC_OVER | 3 | r = s + (1 - sa) * d | 37| DST_OVER | 4 | r = d + (1 - da) * s | 38| SRC_IN | 5 | r = s * da | 39| DST_IN | 6 | r = d * sa | 40| SRC_OUT | 7 | r = s * (1 - da) | 41| DST_OUT | 8 | r = d * (1 - sa) | 42| SRC_ATOP | 9 | r = s * da + d * (1 - sa) | 43| DST_ATOP | 10 | r = d * sa + s * (1 - da) | 44| XOR | 11 | r = s * (1 - da) + d * (1 - sa) | 45| PLUS | 12 | r = min(s + d, 1) | 46| MODULATE | 13 | r = s * d | 47| SCREEN | 14 | 滤色模式，r = s + d - s * d | 48| OVERLAY | 15 | 叠加模式 | 49| DARKEN | 16 | 变暗模式，rc = s + d - max(s * da, d * sa), ra = s + (1 - sa) * d | 50| LIGHTEN | 17 | 变亮模式，rc = s + d - min(s * da, d * sa), ra = s + (1 - sa) * d | 51| COLOR_DODGE | 18 | 颜色减淡模式 | 52| COLOR_BURN | 19 | 颜色加深模式 | 53| HARD_LIGHT | 20 | 强光模式 | 54| SOFT_LIGHT | 21 | 柔光模式 | 55| DIFFERENCE | 22 | 差值模式，rc = s + d - 2 * (min(s * da, d * sa)), ra = s + (1 - sa) * d | 56| EXCLUSION | 23 | 排除模式，rc = s + d - two(s * d), ra = s + (1 - sa) * d | 57| MULTIPLY | 24 | 正片叠底，r = s * (1 - da) + d * (1 - sa) + s * d | 58| HUE | 25 | 色相模式 | 59| SATURATION | 26 | 饱和度模式 | 60| COLOR | 27 | 颜色模式 | 61| LUMINOSITY | 28 | 亮度模式 | 62 63## Path 64 65由直线、圆弧、二阶贝塞尔、三阶贝塞尔组成的复合几何路径。 66 67### moveTo 68 69moveTo(x: number, y: number) : void 70 71用于设置自定义路径的起始点位置。 72 73**系统能力**：SystemCapability.Graphics.Drawing 74 75**参数：** 76 77| 参数名 | 类型 | 必填 | 说明 | 78| ------ | ------ | ---- | ----------------------- | 79| x | number | 是 | 起始点的x轴坐标，该参数为浮点数。 | 80| y | number | 是 | 起始点的y轴坐标，该参数为浮点数。 | 81 82**示例：** 83 84```ts 85import drawing from "@ohos.graphics.drawing" 86let path = new drawing.Path(); 87path.moveTo(10,10); 88``` 89 90### lineTo 91 92lineTo(x: number, y: number) : void 93 94用于添加一条从路径的最后点位置到目标点位置的线段。 95 96**系统能力**：SystemCapability.Graphics.Drawing 97 98**参数：** 99 100| 参数名 | 类型 | 必填 | 说明 | 101| ------ | ------ | ---- | ----------------------- | 102| x | number | 是 | 目标点的x轴坐标，该参数为浮点数。 | 103| y | number | 是 | 目标点的y轴坐标，该参数为浮点数。 | 104 105**示例：** 106 107```ts 108import drawing from "@ohos.graphics.drawing" 109let path = new drawing.Path(); 110path.moveTo(10,10); 111path.lineTo(10, 15); 112``` 113 114### arcTo 115 116arcTo(x1: number, y1: number, x2: number, y2: number, startDeg: number, sweepDeg: number): void 117 118用于给路径添加一段弧线，绘制弧线的方式为角度弧，该方式首先会指定一个矩形边框，矩形边框会包裹椭圆， 然后会指定一个起始角度和扫描度数，从起始角度扫描截取的椭圆周长一部分即为绘制的弧线。另外会默认添加一条从路径的最后点位置到弧线起始点位置的线段。 119 120**系统能力**：SystemCapability.Graphics.Drawing 121 122**参数：** 123 124| 参数名 | 类型 | 必填 | 说明 | 125| -------- | ------ | ---- | -------------------------- | 126| x1 | number | 是 | 矩形左上角的x坐标，该参数为浮点数。 | 127| y1 | number | 是 | 矩形左上角的y坐标，该参数为浮点数。 | 128| x2 | number | 是 | 矩形右下角的x坐标，该参数为浮点数。 | 129| y2 | number | 是 | 矩形右下角的y坐标，该参数为浮点数。 | 130| startDeg | number | 是 | 起始角度，单位为度，该参数为浮点数。 | 131| sweepDeg | number | 是 | 扫描度数，单位为度，该参数为浮点数。 | 132 133**示例：** 134 135```ts 136import drawing from "@ohos.graphics.drawing" 137let path = new drawing.Path(); 138path.moveTo(10,10); 139path.arcTo(10, 15, 10, 10, 10, 10); 140``` 141 142### quadTo 143 144quadTo(ctrlX: number, ctrlY: number, endX: number, endY: number): void 145 146用于添加一条从路径最后点位置到目标点位置的二阶贝塞尔圆滑曲线。 147 148**系统能力**：SystemCapability.Graphics.Drawing 149 150**参数：** 151 152| 参数名 | 类型 | 必填 | 说明 | 153| ------ | ------ | ---- | --------------------- | 154| ctrlX | number | 是 | 控制点的x坐标，该参数为浮点数。 | 155| ctrlY | number | 是 | 控制点的y坐标，该参数为浮点数。 | 156| endX | number | 是 | 目标点的x坐标，该参数为浮点数。 | 157| endY | number | 是 | 目标点的y坐标，该参数为浮点数。 | 158 159**示例：** 160 161```ts 162import drawing from "@ohos.graphics.drawing" 163let path = new drawing.Path(); 164path.moveTo(10,10); 165path.quadTo(10, 15, 10, 10); 166``` 167 168### cubicTo 169 170cubicTo(ctrlX1: number, ctrlY1: number, ctrlX2: number, ctrlY2: number, endX: number, endY: number): void 171 172用于添加一条从路径最后点位置到目标点位置的三阶贝塞尔圆滑曲线。 173 174**系统能力**：SystemCapability.Graphics.Drawing 175 176**参数：** 177 178| 参数名 | 类型 | 必填 | 说明 | 179| ------ | ------ | ---- | --------------------------- | 180| ctrlX1 | number | 是 | 第一个控制点的x坐标，该参数为浮点数。 | 181| ctrlY1 | number | 是 | 第一个控制点的y坐标，该参数为浮点数。 | 182| ctrlX2 | number | 是 | 第二个控制点的x坐标，该参数为浮点数。 | 183| ctrlY2 | number | 是 | 第二个控制点的y坐标，该参数为浮点数。 | 184| endX | number | 是 | 目标点的x坐标，该参数为浮点数。 | 185| endY | number | 是 | 目标点的y坐标，该参数为浮点数。 | 186 187**示例：** 188 189```ts 190import drawing from "@ohos.graphics.drawing" 191let path = new drawing.Path(); 192path.moveTo(10,10); 193path.cubicTo(10, 10, 10, 10, 15, 15); 194``` 195 196### close 197 198close(): void 199 200用于闭合路径，会添加一条从路径起点位置到最后点位置的线段。 201 202**系统能力**：SystemCapability.Graphics.Drawing 203 204**示例：** 205 206```ts 207import drawing from "@ohos.graphics.drawing" 208let path = new drawing.Path(); 209path.moveTo(10,10); 210path.cubicTo(10, 10, 10, 10, 15, 15); 211path.close(); 212``` 213 214### reset 215 216reset(): void 217 218用于重置自定义路径数据。 219 220**系统能力**：SystemCapability.Graphics.Drawing 221 222**示例：** 223 224```ts 225import drawing from "@ohos.graphics.drawing" 226let path = new drawing.Path(); 227path.moveTo(10,10); 228path.cubicTo(10, 10, 10, 10, 15, 15); 229path.reset(); 230``` 231 232## Canvas 233 234承载绘制内容与绘制状态的载体。 235 236### constructor 237 238constructor(pixelmap: image.PixelMap) 239 240Canvas对象的构造函数。 241 242**系统能力**：SystemCapability.Graphics.Drawing 243 244**参数：** 245 246| 参数名 | 类型 | 必填 | 说明 | 247| -------- | -------------------------------------------- | ---- | -------------- | 248| pixelmap | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | 是 | 构造函数入参。 | 249 250**示例：** 251 252```ts 253import drawing from "@ohos.graphics.drawing" 254import image from '@ohos.multimedia.image'; 255const color = new ArrayBuffer(96); 256let opts : image.InitializationOptions = { 257 editable: true, 258 pixelFormat: 3, 259 size: { 260 height: 4, 261 width: 6 262 } 263} 264image.createPixelMap(color, opts).then((pixelMap) => { 265 const canvas = new drawing.Canvas(pixelMap); 266}) 267``` 268 269### drawRect 270 271drawRect(rect: common2D.Rect): void 272 273用于绘制一个矩形，默认使用黑色填充。 274 275> **说明：** 276> 277> 矩形的左上角点的坐标值如果大于右下角的坐标值，可以绘制出矩形；如果左上角和右下角在同一x轴或者y轴，可以绘制出一条直线；如果左上角和右下角是同一点，不会绘制任何内容。 278 279**系统能力**：SystemCapability.Graphics.Drawing 280 281**参数：** 282 283| 参数名 | 类型 | 必填 | 说明 | 284| ------ | -------------------------------------------------- | ---- | -------------- | 285| rect | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 是 | 绘制的矩形区域 | 286 287**示例：** 288 289```ts 290import { RenderNode, DrawContext } from "@ohos.arkui.node" 291import drawing from "@ohos.graphics.drawing" 292import common2D from "@ohos.graphics.common2D" 293class DrawingRenderNode extends RenderNode { 294 draw(context : DrawContext) { 295 const canvas = context.canvas; 296 const pen = new drawing.Pen(); 297 pen.setStrokeWidth(5); 298 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 299 canvas.attachPen(pen); 300 canvas.drawRect({ left : 0, right : 0, top : 10, bottom : 10 }); 301 canvas.detachPen(); 302 } 303} 304``` 305 306### drawCircle 307 308drawCircle(x: number, y: number, radius: number): void 309 310用于画一个圆形。如果半径小于等于零，则不绘制任何内容。默认使用黑色填充。 311 312**系统能力**：SystemCapability.Graphics.Drawing 313 314**参数：** 315 316| 参数名 | 类型 | 必填 | 说明 | 317| ------ | ------ | ---- | ------------------- | 318| x | number | 是 | 圆心的x坐标，该参数为浮点数。 | 319| y | number | 是 | 圆心的y坐标，该参数为浮点数。 | 320| radius | number | 是 | 圆的半径，该参数为浮点数。 | 321 322**示例：** 323 324```ts 325import { RenderNode, DrawContext } from "@ohos.arkui.node" 326import drawing from "@ohos.graphics.drawing" 327class DrawingRenderNode extends RenderNode { 328 draw(context : DrawContext) { 329 const canvas = context.canvas; 330 const pen = new drawing.Pen(); 331 pen.setStrokeWidth(5); 332 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 333 canvas.attachPen(pen); 334 canvas.drawCircle(10, 10, 2); 335 canvas.detachPen(); 336 } 337} 338``` 339 340### drawImage 341 342drawImage(pixelmap: image.PixelMap, left: number, top: number): void 343 344用于画一张图片，图片的左上角坐标为(left, top)。 345 346**系统能力**：SystemCapability.Graphics.Drawing 347 348**参数：** 349 350| 参数名 | 类型 | 必填 | 说明 | 351| -------- | -------------------------------------------- | ---- | ------------------------------- | 352| pixelmap | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | 是 | 图片的PixelMap | 353| left | number | 是 | 图片位置的左上角x轴坐标，该参数为浮点数。 | 354| top | number | 是 | 图片位置的左上角y轴坐标，该参数为浮点数。 | 355 356**示例：** 357 358```ts 359import { RenderNode, DrawContext } from "@ohos.arkui.node" 360import image from "@ohos.multimedia.image" 361import drawing from "@ohos.graphics.drawing" 362class DrawingRenderNode extends RenderNode { 363 pixelMap: image.PixelMap | null = null; 364 365 async draw(context : DrawContext) { 366 const canvas = context.canvas; 367 if (this.pixelMap != null) { 368 canvas.drawImage(this.pixelMap, 0, 0); 369 } 370 } 371} 372``` 373 374### drawColor 375 376drawColor(color: common2D.Color, blendMode?: BlendMode): void 377 378绘制背景颜色。 379 380**系统能力**：SystemCapability.Graphics.Drawing 381 382**参数：** 383 384| 参数名 | 类型 | 必填 | 说明 | 385| --------- | ---------------------------------------------------- | ---- | -------------------------------- | 386| color | [common2D.Color](js-apis-graphics-common2D.md#color) | 是 | 颜色值，整数。 | 387| blendMode | [BlendMode](#blendmode) | 否 | 颜色混合模式，默认模式为SRC_OVER | 388 389**示例：** 390 391```ts 392import { RenderNode, DrawContext } from "@ohos.arkui.node" 393import drawing from "@ohos.graphics.drawing" 394import common2D from "@ohos.graphics.common2D" 395class DrawingRenderNode extends RenderNode { 396 draw(context : DrawContext) { 397 const canvas = context.canvas; 398 let color: common2D.Color = { 399 alpha : 255, 400 red: 0, 401 green: 10, 402 blue: 10 403 } 404 canvas.drawColor(color, drawing.BlendMode.CLEAR); 405 } 406} 407``` 408 409### drawPoint 410 411drawPoint(x: number, y: number): void 412 413用于绘制一个点。 414 415**系统能力**：SystemCapability.Graphics.Drawing 416 417**参数：** 418 419| 参数名 | 类型 | 必填 | 说明 | 420| ------ | ------ | ---- | ------------------- | 421| x | number | 是 | 点的x轴坐标，该参数为浮点数。 | 422| y | number | 是 | 点的y轴坐标，该参数为浮点数。 | 423 424**示例：** 425 426```ts 427import { RenderNode, DrawContext } from "@ohos.arkui.node" 428import drawing from "@ohos.graphics.drawing" 429class DrawingRenderNode extends RenderNode { 430 draw(context : DrawContext) { 431 const canvas = context.canvas; 432 const pen = new drawing.Pen(); 433 pen.setStrokeWidth(5); 434 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 435 canvas.attachPen(pen); 436 canvas.drawPoint(10, 10); 437 canvas.detachPen(); 438 } 439} 440``` 441 442### drawPath 443 444drawPath(path: Path): void 445 446用于绘制一个自定义路径，该路径包含了一组路径轮廓，每个路径轮廓可以是开放的或封闭的。 447 448**系统能力**：SystemCapability.Graphics.Drawing 449 450**参数：** 451 452| 参数名 | 类型 | 必填 | 说明 | 453| ------ | ------------- | ---- | ------------------ | 454| path | [Path](#path) | 是 | 要绘制的路径对象。 | 455 456**示例：** 457 458```ts 459import { RenderNode, DrawContext } from "@ohos.arkui.node" 460import drawing from "@ohos.graphics.drawing" 461class DrawingRenderNode extends RenderNode { 462 draw(context : DrawContext) { 463 const canvas = context.canvas; 464 const pen = new drawing.Pen(); 465 pen.setStrokeWidth(5); 466 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 467 let path = new drawing.Path(); 468 path.moveTo(10,10); 469 path.cubicTo(10, 10, 10, 10, 15, 15); 470 path.close(); 471 canvas.attachPen(pen); 472 canvas.drawPath(path); 473 canvas.detachPen(); 474 } 475} 476``` 477 478### drawLine 479 480drawLine(x0: number, y0: number, x1: number, y1: number): void 481 482用于画一条直线段，从指定的起点到指点的终点。如果直线段的起点和终点是同一个点，无法绘制。 483 484**系统能力**：SystemCapability.Graphics.Drawing 485 486**参数：** 487 488| 参数名 | 类型 | 必填 | 说明 | 489| ------ | ------ | ---- | ----------------------- | 490| x0 | number | 是 | 线段起点的X坐标，该参数为浮点数。 | 491| y0 | number | 是 | 线段起点的Y坐标，该参数为浮点数。 | 492| x1 | number | 是 | 线段终点的X坐标，该参数为浮点数。 | 493| y1 | number | 是 | 线段终点的Y坐标，该参数为浮点数。 | 494 495**示例：** 496 497```ts 498import { RenderNode, DrawContext } from "@ohos.arkui.node" 499import drawing from "@ohos.graphics.drawing" 500class DrawingRenderNode extends RenderNode { 501 draw(context : DrawContext) { 502 const canvas = context.canvas; 503 const pen = new drawing.Pen(); 504 pen.setStrokeWidth(5); 505 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 506 canvas.attachPen(pen); 507 canvas.drawLine(0, 0, 20, 20); 508 canvas.detachPen(); 509 } 510} 511``` 512 513### drawTextBlob 514 515drawTextBlob(blob: TextBlob, x: number, y: number): void 516 517用于绘制一段文字。 518 519**系统能力**：SystemCapability.Graphics.Drawing 520 521**参数：** 522 523| 参数名 | 类型 | 必填 | 说明 | 524| ------ | --------------------- | ---- | ------------------------------------------ | 525| blob | [TextBlob](#textblob) | 是 | TextBlob对象。 | 526| x | number | 是 | 所绘制出的文字的边界框左上角横坐标，该参数为浮点数。 | 527| y | number | 是 | 所绘制出的文字的边界框左上角纵坐标，该参数为浮点数。 | 528 529**示例：** 530 531```ts 532import { RenderNode, DrawContext } from "@ohos.arkui.node" 533import drawing from "@ohos.graphics.drawing" 534class DrawingRenderNode extends RenderNode { 535 draw(context : DrawContext) { 536 const canvas = context.canvas; 537 const brush = new drawing.Brush(); 538 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 539 const font = new drawing.Font(); 540 font.setSize(20); 541 const textBlob = drawing.TextBlob.makeFromString("drawing", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 542 canvas.attachBrush(brush); 543 canvas.drawTextBlob(textBlob, 20, 20); 544 canvas.detachBrush(); 545 } 546} 547``` 548 549### attachPen 550 551attachPen(pen: Pen): void 552 553绑定画笔给画布，画布将使用画笔的样式和颜色去绘制图形形状的轮廓。 554 555**系统能力**：SystemCapability.Graphics.Drawing 556 557**参数：** 558 559| 参数名 | 类型 | 必填 | 说明 | 560| ------ | ----------- | ---- | ---------- | 561| pen | [Pen](#pen) | 是 | 画笔对象。 | 562 563**示例：** 564 565```ts 566import { RenderNode, DrawContext } from "@ohos.arkui.node" 567import drawing from "@ohos.graphics.drawing" 568class DrawingRenderNode extends RenderNode { 569 draw(context : DrawContext) { 570 const canvas = context.canvas; 571 const pen = new drawing.Pen(); 572 pen.setStrokeWidth(5); 573 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 574 canvas.attachPen(pen); 575 canvas.drawRect({ left : 0, right : 0, top : 10, bottom : 10 }); 576 canvas.detachPen(); 577 } 578} 579``` 580 581### attachBrush 582 583attachBrush(brush: Brush): void 584 585绑定画刷给画布，画布将使用画刷的样式和颜色去绘制图形形状，并其内部进行填充。 586 587**系统能力**：SystemCapability.Graphics.Drawing 588 589**参数：** 590 591| 参数名 | 类型 | 必填 | 说明 | 592| ------ | --------------- | ---- | ---------- | 593| brush | [Brush](#brush) | 是 | 画刷对象。 | 594 595**示例：** 596 597```ts 598import { RenderNode, DrawContext } from "@ohos.arkui.node" 599import drawing from "@ohos.graphics.drawing" 600class DrawingRenderNode extends RenderNode { 601 draw(context : DrawContext) { 602 const canvas = context.canvas; 603 const brush = new drawing.Brush(); 604 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 605 canvas.attachBrush(brush); 606 canvas.drawRect({ left : 0, right : 0, top : 10, bottom : 10 }); 607 canvas.detachBrush(); 608 } 609} 610``` 611 612### detachPen 613 614detachPen(): void 615 616用于去除掉画布中的画笔，画布将不再使用画笔去绘制图形形状的轮廓。 617 618**系统能力**：SystemCapability.Graphics.Drawing 619 620**示例：** 621 622```ts 623import { RenderNode, DrawContext } from "@ohos.arkui.node" 624import drawing from "@ohos.graphics.drawing" 625class DrawingRenderNode extends RenderNode { 626 draw(context : DrawContext) { 627 const canvas = context.canvas; 628 const pen = new drawing.Pen(); 629 pen.setStrokeWidth(5); 630 pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 631 canvas.attachPen(pen); 632 canvas.drawRect({ left : 0, right : 0, top : 10, bottom : 10 }); 633 canvas.detachPen(); 634 } 635} 636``` 637 638### detachBrush 639 640detachBrush(): void 641 642用于去除掉画布中的画刷，画布将不再使用画刷去绘制图形形状，也不会进行填充。 643 644**系统能力**：SystemCapability.Graphics.Drawing 645 646**示例：** 647 648```ts 649import { RenderNode, DrawContext } from "@ohos.arkui.node" 650import drawing from "@ohos.graphics.drawing" 651class DrawingRenderNode extends RenderNode { 652 draw(context : DrawContext) { 653 const canvas = context.canvas; 654 const brush = new drawing.Brush(); 655 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 656 canvas.attachBrush(brush); 657 canvas.drawRect({ left : 0, right : 0, top : 10, bottom : 10 }); 658 canvas.detachBrush(); 659 } 660} 661``` 662 663## TextBlobRunBuffer 664 665描述一行文字中具有相同属性的连续字形。 666 667**系统能力**：SystemCapability.Graphics.Drawing 668 669| 名称 | 类型 | 可读 | 可写 | 说明 | 670| --------- | ------ | ---- | ---- | ------------------------- | 671| glyph | number | 是 | 是 | 存储文字的索引，该参数为整数，传入浮点类型时向下取整。 | 672| positionX | number | 是 | 是 | 文本的起点x轴坐标，该参数为浮点数。 | 673| positionY | number | 是 | 是 | 文本的起点y轴坐标，该参数为浮点数。 | 674 675## TextEncoding 676 677文本的编码类型枚举。 678 679**系统能力**：SystemCapability.Graphics.Drawing 680 681| 名称 | 值 | 说明 | 682| ---------------------- | ---- | ------------------------------ | 683| TEXT_ENCODING_UTF8 | 0 | 使用1个字节表示UTF-8或ASCII。 | 684| TEXT_ENCODING_UTF16 | 1 | 使用2个字节表示大部分unicode。 | 685| TEXT_ENCODING_UTF32 | 2 | 使用4个字节表示全部unicode。 | 686| TEXT_ENCODING_GLYPH_ID | 3 | 使用2个字节表示glyph index。 | 687 688## TextBlob 689 690由一个或多个具有相同字体的字符组成的字块。 691 692### makeFromString 693 694static makeFromString(text: string, font: Font, encoding?: TextEncoding): TextBlob 695 696将string类型的值转化成TextBlob对象。 697 698**系统能力**：SystemCapability.Graphics.Drawing 699 700**参数：** 701 702| 参数名 | 类型 | 必填 | 说明 | 703| -------- | ----------------------------- | ---- | -------------------------------------- | 704| text | string | 是 | 绘制字形的文本内容。 | 705| font | [Font](#font) | 是 | 文本大小、字体、文本比例等。 | 706| encoding | [TextEncoding](#textencoding) | 否 | 编码类型，默认值为TEXT_ENCODING_UTF8。 | 707 708**返回值：** 709 710| 类型 | 说明 | 711| --------------------- | -------------- | 712| [TextBlob](#textblob) | TextBlob对象。 | 713 714**示例：** 715 716```ts 717import { RenderNode, DrawContext } from "@ohos.arkui.node" 718import drawing from "@ohos.graphics.drawing" 719class DrawingRenderNode extends RenderNode { 720 draw(context : DrawContext) { 721 const canvas = context.canvas; 722 const brush = new drawing.Brush(); 723 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 724 const font = new drawing.Font(); 725 font.setSize(20); 726 const textBlob = drawing.TextBlob.makeFromString("drawing", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 727 canvas.attachBrush(brush); 728 canvas.drawTextBlob(textBlob, 20, 20); 729 canvas.detachBrush(); 730 } 731} 732``` 733 734### makeFromRunBuffer 735 736static makeFromRunBuffer(pos: Array\<TextBlobRunBuffer>, font: Font, bounds?: common2D.Rect): TextBlob 737 738基于RunBuffer信息创建一个Textblob对象。 739 740**系统能力**：SystemCapability.Graphics.Drawing 741 742**参数：** 743 744| 参数名 | 类型 | 必填 | 说明 | 745| ------ | -------------------------------------------------- | ---- | ------------------------------ | 746| pos | Array\<[TextBlobRunBuffer](#textblobrunbuffer)> | 是 | TextBlobRunBuffer数组。 | 747| font | [Font](#font) | 是 | 文本大小、字体、文本比例等。 | 748| bounds | [common2D.Rect](js-apis-graphics-common2D.md#rect) | 否 | 可选，如果不设置，则无边界框。 | 749 750**返回值：** 751 752| 类型 | 说明 | 753| --------------------- | -------------- | 754| [TextBlob](#textblob) | TextBlob对象。 | 755 756**示例：** 757 758```ts 759import { RenderNode, DrawContext } from "@ohos.arkui.node" 760import drawing from "@ohos.graphics.drawing" 761import common2D from "@ohos.graphics.common2D" 762class DrawingRenderNode extends RenderNode { 763 draw(context : DrawContext) { 764 const canvas = context.canvas; 765 const font = new drawing.Font(); 766 font.setSize(20); 767 let runBuffer : Array<drawing.TextBlobRunBuffer> = [ 768 { glyph: 65, positionX: 0, positionY: 0 }, 769 { glyph: 227, positionX: 14.9, positionY: 0 }, 770 { glyph: 283, positionX: 25.84, positionY: 0 }, 771 { glyph: 283, positionX: 30.62, positionY: 0 }, 772 { glyph: 299, positionX: 35.4, positionY: 0} 773 ]; 774 const textBlob = drawing.TextBlob.makeFromRunBuffer(runBuffer, font, null); 775 const brush = new drawing.Brush(); 776 brush.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 777 canvas.attachBrush(brush); 778 canvas.drawTextBlob(textBlob, 20, 20); 779 canvas.detachBrush(); 780 } 781} 782``` 783 784### bounds 785 786bounds(): common2D.Rect 787 788获取文字边界框的矩形区域。 789 790**系统能力**：SystemCapability.Graphics.Drawing 791 792**返回值：** 793 794| 类型 | 说明 | 795| -------------------------------------------------- | ---------------------- | 796| [common2D.Rect](js-apis-graphics-common2D.md#rect) | 文字边界框的矩形区域。 | 797 798**示例：** 799 800```ts 801import drawing from "@ohos.graphics.drawing" 802import common2D from "@ohos.graphics.common2D" 803const font = new drawing.Font(); 804font.setSize(20); 805const textBlob = drawing.TextBlob.makeFromString("drawing", font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 806textBlob.bounds(); 807``` 808 809## Typeface 810 811字体，如宋体、楷体等。 812 813### getFamilyName 814 815getFamilyName(): string 816 817获取字体的系列名称。 818 819**系统能力**：SystemCapability.Graphics.Drawing 820 821**返回值：** 822 823| 类型 | 说明 | 824| ------ | -------------------- | 825| string | 返回字体的系列名称。 | 826 827**示例：** 828 829```ts 830import drawing from "@ohos.graphics.drawing" 831const font = new drawing.Font(); 832let typeface = font.getTypeface(); 833typeface.getFamilyName(); 834``` 835 836## Font 837 838描述字形绘制时所使用的属性，如大小、字体等。 839 840### enableSubpixel 841 842enableSubpixel(isSubpixel: boolean): void 843 844使能字体亚像素级别的文字绘制，显示效果平滑。 845 846**系统能力**：SystemCapability.Graphics.Drawing 847 848**参数：** 849 850| 参数名 | 类型 | 必填 | 说明 | 851| ---------- | ------- | ---- | ------------------------------------------------------------ | 852| isSubpixel | boolean | 是 | 表示是否使能字体亚像素级别的文字绘制。true表示使能，false表示不使能。 | 853 854**示例：** 855 856```ts 857import drawing from "@ohos.graphics.drawing" 858let font = new drawing.Font(); 859font.enableSubpixel(true); 860``` 861 862### enableEmbolden 863 864enableEmbolden(isEmbolden: boolean): void 865 866使能字体粗体。 867 868**系统能力**：SystemCapability.Graphics.Drawing 869 870**参数：** 871 872| 参数名 | 类型 | 必填 | 说明 | 873| ---------- | ------- | ---- | ----------------------------------------------------- | 874| isEmbolden | boolean | 是 | 表示是否使能字体粗体。true表示使能，false表示不使能。 | 875 876**示例：** 877 878```ts 879import drawing from "@ohos.graphics.drawing" 880let font = new drawing.Font(); 881font.enableEmbolden(true); 882``` 883 884### enableLinearMetrics 885 886enableLinearMetrics(isLinearMetrics: boolean): void 887 888使能字形的线性缩放。 889 890**系统能力**：SystemCapability.Graphics.Drawing 891 892**参数：** 893 894| 参数名 | 类型 | 必填 | 说明 | 895| --------------- | ------- | ---- | ----------------------------------------------------------- | 896| isLinearMetrics | boolean | 是 | 表示是否使能字形的线性缩放。true表示使能，false表示不使能。 | 897 898**示例：** 899 900```ts 901import drawing from "@ohos.graphics.drawing" 902let font = new drawing.Font(); 903font.enableLinearMetrics(true); 904``` 905 906### setSize 907 908setSize(textSize: number): void 909 910设置字体大小，如果字体大小小于等于零，则无效。 911 912**系统能力**：SystemCapability.Graphics.Drawing 913 914**参数：** 915 916| 参数名 | 类型 | 必填 | 说明 | 917| -------- | ------ | ---- | ---------------- | 918| textSize | number | 是 | 字体大小，该参数为浮点数。 | 919 920**示例：** 921 922```ts 923import drawing from "@ohos.graphics.drawing" 924let font = new drawing.Font(); 925font.setSize(5); 926``` 927 928### getSize 929 930getSize(): number 931 932获取字体大小。 933 934**系统能力**：SystemCapability.Graphics.Drawing 935 936**返回值：** 937 938| 类型 | 说明 | 939| ------ | ---------------- | 940| number | 字体大小，浮点数。 | 941 942**示例：** 943 944```ts 945import drawing from "@ohos.graphics.drawing" 946let font = new drawing.Font(); 947font.setSize(5); 948font.getSize(); 949``` 950 951### setTypeface 952 953setTypeface(typeface: Typeface): void 954 955设置字体。 956 957**系统能力**：SystemCapability.Graphics.Drawing 958 959**参数：** 960 961| 参数名 | 类型 | 必填 | 说明 | 962| -------- | --------------------- | ---- | ------ | 963| typeface | [Typeface](#typeface) | 是 | 字体。 | 964 965**示例：** 966 967```ts 968import drawing from "@ohos.graphics.drawing" 969let font = new drawing.Font(); 970font.setTypeface(new drawing.Typeface()); 971``` 972 973### getTypeface 974 975getTypeface(): Typeface 976 977获取字体。 978 979**系统能力**：SystemCapability.Graphics.Drawing 980 981**返回值：** 982 983| 类型 | 说明 | 984| --------------------- | ------ | 985| [Typeface](#typeface) | 字体。 | 986 987**示例：** 988 989```ts 990import drawing from "@ohos.graphics.drawing" 991let font = new drawing.Font(); 992font.getTypeface(); 993``` 994 995### getMetrics 996 997getMetrics(): FontMetrics 998 999获取与字体关联的FontMetrics属性。 1000 1001**系统能力**：SystemCapability.Graphics.Drawing 1002 1003**返回值：** 1004 1005| 类型 | 说明 | 1006| --------------------------- | ----------------- | 1007| [FontMetrics](#fontmetrics) | FontMetrics属性。 | 1008 1009**示例：** 1010 1011```ts 1012import drawing from "@ohos.graphics.drawing" 1013let font = new drawing.Font(); 1014let metrics = font.getMetrics(); 1015``` 1016 1017### measureText 1018 1019measureText(text: string, encoding: TextEncoding): number 1020 1021测量文本的宽度。 1022 1023> **说明：** 1024> 1025> 此接口用于测量原始字符串的文本宽度，若想测量排版后的文本宽度，建议使用[measure.measureText](../apis-arkui/js-apis-measure.md#measuremeasuretext)替代。 1026 1027**系统能力**：SystemCapability.Graphics.Drawing 1028 1029**参数：** 1030 1031| 参数名 | 类型 | 必填 | 说明 | 1032| -------- | ----------------------------- | ---- | ---------- | 1033| text | string | 是 | 文本内容。 | 1034| encoding | [TextEncoding](#textencoding) | 是 | 编码格式。 | 1035 1036**返回值：** 1037 1038| 类型 | 说明 | 1039| ------ | ---------------- | 1040| number | 文本的宽度，浮点数。 | 1041 1042**示例：** 1043 1044```ts 1045import drawing from "@ohos.graphics.drawing" 1046let font = new drawing.Font(); 1047font.measureText("drawing", drawing.TextEncoding.TEXT_ENCODING_UTF8); 1048``` 1049 1050## FontMetrics 1051 1052描述字形大小和布局的属性信息，同一种字体中的字符属性大致相同。 1053 1054**系统能力：** SystemCapability.Graphics.Drawing 1055 1056| 名称 | 类型 | 可读 | 可写 | 说明 | 1057| ------- | ------ | ---- | ---- | ------------------------------------------------------------ | 1058| top | number | 是 | 是 | 文字最高处到基线之间的最大距离，浮点数。 | 1059| ascent | number | 是 | 是 | 文字最高处到基线之间的距离，浮点数。 | 1060| descent | number | 是 | 是 | 基线到文字最低处之间的距离，浮点数。 | 1061| bottom | number | 是 | 是 | 基线到文字最低处之间的最大距离，浮点数。 | 1062| leading | number | 是 | 是 | 行间距，从上一行文字descent到下一行文字ascent之间的距离，浮点数。 | 1063 1064## ColorFilter 1065 1066颜色滤波器。 1067 1068### createBlendModeColorFilter 1069 1070createBlendModeColorFilter(color: common2D.Color, mode: BlendMode) : ColorFilter 1071 1072使用指定的颜色和混合模式创建颜色滤波器。 1073 1074**系统能力：** SystemCapability.Graphics.Drawing 1075 1076**参数：** 1077 1078| 参数名 | 类型 | 必填 | 说明 | 1079| ------ | ---------------------------------------------------- | ---- | ---------------- | 1080| color | [common2D.Color](js-apis-graphics-common2D.md#color) | 是 | ARGB格式的颜色。 | 1081| mode | [BlendMode](#blendmode) | 是 | 颜色的混合模式。 | 1082 1083**返回值：** 1084 1085| 类型 | 说明 | 1086| --------------------------- | ------------------ | 1087| [ColorFilter](#colorfilter) | 返回一个颜色滤波器 | 1088 1089**示例：** 1090 1091```ts 1092import drawing from "@ohos.graphics.drawing" 1093import common2D from "@ohos.graphics.common2D" 1094const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 1095let colorFilter = drawing.ColorFilter.createBlendModeColorFilter(color, drawing.BlendMode.SRC); 1096``` 1097 1098### createComposeColorFilter 1099 1100createComposeColorFilter(outer: ColorFilter, inner: ColorFilter) : ColorFilter 1101 1102创建一个先应用inner进行滤波，再应用outer进行滤波的组合颜色滤波器。 1103 1104**系统能力：** SystemCapability.Graphics.Drawing 1105 1106**参数：** 1107 1108| 参数名 | 类型 | 必填 | 说明 | 1109| ------ | --------------------------- | ---- | -------------------------------- | 1110| outer | [ColorFilter](#colorfilter) | 是 | 组合滤波器中后生效的颜色滤波器。 | 1111| inner | [ColorFilter](#colorfilter) | 是 | 组合滤波器中先生效的颜色滤波器。 | 1112 1113**返回值：** 1114 1115| 类型 | 说明 | 1116| --------------------------- | ------------------ | 1117| [ColorFilter](#colorfilter) | 返回一个颜色滤波器 | 1118 1119**示例：** 1120 1121```ts 1122import drawing from "@ohos.graphics.drawing" 1123import common2D from "@ohos.graphics.common2D" 1124const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 1125let colorFilter1 = drawing.ColorFilter.createBlendModeColorFilter(color, drawing.BlendMode.SRC); 1126let colorFilter2 = drawing.ColorFilter.createBlendModeColorFilter(color, drawing.BlendMode.DST); 1127let colorFilter = drawing.ColorFilter.createComposeColorFilter(colorFilter1, colorFilter2); 1128``` 1129 1130### createLinearToSRGBGamma 1131 1132createLinearToSRGBGamma() : ColorFilter 1133 1134创建一个从线性颜色空间转换到SRGB颜色空间的颜色滤波器。 1135 1136**系统能力：** SystemCapability.Graphics.Drawing 1137 1138**返回值：** 1139 1140| 类型 | 说明 | 1141| --------------------------- | ------------------ | 1142| [ColorFilter](#colorfilter) | 返回一个颜色滤波器 | 1143 1144**示例：** 1145 1146```ts 1147import drawing from "@ohos.graphics.drawing" 1148let colorFilter = drawing.ColorFilter.createLinearToSRGBGamma(); 1149``` 1150 1151### createSRGBGammaToLinear 1152 1153createSRGBGammaToLinear() : ColorFilter 1154 1155创建一个从SRGB颜色空间转换到线性颜色空间的颜色滤波器。 1156 1157**系统能力：** SystemCapability.Graphics.Drawing 1158 1159**返回值：** 1160 1161| 类型 | 说明 | 1162| --------------------------- | ------------------ | 1163| [ColorFilter](#colorfilter) | 返回一个颜色滤波器 | 1164 1165**示例：** 1166 1167```ts 1168import drawing from "@ohos.graphics.drawing" 1169let colorFilter = drawing.ColorFilter.createSRGBGammaToLinear(); 1170``` 1171 1172### createLumaColorFilter 1173 1174createLumaColorFilter() : ColorFilter 1175 1176创建一个将亮度与透明度相乘的颜色滤波器。 1177 1178**系统能力：** SystemCapability.Graphics.Drawing 1179 1180**返回值：** 1181 1182| 类型 | 说明 | 1183| --------------------------- | ------------------ | 1184| [ColorFilter](#colorfilter) | 返回一个颜色滤波器 | 1185 1186**示例：** 1187 1188```ts 1189import drawing from "@ohos.graphics.drawing" 1190let colorFilter = drawing.ColorFilter.createLumaColorFilter(); 1191``` 1192 1193## Pen 1194 1195画笔对象，用于描述所绘制图形形状的轮廓信息。 1196 1197### setColor 1198 1199setColor(color: common2D.Color) : void 1200 1201用于设置画笔的颜色。 1202 1203**系统能力：** SystemCapability.Graphics.Drawing 1204 1205**参数：** 1206 1207| 参数名 | 类型 | 必填 | 说明 | 1208| ------ | ---------------------------------------------------- | ---- | ---------------- | 1209| color | [common2D.Color](js-apis-graphics-common2D.md#color) | 是 | ARGB格式的颜色。 | 1210 1211**示例：** 1212 1213```ts 1214import drawing from "@ohos.graphics.drawing" 1215import common2D from "@ohos.graphics.common2D" 1216const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 1217const pen = new drawing.Pen(); 1218pen.setColor(color); 1219``` 1220 1221### setStrokeWidth 1222 1223setStrokeWidth(width: number) : void 1224 1225用于设置画笔的线宽。 1226 1227**系统能力：** SystemCapability.Graphics.Drawing 1228 1229**参数：** 1230 1231| 参数名 | 类型 | 必填 | 说明 | 1232| ------ | ------ | ---- | ---------------- | 1233| width | number | 是 | 表示线宽，该参数为浮点数。 | 1234 1235**示例：** 1236 1237```ts 1238import drawing from "@ohos.graphics.drawing" 1239const pen = new drawing.Pen(); 1240pen.setStrokeWidth(5); 1241``` 1242 1243### setAntiAlias 1244 1245setAntiAlias(aa: boolean) : void 1246 1247用于设置画笔是否开启反走样。开启后，可以使得图形的边缘在显示时更平滑。 1248 1249**系统能力：** SystemCapability.Graphics.Drawing 1250 1251**参数：** 1252 1253| 参数名 | 类型 | 必填 | 说明 | 1254| ------ | ------- | ---- | ------------------------------------------------- | 1255| aa | boolean | 是 | 表示是否开启反走样。true表示开启，false表示关闭。 | 1256 1257**示例：** 1258 1259```ts 1260import drawing from "@ohos.graphics.drawing" 1261const pen = new drawing.Pen(); 1262pen.setAntiAlias(true); 1263``` 1264 1265### setAlpha 1266 1267setAlpha(alpha: number) : void 1268 1269用于设置画笔的透明度。 1270 1271**系统能力：** SystemCapability.Graphics.Drawing 1272 1273**参数：** 1274 1275| 参数名 | 类型 | 必填 | 说明 | 1276| ------ | ------ | ---- | ---------------------------------------- | 1277| alpha | number | 是 | 用于表示透明度的[0, 255]区间内的整数值，传入浮点类型时向下取整。 | 1278 1279**示例：** 1280 1281```ts 1282import drawing from "@ohos.graphics.drawing" 1283const pen = new drawing.Pen(); 1284pen.setAlpha(128); 1285``` 1286 1287### setColorFilter 1288 1289setColorFilter(filter: ColorFilter) : void 1290 1291用于给画笔添加额外的颜色滤波器。 1292 1293**系统能力：** SystemCapability.Graphics.Drawing 1294 1295**参数：** 1296 1297| 参数名 | 类型 | 必填 | 说明 | 1298| ------ | --------------------------- | ---- | ------------ | 1299| filter | [ColorFilter](#colorfilter) | 是 | 颜色滤波器。 | 1300 1301**示例：** 1302 1303```ts 1304import drawing from "@ohos.graphics.drawing" 1305const pen = new drawing.Pen(); 1306let colorFilter = drawing.ColorFilter.createLinearToSRGBGamma(); 1307pen.setColorFilter(colorFilter); 1308``` 1309 1310### setBlendMode 1311 1312setBlendMode(mode: BlendMode) : void 1313 1314用于设置画笔的混合模式。 1315 1316**系统能力：** SystemCapability.Graphics.Drawing 1317 1318**参数：** 1319 1320| 参数名 | 类型 | 必填 | 说明 | 1321| ------ | ----------------------- | ---- | ---------------- | 1322| mode | [BlendMode](#blendmode) | 是 | 颜色的混合模式。 | 1323 1324**示例：** 1325 1326```ts 1327import drawing from "@ohos.graphics.drawing" 1328const pen = new drawing.Pen(); 1329pen.setBlendMode(drawing.BlendMode.SRC); 1330``` 1331 1332### setDither 1333 1334setDither(dither: boolean) : void 1335 1336开启画笔的抖动绘制效果。抖动绘制可以使得绘制出的颜色更加真实。 1337 1338**系统能力：** SystemCapability.Graphics.Drawing 1339 1340**参数：** 1341 1342| 参数名 | 类型 | 必填 | 说明 | 1343| ------ | ------- | ---- | --------------------------------------------------------- | 1344| dither | boolean | 是 | 是否开启画笔的抖动绘制效果。true表示开启，false表示关闭。 | 1345 1346**示例：** 1347 1348```ts 1349import drawing from "@ohos.graphics.drawing" 1350const pen = new drawing.Pen(); 1351pen.setDither(true); 1352``` 1353 1354## Brush 1355 1356画刷对象，用于描述所绘制图形的填充信息。 1357 1358### setColor 1359 1360setColor(color: common2D.Color) : void 1361 1362用于设置画刷的颜色。 1363 1364**系统能力：** SystemCapability.Graphics.Drawing 1365 1366**参数：** 1367 1368| 参数名 | 类型 | 必填 | 说明 | 1369| ------ | ---------------------------------------------------- | ---- | ---------------- | 1370| color | [common2D.Color](js-apis-graphics-common2D.md#color) | 是 | ARGB格式的颜色。 | 1371 1372**示例：** 1373 1374```ts 1375import drawing from "@ohos.graphics.drawing" 1376import common2D from "@ohos.graphics.common2D" 1377const color : common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 }; 1378const brush = new drawing.Brush(); 1379brush.setColor(color); 1380``` 1381 1382### setAntiAlias 1383 1384setAntiAlias(aa: boolean) : void 1385 1386用于设置画刷是否开启反走样。开启后，可以使得图形的边缘在显示时更平滑。 1387 1388**系统能力：** SystemCapability.Graphics.Drawing 1389 1390**参数：** 1391 1392| 参数名 | 类型 | 必填 | 说明 | 1393| ------ | ------- | ---- | ------------------------------------------------- | 1394| aa | boolean | 是 | 表示是否开启反走样。true表示开启，false表示关闭。 | 1395 1396**示例：** 1397 1398```ts 1399import drawing from "@ohos.graphics.drawing" 1400const brush = new drawing.Brush(); 1401brush.setAntiAlias(true); 1402``` 1403 1404### setAlpha 1405 1406setAlpha(alpha: number) : void 1407 1408用于设置画刷的透明度。 1409 1410**系统能力：** SystemCapability.Graphics.Drawing 1411 1412**参数：** 1413 1414| 参数名 | 类型 | 必填 | 说明 | 1415| ------ | ------ | ---- | ---------------------------------------- | 1416| alpha | number | 是 | 用于表示透明度的[0, 255]区间内的整数值，传入浮点类型时向下取整。 | 1417 1418**示例：** 1419 1420```ts 1421import drawing from "@ohos.graphics.drawing" 1422const brush = new drawing.Brush(); 1423brush.setAlpha(128); 1424``` 1425 1426### setColorFilter 1427 1428setColorFilter(filter: ColorFilter) : void 1429 1430用于给画刷添加额外的颜色滤波器。 1431 1432**系统能力：** SystemCapability.Graphics.Drawing 1433 1434**参数：** 1435 1436| 参数名 | 类型 | 必填 | 说明 | 1437| ------ | --------------------------- | ---- | ------------ | 1438| filter | [ColorFilter](#colorfilter) | 是 | 颜色滤波器。 | 1439 1440**示例：** 1441 1442```ts 1443import drawing from "@ohos.graphics.drawing" 1444const brush = new drawing.Brush(); 1445let colorFilter = drawing.ColorFilter.createLinearToSRGBGamma(); 1446brush.setColorFilter(colorFilter); 1447``` 1448 1449### setBlendMode 1450 1451setBlendMode(mode: BlendMode) : void 1452 1453用于设置画刷的混合模式。 1454 1455**系统能力：** SystemCapability.Graphics.Drawing 1456 1457**参数：** 1458 1459| 参数名 | 类型 | 必填 | 说明 | 1460| ------ | ----------------------- | ---- | ---------------- | 1461| mode | [BlendMode](#blendmode) | 是 | 颜色的混合模式。 | 1462 1463**示例：** 1464 1465```ts 1466import drawing from "@ohos.graphics.drawing" 1467const brush = new drawing.Brush(); 1468brush.setBlendMode(drawing.BlendMode.SRC); 1469```