Graphics

The Graphics module provides APIs for defining attributes of a custom node.

NOTE

The initial APIs of this module are supported since API version 11. Newly added APIs will be marked with a superscript to indicate their earliest API version.

Modules to Import

import { DrawContext, Size, Offset, Position, Pivot, Scale, Translation, Matrix4, Rotation, Frame, LengthMetricsUnit } from "@kit.ArkUI";

Size

Returns the width and height of the component. The default unit is vp, but APIs that use the Size type may specify a different unit, in which case the unit specified by the API takes precedence.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Readable	Writable	Description
width	number	Yes	Yes	Width of the component. Unit: vp. Value range: [0, +∞).
height	number	Yes	Yes	Height of the component. Unit: vp. Value range: [0, +∞).

Position

type Position = Vector2

Sets or returns the position of the component.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Type	Description
Vector2	A vector that contains two values: x and y. Unit: vp.

PositionT¹²⁺

type PositionT<T> = Vector2T<T>

Sets or returns the position of the component.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Type	Description
Vector2T<T>	A vector that contains two values: x and y. Unit: vp.

Frame

Sets or returns the layout size and position of the component.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Read Only	Optional	Description
x	number	Yes	Yes	Horizontal position. Unit: vp. Value range: (-∞, +∞).
y	number	Yes	Yes	Vertical position. Unit: vp. Value range: (-∞, +∞).
width	number	Yes	Yes	Component width. Unit: vp. Value range: [0, +∞).
height	number	Yes	Yes	Component height. Unit: vp. Value range: [0, +∞).

Pivot

type Pivot = Vector2

Sets the pivot of the component. As the rotation or scaling center of the component, the pivot affects the rotation and scaling effects.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Type	Description
Vector2	X and Y coordinates of the pivot. The value is a floating point number in the range [0.0, 1.0], and the default value is 0.5.

Scale

type Scale = Vector2

Sets the scale factor of the component.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Type	Description
Vector2	Scale factor along the x- and y-axis. The value is a floating point number, and the default value is 1.0.

Translation

type Translation = Vector2

Sets the translation amount of the component.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Type	Description
Vector2	Translation amount along the x- and y-axis. Unit: px

Rotation

type Rotation = Vector3

Sets the rotation angle of the component.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Type	Description
Vector3	Rotation angle along the x- and y-axis. Unit: degree

Offset

type Offset = Vector2

Sets the offset of the component or effect.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Type	Description
Vector2	Offset along the x- and y-axis. Unit: vp.

Matrix4

type Matrix4 = [number,number,number,number,number,number,number,number,number,number,number,number,number,number,number,number]

Sets a 4x4 matrix.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Type	Description
[number,number,number,number, number,number,number,number, number,number,number,number, number,number,number,number]	A 16-element array representing a 4x4 matrix. Value range of each number: (-∞, +∞)

The Matrix4 type is used to set transformation information for components. The following is an example:

const transform: Matrix4 = [
  1, 0, 45, 0,
  0, 1,  0, 0,
  0, 0,  1, 0,
  0, 0,  0, 1
]

Vector2

Defines a vector that contains the x and y coordinate values.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Read Only	Optional	Description
x	number	No	No	X coordinate value of the vector. Value range: (-∞, +∞).
y	number	No	No	Y coordinate value of the vector. Value range: (-∞, +∞).

Vector3

Represents a vector including three values: x, y, and z.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Read Only	Optional	Description
x	number	No	No	Rotation angle along the x-axis. Value range: (-∞, +∞).
y	number	No	No	Rotation angle along the y-axis. Value range: (-∞, +∞).
z	number	No	No	Rotation angle along the z-axis. Value range: (-∞, +∞).

Vector2T<T>¹²⁺

Represents a vector of the T type that contains two values: x and y.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Read Only	Optional	Description
x	T	No	No	X coordinate value of the vector.
y	T	No	No	Y coordinate value of the vector.

DrawContext

Graphics drawing context, which provides the canvas width and height required for drawing.

size

get size(): Size

Obtains the width and height of the canvas.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

Type	Description
Size	Width and height of the canvas.

sizeInPixel¹²⁺

get sizeInPixel(): Size

Obtains the width and height of the canvas in px.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

Type	Description
Size	Width and height of the canvas, in px.

