HarmonyOS Development: Canvas Brush Object Pen

Foreword

this article is based on Api13

at the end of the previous article, we left a suspense in use. When drawing, the DrawingRenderingContext object cannot change the thickness, color and other attributes of the brush. If you need to change these attributes, you must use other objects to implement them. If you modify the outline information, you can use Pen. If you fill the information, you can use Pen. The Brush object.

In this article, we mainly outline how to use Pen object to modify the drawn contour information.

Pen object

how to create it, directly through new, mainly used describes the shape of the drawing profile information .

 const pen = new drawing.Pen()

Simple Case

let's take the case in the previous article and use the pen object to change the color of the outer border:

@Entry
@Component
struct DemoPage {
  private context: DrawingRenderingContext = new DrawingRenderingContext()

  build() {
    Canvas(this.context)
      .width("100%")
      .height("100%")
      .onReady(() => {

        const pen = new drawing.Pen()

        pen.setColor(255, 255, 0, 0)

        this.context.canvas.attachPen(pen)

        this.context.canvas.drawCircle(200, 200, 100)

        this.context.invalidate()
      })
  }
}

as you can see, something has changed:

perhaps you have found that the last article was clearly a black solid circle, how to change the color and then become a circle, that is because the default brush was used in the last article and it was not created by itself, while the Pen object has already been mentioned above, mainly for describes the shape of the drawing profile information, to put it bluntly, it is the border. If you want to fill it, you needBrush object, this, we will summarize in a future article.

Main methods of the Pen object

set brush color

currently there are two ways to set the brush color:

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;

Although the color can be set, the second one is better than the first one according to the official interpretation, so it is recommended to use the second one directly in daily development.

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

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

set the line width of the brush

set the line width by setStrokeWidth. If set to 0, it will be regarded as a special very thin line width. When drawing, it will always be drawn as 1 pixel and will not change with the scaling of the canvas. Negative line width will be regarded as 0 line width when actually drawing.

In the above case, we set the line width to 5:

        pen.setStrokeWidth(5)

after running, we can see the effect and see the obvious thickening of the border.

Whether to enable anti-aliasing setAntiAlias

by 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:

        pen.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.

        pen.setAlpha(60)

Let's look at the effect:

set Cap Style setCapStyle

there are three modes to set the cap style through setCapStyle, the first is FLAT_CAP, no line cap style, crosscut at the end of the line; The second is SQUARE_CAP, the style of the line cap is a box, there is an extra box at the end of the line, the width of the box is as wide as the line segment, and the height is half of the width of the line segment. The third is ROUND_CAP. The style of the line cap is circular arc, and there is an extra semicircle at the head and tail.

pen.setCapStyle(drawing.CapStyle.SQUARE_CAP)

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
setMiterLimit	number	set the maximum ratio of the angle length to the line width of the polyline. When the brush draws a polyline and JoinStyle is MITER_JOIN, if the ratio of the angle length to the line width is greater than the limit value, the angle is drawn with BEVEL_JOIN.
setImageFilter	ImageFilter /null	sets the image filter for the brush.
setColorFilter	ColorFilter	used to add an extra color filter to the brush.
setMaskFilter	MaskFilter	use to add an additional mask filter to the brush.
setPathEffect	PathEffect	sets the brush path effect.
shaderEffect	ShaderEffect	sets the brush shader effect.
setShadowLayer	ShadowLayer	sets the brush shadow layer effect. Current only takes effect when drawing text.
setBlendMode	BlendMode	sets the blending mode of the brush.
setJoinStyle	JoinStyle	sets the style for the brush to paint corners.
setDither	boolean	turn on the brush's dithering painting effect. Jitter rendering can make the drawn color more realistic

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.
getWidth	number	gets the line width attribute of the brush, which describes the width of the outline of the figure drawn by the brush
isAntiAlias	boolean	gets whether the brush has anti-aliasing on.
getAlpha	number	gets the transparency of the brush.
getJoinStyle	JoinStyle	used to get the style in which the brush paints the corner.
getCapStyle	CapStyle	Gets the cap style for the brush.
getFillPath	boolean	gets the outline of the source path drawn with the brush and represented by the destination path.
reset	void	resets the current brush to its initial state.

Related Summary

the Pen object is mainly used to modify the outline information of the graphic shape can be modified with attributes such as color, line width, anti-aliasing, transparency, line cap style, etc. Of course, if you want to achieve a fill effect, you need to switch the Brush object.