This is the third day of my participation in Gwen Challenge

Github code (branch paint)

Github.com/ananananzhu…

Paint the Api is introduced

Set the brush color
 public void setColor(@ColorInt int color)
Copy the code
Set the brush width
paint.setStrokeWidth(10)
Copy the code

With a brush width of 0, you can still draw at 1 pixel, but the width of the lines that you draw will not change when you scale the canvas if the brush width is 1 then when you double the brush width, the line width will change to 2

anti-aliasing
setAntiAlias(true) 
Copy the code

True: softener false: softener

Anti-aliasing means that in the image, the edges of objects are always more or less triangular, and anti-aliasing means that the image edge is softened to make the image edge look smoother and closer to the real object

Brush transparency
public void setAlpha(int a)
Copy the code

A: The range is 0-255

0: transparent

255: Completely opaque

Set transparency and color
 public void setARGB(int a, int r, int g, int b)
Copy the code

The parameters range from 0 to 255

Set the brush style
 public void setStyle(Style style)
Copy the code

Paint.Style.FILL: FILL the interior (for example, this mode draws a circle and the interior color is filled)

Paint.style. STROKE: STROKE (the inside is not filled and can be used to draw circles)

Paint.style. FILL_AND_STROKE: FILL the interior and stroke (display effect looks the same as FILL)

The style of the line connection
 public void setStrokeJoin(Join join)
Copy the code
public static enum Join {
  BEVEL,
  MITER,
  ROUND
}
Copy the code

BEVEL: The join is a pattern of slashes

MITER: rectangular

ROUND: Rounded corner style effect display:

The third one in the picture is wrong. It should be rounded

public void setStrokeMiter
 public void setStrokeMiter
Copy the code

In the case of small Angle in MITER mode, the sharp Angle will be automatically converted to slash mode.

Set the mode of the thread head
 public void setStrokeCap(Cap cap)
Copy the code
Public static enum Cap {BUTT, ROUND, SQUARE}Copy the code

Effect display:

The corners are rounded
public PathEffect setPathEffect(PathEffect effect)
Copy the code

Code example for setting setPathEffect

paint.pathEffect=CornerPathEffect(40)
Copy the code

The effects GIF shows the two paths below. The paths themselves are the same, but we dynamically change the pathEffect property of the second path Paint by swiping the Seekbar, and the second path gradually becomes rounded

Set the dotted line
 paint.pathEffect = DashPathEffect(floatArrayOf(10f, 20f), 50f)
Copy the code

DashPathEffect The 0th value of the number in the first argument array represents the length of the dashed line, and the first value represents the length between the two dashed lines

Draw the dotted code

override fun onDraw(canvas: Canvas?) { super.onDraw(canvas) path.reset() path.apply { moveTo(100f, 100f) lineTo(300f, 200f) lineTo(100f, 400f) lineTo(300f, 900f) lineTo(80f, 1000f) close() } canvas? .drawPath(path, paint) }Copy the code

Code implementation effect

PathDashPathEffect

Copying code from someone else’s blog:

Path dashPath = ... ; / / using a triangle for the dash PathEffect PathEffect = new PathDashPathEffect (dashPath, 40, 0, PathDashPathEffectStyle. TRANSLATE); paint.setPathEffect(pathEffect); . canvas.drawPath(path, paint);Copy the code

Reference effect:

DiscretePathEffect () sets random offsets for lines

SumPathEffect () executes both line modes

Gradient mode

Concentration mode of gradient mode:

A LinearGradient

“RadialGradient” RadialGradient

“SweepGradient” Scan gradient

“BitmapShader” bitmap gradient

“ComposeShader” blending gradient allows multiple shaders to be blended together

Set the shadow
setShadowLayer(float radius, float dx, float dy, int shadowColor)
Copy the code

Radius is the fuzzy range of shadows; Dx dy is the offset of the shadow; ShadowColor is the color of the shadow.

Blur effect MaskFilter

There are four modes:

NORMAL: Fuzzy drawing both inside and outside

SOLID: Internal drawing is normal, external blur

INNER: the inside is blurred and the outside is not drawn

OUTER: The inside is not drawn and the outside is blurred

var maskFilter: BlurMaskFilter = BlurMaskFilter(50f, BlurMaskFilter.Blur.SOLID) canvas? .translate(measuredWidth / 2f, measuredHeight / 2f) canvas? .drawBitmap(bitmap, -200f, -200f, paint)Copy the code

GetTextPath path

The path to get the text

Code display:

override fun onDraw(canvas: Canvas?) {super.ondraw (canvas) val text = "Test text Test" val srcPaint = Paint() srcPaint. TextSize = 100f srcPaint Color.BLACK srcPaint.style = Paint.Style.STROKE canvas? DrawText (text, 50f, 100f, srcPaint) // Get the canvas? .translate(0f, 150f) val desPath = Path() val desPaint = Paint() desPaint.textSize = 100f desPaint.color = Color.RED desPaint.strokeWidth = 5f desPaint.style = Paint.Style.STROKE srcPaint.getTextPath(text, 0, text.length, 50f, 100f, desPath) canvas? .drawPath(desPath, desPaint) }Copy the code

Code effect display:

After the