canvas

get canvas(): drawing.Canvas

Obtains the canvas used for drawing.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

Type	Description
drawing.Canvas	Canvas for drawing.

Example

import { RenderNode, FrameNode, NodeController, DrawContext } from "@kit.ArkUI";

class MyRenderNode extends RenderNode {
  flag: boolean = false;

  draw(context: DrawContext) {
    const size = context.size;
    const canvas = context.canvas;
    const sizeInPixel = context.sizeInPixel;
  }
}

const renderNode = new MyRenderNode();
renderNode.frame = { x: 0, y: 0, width: 100, height: 100 };
renderNode.backgroundColor = 0xffff0000;

class MyNodeController extends NodeController {
  private rootNode: FrameNode|null = null;

  makeNode(uiContext: UIContext): FrameNode|null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}

Edges<T>¹²⁺

Describes the edges.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Readable	Writable	Description
left	T	Yes	Yes	Left edge.
top	T	Yes	Yes	Top edge.
right	T	Yes	Yes	Right edge.
bottom	T	Yes	Yes	Bottom edge.

LengthUnit¹²⁺

Enumerates length units.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Value	Description
PX	0	Length in px.
VP	1	Length in vp.
FP	2	Length in fp.
PERCENT	3	Length in percentage.
LPX	4	Length in lpx.

SizeT<T>¹²⁺

Sets the width and height attributes.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Readable	Writable	Description
width	T	Yes	Yes	Width.
height	T	Yes	Yes	Height.

LengthMetricsUnit¹²⁺

Enumerates length units.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Value	Description
DEFAULT	0	Length in vp.
PX	1	Length in px.

LengthMetrics¹²⁺

Defines the length properties. When the length unit is PERCENT, the value 1 indicates 100%.

Properties

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Readable	Writable	Description
value	number	Yes	Yes	Value of the length property.
unit	LengthUnit	Yes	Yes	Unit of the length property. The default value is VP.

constructor¹²⁺

constructor(value: number, unit?: LengthUnit)

A constructor used to create a LengthMetrics instance. If the unit parameter is omitted or explicitly set to undefined, the default unit VP is used. If it is set to a value that is not of the LengthUnit type, the default value 0 VP is used.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number	Yes	Value of the length property. Value range: [0, +∞).
unit	LengthUnit	No	Unit of the length property.

px¹²⁺

static px(value: number): LengthMetrics

Creates a length property in px.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number	Yes	Value of the length property. Value range: (-∞, +∞).

Return value

Type	Description
LengthMetrics	Instance of the LengthMetrics class.

vp¹²⁺

static vp(value: number): LengthMetrics

Creates a length property in vp.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number	Yes	Value of the length property. Value range: (-∞, +∞).

Return value

Type	Description
LengthMetrics	Instance of the LengthMetrics class.

fp¹²⁺

static fp(value: number): LengthMetrics

Creates a length property in fp.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number	Yes	Value of the length property. Value range: (-∞, +∞).

Return value

Type	Description
LengthMetrics	Instance of the LengthMetrics class.

percent¹²⁺

static percent(value: number): LengthMetrics

Creates a length property in percent. The value 1 indicates 100%.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number	Yes	Value of the length property. Value range: [0, 1].

Return value

Type	Description
LengthMetrics	Instance of the LengthMetrics class.

lpx¹²⁺

static lpx(value: number): LengthMetrics

Creates a length property in lpx.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number	Yes	Value of the length property. Value range: (-∞, +∞).

Return value

Type	Description
LengthMetrics	Instance of the LengthMetrics class.

resource¹²⁺

static resource(value: Resource): LengthMetrics

Represents the length of a resource of the Resource type.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	Resource	Yes	Value of the length property.

Return value

Type	Description
LengthMetrics	Instance of the LengthMetrics class.

Error codes

For details about the error codes, see Universal Error Codes and System Resource Error Codes.

ID	Error Message
180001	System resources does not exist.
180002	The type of system resources is incorrect.

ColorMetrics¹²⁺

Used to mix colors.

System capability: SystemCapability.ArkUI.ArkUI.Full

numeric¹²⁺

static numeric(value: number): ColorMetrics

Instantiates the ColorMetrics class using a color in HEX format.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number	Yes	Color in HEX format. RGB and ARGB color values are supported.

