HarmonyOS Development: Canvas Brush

Foreword

this article is based on Api13

in the previous article, we mainly made an overview of the Pen object, knowing that the Pen object is mainly used to modify the outline information of the drawing graph. If you want to achieve a solid effect, you must need Brush object.

Let's take the previous case code as a demonstration and use the Brush object to achieve a color modification effect:

@Entry
@Component
struct DemoPage {
private context: DrawingRenderingContext = new DrawingRenderingContext()
build() {
Canvas(this.context)
.width("100%")
.height("100%")
.onReady(() => {
//Create Brush Object
const brush = new drawing.Brush()
//Set ARGB format color settings
brush.setColor(255, 255, 0, 0)
//Bind the paintbrush to the canvas
this.context.canvas.attachBrush(brush)
//Draw a circle
this.context.canvas.drawCircle(200, 200, 100)
//Invalidate the component and trigger its re rendering.
this.context.invalidate()
})
}
}

the effect is as follows:

it can be seen from the above that there is a clear difference between the Pen object and the Pen object is a border, and what is drawn here is a solid.

Brush object

consistent with the implementation of Pen objects, they are created by new and are mainly used describes fill information for the drawing.

const brush = new drawing.Brush()

Brush object Primary Methods

set brush color

consistent with the Pen object, setting the brush color provides two methods:

one is in the form of a common2D.Color object.

 setColor(color: common2D.Color): void;

One is set directly the ARGB format color.

 setColor(alpha: number, red: number, green: number, blue: number): void;

Also like the Pen object, because the performance is better than the first one, it is recommended to use the second one directly in future development.

Let's change the color of the case in the foreword:

//Create Brush Object
const brush = new drawing.Brush()
//Set ARGB format color settings
brush.setColor(100, 200, 100, 0)
//Bind the paintbrush to the canvas
this.context.canvas.attachBrush(brush)
//Draw a circle
this.context.canvas.drawCircle(200, 200, 100)
//Invalidate the component and trigger its re rendering.
this.context.invalidate()

as you can see, the color has changed:

Whether to enable anti-aliasing setAntiAlias

consistent with the Pen object, both pass setAntiAlias sets anti-aliasing, which can make the edges of the graph smoother when displayed.

We can look at the effect comparison, not open:

set anti-aliasing:

brush.setAntiAlias(true)

look at the effect, obviously smooth a lot.

Set transparency setAlpha

by setAlpha Sets the transparency of the brush, and the parameter selects an integer value in the interval [0, 255].

For example, I set the transparency to 60.

brush.setAlpha(30)

Let's look at the effect:

in addition to the above methods, there are some methods that are not commonly used. Let's make a brief summary together.

Method	parameters	overview
setColorFilter	ColorFilter	use to add an additional mask filter to the brush.
setMaskFilter	MaskFilter	use to add an additional mask filter to the brush.
shaderEffect	ShaderEffect	sets the brush shader effect.
setShadowLayer	ShadowLayer	the shadow layer object. null to clear the shadow layer effect.
setBlendMode	BlendMode	sets the blending mode of the brush.
setJoinStyle	JoinStyle	sets the style for the brush to paint corners.
setImageFilter	ImageFilter/null	sets the image filter for the brush.

In addition to setting some properties, it also provides some methods to get some properties.

Method	return Value	overview
getMiterLimit	number	gets the limit value for the sharp corner of a polyline.
getColorFilter	ColorFilter	gets the color filter for the brush.
getColor	common2D.Color	gets the color of the brush.
isAntiAlias	boolean	gets whether the brush has anti-aliasing on.
getAlpha	number	gets the transparency of the brush.
reset	void	resets the current brush to its initial state.

Related Summary

Brush objects are primarily used to draw fill information for graphics , can modify the color, whether anti-aliasing, transparency and other attributes, compared with the Pen object, a few less attributes, but basically also meet the daily needs.