Return value

Type	Description
ColorMetrics	Instance of the ColorMetrics class.

rgba¹²⁺

static rgba(red: number, green: number, blue: number, alpha?: number): ColorMetrics

Instantiates the ColorMetrics class using colors in RGB or RGBA format.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
red	number	Yes	Red component of the color. The value is an integer ranging from 0 to 255.
green	number	Yes	Green component of the color. The value is an integer ranging from 0 to 255.
blue	number	Yes	Blue component of the color. The value is an integer ranging from 0 to 255.
alpha	number	No	Alpha component of the color. The value is a floating point number ranging from 0.0 to 1.0. The default value is 1.0 (fully opaque).

Return value

Type	Description
ColorMetrics	Instance of the ColorMetrics class.

resourceColor¹²⁺

static resourceColor(color: ResourceColor): ColorMetrics

Instantiates the ColorMetrics class using a color in resource reference format.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
color	ResourceColor	Yes	Color in resource reference format.

Return value

Type	Description
ColorMetrics	Instance of the ColorMetrics class.

Error codes

For details about the error codes, see Universal Error Codes and System Resource Error Codes.

ID	Error Message
401	Parameter error. Possible cause:1.The type of the input color parameter is not ResourceColor;2.The format of the input color string is not RGB or RGBA.
180003	Failed to obtain the color resource.

blendColor¹²⁺

blendColor(overlayColor: ColorMetrics): ColorMetrics

Blends colors.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
overlayColor	ColorMetrics	Yes	Instance of the ColorMetrics class for overlaying colors.

Return value

Type	Description
ColorMetrics	Instance of the ColorMetrics class after color blending.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error. The type of the input parameter is not ColorMetrics.

color¹²⁺

get color(): string

Obtains the color of ColorMetrics. The return value is a string indicating an RGBA color value.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

Type	Description
string	String indicating an RGBA color value. Example: 'rgba(255, 100, 255, 0.5)'

red¹²⁺

get red(): number

Obtains the red component of the ColorMetrics color.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

Type	Description
number	Red component of the color. The value is an integer ranging from 0 to 255.

green¹²⁺

get green(): number

Obtains the green component of the ColorMetrics color.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

Type	Description
number	Green component of the color. The value is an integer ranging from 0 to 255.

blue¹²⁺

get blue(): number

Obtains the blue component of the ColorMetrics color.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

Type	Description
number	Blue component of the color. The value is an integer ranging from 0 to 255.

alpha¹²⁺

get alpha(): number

Obtains the alpha component of the ColorMetrics color.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

Type	Description
number	Alpha component of the color. The value is an integer ranging from 0 to 255.

Example

import { ColorMetrics } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

function getBlendColor(baseColor: ResourceColor): ColorMetrics {
  let sourceColor: ColorMetrics;
  try {
    // When resourceColor and blendColor of ColorMetrics are used, add exception handling.
    // Error codes 401 and 180003 of the ArkUI subsystem may be returned.
    sourceColor = ColorMetrics.resourceColor(baseColor).blendColor(ColorMetrics.resourceColor("#19000000"));
  } catch (error) {
    console.log("getBlendColor failed, code = " + (error as BusinessError).code + ", message = " +
    (error as BusinessError).message);
    sourceColor = ColorMetrics.resourceColor("#19000000");
  }
  return sourceColor;
}

@Entry
@Component
struct ColorMetricsSample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button("ColorMetrics")
        .width('80%')
        .align(Alignment.Center)
        .height(50)
        .backgroundColor(getBlendColor(Color.Red).color)
    }
    .width('100%')
    .height('100%')
  }
}

Corners<T>¹²⁺

Describes the four corners.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Readable	Writable	Description
topLeft	T	Yes	Yes	Radius of the upper left corner.
topRight	T	Yes	Yes	Radius of the upper right corner.
bottomLeft	T	Yes	Yes	Radius of the lower left corner.
bottomRight	T	Yes	Yes	Radius of the lower right corner.

CornerRadius¹²⁺

type CornerRadius = Corners<Vector2>

Sets the radius for the four corners.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Type	Description
Corners <Vector2>	Radius of the four corners.

BorderRadiuses¹²⁺

type BorderRadiuses = Corners<number>

Sets the radius for the four border corners.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Type	Description
Corners<number>	Radius of the four border corners.

Rect¹²⁺

type Rect = common2D.Rect

Describes a rectangle.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Type	Description
common2D.Rect	Rectangle.

RoundRect¹²⁺

Describes a rectangle with rounded corners.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Readable	Writable	Description
rect	Rect	Yes	Yes	Attributes of the rectangle.
corners	CornerRadius	Yes	Yes	Attributes of rounded corners.

Circle¹²⁺

Describes a circle.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Readable	Writable	Description
centerX	number	Yes	Yes	X coordinate of the center of the circle, in px.
centerY	number	Yes	Yes	Y coordinate of the center of the circle, in px.
radius	number	Yes	Yes	Radius of the circle, in px. Value range: [0, +∞).

CommandPath¹²⁺

Describes the command for drawing a path.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Readable	Writable	Description
commands	string	Yes	Yes	Commands for drawing a path. For details about how to convert the pixel unit, see Pixel Unit Conversion. Unit: px

ShapeMask¹²⁺

Describes the shape mask.

constructor¹²⁺

constructor()

A constructor used to create a ShapeMask instance.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

setRectShape¹²⁺

setRectShape(rect: Rect): void

Sets a rectangle mask.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
rect	Rect	Yes	Shape of the rectangle.

Example

import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI';

class MyNodeController extends NodeController {
  private rootNode: FrameNode|null = null;

  makeNode(uiContext: UIContext): FrameNode|null {
    this.rootNode = new FrameNode(uiContext);

    const mask = new ShapeMask();
    mask.setRectShape({ left: 0, right: uiContext.vp2px(150), top: 0, bottom: uiContext.vp2px(150) });
    mask.fillColor = 0X55FF0000;

    const renderNode = new RenderNode();
    renderNode.frame = { x: 0, y: 0, width: 150, height: 150 };
    renderNode.backgroundColor = 0XFF00FF00;
    renderNode.shapeMask = mask;

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}

setRoundRectShape¹²⁺

setRoundRectShape(roundRect: RoundRect): void

Sets the mask in the shape of a rectangle with rounded corners.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
roundRect	RoundRect	Yes	Shape of the rectangle with rounded corners.

Example

import { RenderNode, FrameNode, NodeController, ShapeMask,RoundRect} from '@kit.ArkUI';

class MyNodeController extends NodeController {
  private rootNode: FrameNode|null = null;

  makeNode(uiContext: UIContext): FrameNode|null {
    this.rootNode = new FrameNode(uiContext);

    const mask = new ShapeMask();
    const roundRect: RoundRect = {
      rect: { left: 0, top: 0, right: uiContext.vp2px(150), bottom: uiContext.vp2px(150) },
      corners: {
        topLeft: { x: 32, y: 32 },
        topRight: { x: 32, y: 32 },
        bottomLeft: { x: 32, y: 32 },
        bottomRight: { x: 32, y: 32 }
      }
    }
    mask.setRoundRectShape(roundRect);
    mask.fillColor = 0X55FF0000;

    const renderNode = new RenderNode();
    renderNode.frame = { x: 0, y: 0, width: 150, height: 150 };
    renderNode.backgroundColor = 0XFF00FF00;
    renderNode.shapeMask = mask;

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}

setCircleShape¹²⁺

setCircleShape(circle: Circle): void

Sets a round mask.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
circle	Circle	Yes	Round shape.

Example

import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI';

class MyNodeController extends NodeController {
  private rootNode: FrameNode|null = null;

  makeNode(uiContext: UIContext): FrameNode|null {
    this.rootNode = new FrameNode(uiContext);

    const mask = new ShapeMask();
    mask.setCircleShape({ centerY: uiContext.vp2px(75), centerX: uiContext.vp2px(75), radius: uiContext.vp2px(75) });
    mask.fillColor = 0X55FF0000;

    const renderNode = new RenderNode();
    renderNode.frame = { x: 0, y: 0, width: 150, height: 150 };
    renderNode.backgroundColor = 0XFF00FF00;
    renderNode.shapeMask = mask;

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}

setOvalShape¹²⁺

setOvalShape(oval: Rect): void

Sets an oval mask.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
oval	Rect	Yes	Oval shape.

Example

import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI';

class MyNodeController extends NodeController {
  private rootNode: FrameNode|null = null;

  makeNode(uiContext: UIContext): FrameNode|null {
    this.rootNode = new FrameNode(uiContext);

    const mask = new ShapeMask();
    mask.setOvalShape({ left: 0, right: uiContext.vp2px(150), top: 0, bottom: uiContext.vp2px(100) });
    mask.fillColor = 0X55FF0000;

    const renderNode = new RenderNode();
    renderNode.frame = { x: 0, y: 0, width: 150, height: 150 };
    renderNode.backgroundColor = 0XFF00FF00;
    renderNode.shapeMask = mask;

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}

setCommandPath¹²⁺

setCommandPath(path: CommandPath): void

Sets the command for drawing a path.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
path	CommandPath	Yes	Command for drawing a path.

Example

import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI';

const mask = new ShapeMask();
mask.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" });
mask.fillColor = 0X55FF0000;

const renderNode = new RenderNode();
renderNode.frame = { x: 0, y: 0, width: 150, height: 150 };
renderNode.backgroundColor = 0XFF00FF00;
renderNode.shapeMask = mask;


class MyNodeController extends NodeController {
  private rootNode: FrameNode|null = null;

  makeNode(uiContext: UIContext): FrameNode|null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}

fillColor¹²⁺

fillColor: number

Describes the fill color of the mask, in ARGB format. The default value is 0XFF000000.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Example

import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI';

const mask = new ShapeMask();
mask.setRectShape({ left: 0, right: 150, top: 0, bottom: 150 });
mask.fillColor = 0X55FF0000;

const renderNode = new RenderNode();
renderNode.frame = { x: 0, y: 0, width: 150, height: 150 };
renderNode.backgroundColor = 0XFF00FF00;
renderNode.shapeMask = mask;


class MyNodeController extends NodeController {
  private rootNode: FrameNode|null = null;

  makeNode(uiContext: UIContext): FrameNode|null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}

strokeColor¹²⁺

strokeColor: number

Sets the stroke color for the mask, in ARGB format. The default value is 0XFF000000.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Example

import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI';

const mask = new ShapeMask();
mask.setRectShape({ left: 0, right: 150, top: 0, bottom: 150 });
mask.strokeColor = 0XFFFF0000;
mask.strokeWidth = 24;

const renderNode = new RenderNode();
renderNode.frame = { x: 0, y: 0, width: 150, height: 150 };
renderNode.backgroundColor = 0XFF00FF00;
renderNode.shapeMask = mask;


class MyNodeController extends NodeController {
  private rootNode: FrameNode|null = null;

  makeNode(uiContext: UIContext): FrameNode|null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}

strokeWidth¹²⁺

strokeWidth: number

Sets the stroke width for the mask, in px. The default value is 0.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Example

import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI';

const mask = new ShapeMask();
mask.setRectShape({ left: 0, right: 150, top: 0, bottom: 150 });
mask.strokeColor = 0XFFFF0000;
mask.strokeWidth = 24;

const renderNode = new RenderNode();
renderNode.frame = { x: 0, y: 0, width: 150, height: 150 };
renderNode.backgroundColor = 0XFF00FF00;
renderNode.shapeMask = mask;


class MyNodeController extends NodeController {
  private rootNode: FrameNode|null = null;

  makeNode(uiContext: UIContext): FrameNode|null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}

ShapeClip¹²⁺

Sets the clipping shape.

constructor¹²⁺

constructor()

A constructor used to create a ShapeClip object.

System capability: SystemCapability.ArkUI.ArkUI.Full

Atomic service API: This API can be used in atomic services since API version 12.

setRectShape¹²⁺

setRectShape(rect: Rect): void

Sets a rectangle as the clipping shape.

System capability: SystemCapability.ArkUI.ArkUI.Full

Atomic service API: This API can be used in atomic services since API version 12.

Parameters

Name	Type	Mandatory	Description
rect	Rect	Yes	Shape of the rectangle.

Example

import { RenderNode, FrameNode, NodeController, ShapeClip } from '@kit.ArkUI';

const clip = new ShapeClip();
clip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" });

const renderNode = new RenderNode();
renderNode.frame = {
  x: 0,
  y: 0,
  width: 150,
  height: 150
};
renderNode.backgroundColor = 0XFF00FF00;
renderNode.shapeClip = clip;
const shapeClip = renderNode.shapeClip;

class MyNodeController extends NodeController {
  private rootNode: FrameNode|null = null;

  makeNode(uiContext: UIContext): FrameNode|null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Column() {
      NodeContainer(this.myNodeController)
        .borderWidth(1)
      Button("setRectShape")
        .onClick(() => {
          shapeClip.setRectShape({
            left: 0,
            right: 150,
            top: 0,
            bottom: 150
          });
          renderNode.shapeClip = shapeClip;
        })
    }
  }
}

setRoundRectShape¹²⁺

setRoundRectShape(roundRect: RoundRect): void

Sets a rectangle with rounded corners for shape clipping.

System capability: SystemCapability.ArkUI.ArkUI.Full

Atomic service API: This API can be used in atomic services since API version 12.

Parameters

Name	Type	Mandatory	Description
roundRect	RoundRect	Yes	Shape of the rectangle with rounded corners.

Example

import { RenderNode, FrameNode, NodeController, ShapeClip } from '@kit.ArkUI';

const clip = new ShapeClip();
clip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" });

const renderNode = new RenderNode();
renderNode.frame = {
  x: 0,
  y: 0,
  width: 150,
  height: 150
};
renderNode.backgroundColor = 0XFF00FF00;
renderNode.shapeClip = clip;

class MyNodeController extends NodeController {
  private rootNode: FrameNode|null = null;

  makeNode(uiContext: UIContext): FrameNode|null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Column() {
      NodeContainer(this.myNodeController)
        .borderWidth(1)
      Button("setRoundRectShape")
        .onClick(() => {
          renderNode.shapeClip.setRoundRectShape({
            rect: {
              left: 0,
              top: 0,
              right: this.getUIContext().vp2px(150),
              bottom: this.getUIContext().vp2px(150)
            },
            corners: {
              topLeft: { x: 32, y: 32 },
              topRight: { x: 32, y: 32 },
              bottomLeft: { x: 32, y: 32 },
              bottomRight: { x: 32, y: 32 }
            }
          });
          renderNode.shapeClip = renderNode.shapeClip;
        })
    }
  }
}

setCircleShape¹²⁺

setCircleShape(circle: Circle): void

Sets a circle as the clipping shape.

System capability: SystemCapability.ArkUI.ArkUI.Full

Atomic service API: This API can be used in atomic services since API version 12.

Parameters

Name	Type	Mandatory	Description
circle	Circle	Yes	Round shape.

Example

import { RenderNode, FrameNode, NodeController, ShapeClip } from '@kit.ArkUI';

const clip = new ShapeClip();
clip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" });

const renderNode = new RenderNode();
renderNode.frame = {
  x: 0,
  y: 0,
  width: 150,
  height: 150
};
renderNode.backgroundColor = 0XFF00FF00;
renderNode.shapeClip = clip;

class MyNodeController extends NodeController {
  private rootNode: FrameNode|null = null;

  makeNode(uiContext: UIContext): FrameNode|null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Column() {
      NodeContainer(this.myNodeController)
        .borderWidth(1)
      Button("setCircleShape")
        .onClick(() => {
          renderNode.shapeClip.setCircleShape({ centerY: 75, centerX: 75, radius: 75 });
          renderNode.shapeClip = renderNode.shapeClip;

        })
    }
  }
}

setOvalShape¹²⁺

setOvalShape(oval: Rect): void

Sets an oval shape as the clipping shape.

System capability: SystemCapability.ArkUI.ArkUI.Full

Atomic service API: This API can be used in atomic services since API version 12.

Parameters

Name	Type	Mandatory	Description
oval	Rect	Yes	Oval shape.

Example

import { RenderNode, FrameNode, NodeController, ShapeClip } from '@kit.ArkUI';

const clip = new ShapeClip();
clip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" });

const renderNode = new RenderNode();
renderNode.frame = {
  x: 0,
  y: 0,
  width: 150,
  height: 150
};
renderNode.backgroundColor = 0XFF00FF00;
renderNode.shapeClip = clip;

class MyNodeController extends NodeController {
  private rootNode: FrameNode|null = null;

  makeNode(uiContext: UIContext): FrameNode|null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Column() {
      NodeContainer(this.myNodeController)
        .borderWidth(1)
      Button("setOvalShape")
        .onClick(() => {
          renderNode.shapeClip.setOvalShape({
            left: 0,
            right: this.getUIContext().vp2px(150),
            top: 0,
            bottom: this.getUIContext().vp2px(100)
          });
          renderNode.shapeClip = renderNode.shapeClip;
        })
    }
  }
}

setCommandPath¹²⁺

setCommandPath(path: CommandPath): void

Sets the command for drawing a path.

System capability: SystemCapability.ArkUI.ArkUI.Full

Atomic service API: This API can be used in atomic services since API version 12.

Parameters

Name	Type	Mandatory	Description
path	CommandPath	Yes	Command for drawing a path.

Example

import { RenderNode, FrameNode, NodeController, ShapeClip } from '@kit.ArkUI';

const clip = new ShapeClip();
clip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" });

const renderNode = new RenderNode();
renderNode.frame = { x: 0, y: 0, width: 150, height: 150 };
renderNode.backgroundColor = 0XFF00FF00;
renderNode.shapeClip = clip;

class MyNodeController extends NodeController {
  private rootNode: FrameNode|null = null;

  makeNode(uiContext: UIContext): FrameNode|null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Column() {
      NodeContainer(this.myNodeController)
        .borderWidth(1)
      Button("setCommandPath")
        .onClick(()=>{
          renderNode.shapeClip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" });
          renderNode.shapeClip = renderNode.shapeClip;
        })
    }
  }
}

edgeColors¹²⁺

edgeColors(all: number): Edges<number>

Generates an edgeColors object with the specified edge color for all edges.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
all	number	Yes	Edge color, in ARGB format, for example, 0xffff00ff. Value range: [0, 0xffffffff]

Return value

Type	Description
Edges<number>	edgeColors object whose edge colors are all at the specified value.

Example

import { RenderNode, FrameNode, NodeController, edgeColors } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.frame = { x: 0, y: 0, width: 150, height: 150 };
renderNode.backgroundColor = 0XFF00FF00;
renderNode.borderWidth = { left: 8, top: 8, right: 8, bottom: 8 };
renderNode.borderColor = edgeColors(0xFF0000FF);


class MyNodeController extends NodeController {
  private rootNode: FrameNode|null = null;

  makeNode(uiContext: UIContext): FrameNode|null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}

edgeWidths¹²⁺

edgeWidths(all: number): Edges<number>

Generates an edgeWidths object with the specified edge width for all edges.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
all	number	Yes	Edge width, in vp. Value range: [0, +∞).

Return value

Type	Description
Edges<number>	edgeWidths object whose edge widths are all at the specified value.

Example

import { RenderNode, FrameNode, NodeController, edgeWidths } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.frame = { x: 0, y: 0, width: 150, height: 150 };
renderNode.backgroundColor = 0XFF00FF00;
renderNode.borderWidth = edgeWidths(8);
renderNode.borderColor = { left: 0xFF0000FF, top: 0xFF0000FF, right: 0xFF0000FF, bottom: 0xFF0000FF };


class MyNodeController extends NodeController {
  private rootNode: FrameNode|null = null;

  makeNode(uiContext: UIContext): FrameNode|null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}

borderStyles¹²⁺

borderStyles(all: BorderStyle): Edges<BorderStyle>

Generates a borderStyles object with the specified border style color for all borders.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
all	BorderStyle	Yes	Border style.

Return value

Type	Description
Edges<BorderStyle>	borderStyles object whose borders are all in the specified style.

Example

import { RenderNode, FrameNode, NodeController, borderStyles } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.frame = { x: 0, y: 0, width: 150, height: 150 };
renderNode.backgroundColor = 0XFF00FF00;
renderNode.borderWidth = { left: 8, top: 8, right: 8, bottom: 8 };
renderNode.borderColor = { left: 0xFF0000FF, top: 0xFF0000FF, right: 0xFF0000FF, bottom: 0xFF0000FF };
renderNode.borderStyle = borderStyles(BorderStyle.Dotted);


class MyNodeController extends NodeController {
  private rootNode: FrameNode|null = null;

  makeNode(uiContext: UIContext): FrameNode|null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}

borderRadiuses¹²⁺

borderRadiuses(all: number): BorderRadiuses

Generates a borderRadiuses object with the specified radius for all border corners.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
all	number	Yes	Radius of border corners. Unit: vp. Value range: [0, +∞).

Return value

Type	Description
BorderRadiuses	borderRadiuses object whose border corners all have the specified radius.

Example

import { RenderNode, FrameNode, NodeController, borderRadiuses }  from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.frame = { x: 0, y: 0, width: 150, height: 150 };
renderNode.backgroundColor = 0XFF00FF00;
renderNode.borderRadius = borderRadiuses(32);


class MyNodeController extends NodeController {
  private rootNode: FrameNode|null = null;

  makeNode(uiContext: UIContext): FrameNode|null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}

你可能感兴趣的鸿蒙文章

harmony 鸿蒙ArkUI

harmony 鸿蒙ARKUI_TextPickerCascadeRangeContent

harmony 鸿蒙ARKUI_TextPickerRangeContent

harmony 鸿蒙ArkUI_AnimateCompleteCallback

harmony 鸿蒙ArkUI_AttributeItem

harmony 鸿蒙ArkUI_ColorStop

harmony 鸿蒙ArkUI_ContextCallback

harmony 鸿蒙ArkUI_EventModule

harmony 鸿蒙ArkUI_ExpectedFrameRateRange

harmony 鸿蒙ArkUI_IntOffset

标签云

Graphics

Modules to Import

Size

Position

PositionT12+

Frame

Pivot

Scale

Translation

Rotation

Offset

Matrix4

Vector2

Vector3

Vector2T<T>12+

DrawContext

size

sizeInPixel12+

canvas

Edges<T>12+

LengthUnit12+

SizeT<T>12+

LengthMetricsUnit12+

LengthMetrics12+

Properties

constructor12+

px12+

vp12+

fp12+

percent12+

lpx12+

resource12+

ColorMetrics12+

numeric12+

rgba12+

resourceColor12+

blendColor12+

color12+

red12+

green12+

blue12+

alpha12+

Corners<T>12+

CornerRadius12+

BorderRadiuses12+

Rect12+

RoundRect12+

Circle12+

CommandPath12+

ShapeMask12+

constructor12+

setRectShape12+

setRoundRectShape12+

setCircleShape12+

setOvalShape12+

setCommandPath12+

fillColor12+

strokeColor12+

strokeWidth12+

ShapeClip12+

constructor12+

setRectShape12+

setRoundRectShape12+

setCircleShape12+

setOvalShape12+

setCommandPath12+

edgeColors12+

edgeWidths12+

borderStyles12+

borderRadiuses12+

你可能感兴趣的鸿蒙文章

最新博客

最热博客

PositionT¹²⁺

Vector2T<T>¹²⁺

sizeInPixel¹²⁺

Edges<T>¹²⁺

LengthUnit¹²⁺

SizeT<T>¹²⁺

LengthMetricsUnit¹²⁺

LengthMetrics¹²⁺

constructor¹²⁺

px¹²⁺

vp¹²⁺

fp¹²⁺

percent¹²⁺

lpx¹²⁺

resource¹²⁺

ColorMetrics¹²⁺

numeric¹²⁺

rgba¹²⁺

resourceColor¹²⁺

blendColor¹²⁺

color¹²⁺

red¹²⁺

green¹²⁺

blue¹²⁺

alpha¹²⁺

Corners<T>¹²⁺

CornerRadius¹²⁺

BorderRadiuses¹²⁺

Rect¹²⁺

RoundRect¹²⁺

Circle¹²⁺

CommandPath¹²⁺

ShapeMask¹²⁺

constructor¹²⁺

setRectShape¹²⁺

setRoundRectShape¹²⁺

setCircleShape¹²⁺

setOvalShape¹²⁺

setCommandPath¹²⁺

fillColor¹²⁺

strokeColor¹²⁺

strokeWidth¹²⁺

ShapeClip¹²⁺

constructor¹²⁺

setRectShape¹²⁺

setRoundRectShape¹²⁺

setCircleShape¹²⁺

setOvalShape¹²⁺

setCommandPath¹²⁺

edgeColors¹²⁺

edgeWidths¹²⁺

borderStyles¹²⁺

borderRadiuses¹²⁺