Detailed explanation of Android custom view paint

Time:2022-1-4

Use of paint

setStyle

  • Paint. Style. Fill: fill mode
  • Paint. Style. Stroke: line drawing mode
  • Paint. Style. FILL_ AND_ Stroke: fill + draw line


paint.setStyle(Paint.Style.FILL);
canvas.drawCircle(200,100,100,paint);

paint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(200,350,100,paint);

paint.setStyle(Paint.Style.FILL_AND_STROKE);
canvas.drawCircle(200,600,100,paint);

setStrokeCap

Set thread end shape:

  • Buff: flat head
  • Round: round head
  • Square: square head


paint.setStrokeWidth(20);

paint.setStrokeCap(Paint.Cap.BUTT);
canvas.drawLine(50, 50, 300, 50, paint);

paint.setStrokeCap(Paint.Cap.ROUND);
canvas.drawLine(50, 100, 300, 100, paint);

paint.setStrokeCap(Paint.Cap.SQUARE);
canvas.drawLine(50, 150, 300, 150, paint);

setShadowLayer

Add a shadow under the paint


paint.setTextSize(36);
paint.setShadowLayer(10, 0, 0, Color.RED);
canvas.drawText("hello world", 100, 100, paint);

setColor setARGB


paint.setColor(Color.parseColor("#ff0000"));
canvas.drawText("hello", 30, 100, paint);

paint.setARGB(100, 0, 255, 0);
canvas.drawText("hello", 30, 200, paint);

reset

Resetting all the attributes of paint to the default value is equivalent to a new one, with higher performance.

set

Copy all the attributes of the target paint.

setShader

Shader is an English word that many people have never seen. Its Chinese name is “shader”, which is also used to set the drawing color. “Shader” is not unique to Android. It is a general concept in the graphics field. The difference between it and directly setting color is that the shader sets a color scheme, or a set of shading rules. When setShaderAfter that,PaintIt is not used when drawing graphics and textsetColor/ARGB()Set the color, but useShaderThe color in the scheme.

PorterBuff.Mode

  • Target drawing: refers to the bottom plate drawing
  • Source image: refers to the image to be drawn

LinearGradient linear gradient

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    int redColor = Color.RED;
    int greenColor = Color.GREEN;
    //X0 Y0 X1 Y1: the position of the two endpoints of the gradient
    //Color0 Color1 is the color of the endpoint
    //Tilemode shading mode outside the radiation range: clamp: continuous color outside the endpoint; Mirror: mirror mode; Repeat: repeat mode;
    Shader shader = new LinearGradient(100, 100, 500, 500, redColor, greenColor, Shader.TileMode.CLAMP);
    paint.setShader(shader);
    canvas.drawCircle(300, 300, 200, paint);
}

RadialGradient radiation gradient


Shader shader = new RadialGradient(300, 300, 200, redColor, greenColor, Shader.TileMode.CLAMP);
paint.setShader(shader);
canvas.drawCircle(300, 300, 200, paint);

Sweep gradient


Shader shader = new SweepGradient(300, 300, redColor, greenColor);
paint.setShader(shader);
canvas.drawCircle(300, 300, 200, paint);

Bitmapshader bitmap fill


Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.a);
Shader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
paint.setShader(shader);
canvas.drawCircle(300, 300, 200, paint);

Composeshader blend shader


Bitmap bitmap1 = BitmapFactory.decodeResource(getResources(), R.drawable.a);
Bitmap srcBitmap = Bitmap.createScaledBitmap(bitmap1, 400, 400, true);
Shader shader1 = new BitmapShader(srcBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

Bitmap bitmap2 = BitmapFactory.decodeResource(getResources(), R.drawable.b);
Bitmap dstBitmap = Bitmap.createScaledBitmap(bitmap2, 400, 400, true);
Shader shader2 = new BitmapShader(dstBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

ComposeShader shader = new ComposeShader(shader1, shader2, PorterDuff.Mode.DST_OUT);
paint.setShader(shader);

canvas.drawRect(0, 0, 400, 400, paint);

setColorFilter

ColorFilterThe name of this class is enough to explain its role: setting color filtering for painting. The meaning of color filtering is to set a unified filtering strategy for the drawn content, and thenCanvas.drawXXX()Method will filter each pixel before drawing.

Lightingcolorfilter lighting effects

LightingColorFilterThe construction method of isLightingColorFilter(int mul, int add), in the parametermulandaddAre int values in the same format as color values, wheremulUsed to multiply by the target pixel,addUsed to add to the target pixel:


R' = R * mul.R / 0xff + add.R
G' = G * mul.G / 0xff + add.G
B' = B * mul.B / 0xff + add.B
R' = R * mul.R / 0xff + add.R

A basic “keep as is”LightingColorFilter 」,mulby0xffffffaddby0x000000(i.e. 0), then for a pixel, its calculation process is:


R' = R * 0xff / 0xff + 0x0 = R // R' = R
G' = G * 0xff / 0xff + 0x0 = G // G' = G
B' = B * 0xff / 0xff + 0x0 = B // B' = B


Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.a);
ColorFilter lightingColorFilter = new LightingColorFilter(0x00ffff, 0x000000);
paint.setColorFilter(lightingColorFilter);
canvas.drawBitmap(bitmap, 10, 10, paint);

setXfermode

XfermodeIt refers to what you want to draw andCanvasHow should the content of the target position be combined to calculate the final color. But generally speaking, you are required to take the drawn content as the source image and the existing content in the view as the target imagePorterDuff.ModeAs a color processing scheme for drawing content.

Using xfermode requires setting the off screen buffer

API explain
ComposeShader Blend two shaders
PorterBuffColorFilter Add a monochrome colorfilter
Xfermode Mixed calculation of drawing layer and bottom layer

private Paint paint;
private RectF bounds;
private Bitmap circleBitmap;
private Bitmap squareBitmap;

private void init() {
    paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    bounds = new RectF(0, 0, 300, 300);
    circleBitmap = Bitmap.createBitmap(200, 200, Bitmap.Config.ARGB_8888);
    squareBitmap = Bitmap.createBitmap(200, 200, Bitmap.Config.ARGB_8888);

    Canvas canvas = new Canvas(circleBitmap);
    paint.setColor(Color.RED);
    canvas.drawCircle(100, 100, 100, paint);

    canvas.setBitmap(squareBitmap);
    paint.setColor(Color.BLUE);
    canvas.drawRect(100, 100, 300, 300, paint);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    //Set off screen buffer
    //Off screen buffering consumes resources. You can set the boundaries specified area
    int saved = canvas.saveLayer(bounds, null);

    //Drawing DST
    canvas. drawBitmap(circleBitmap, 0, 0, paint);// Draw a circle

    //Draw SRC
    Xfermode xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
    paint.setXfermode(xfermode);
    canvas. drawBitmap(squareBitmap, 0, 0, paint);// Draw rectangle

    paint. setXfermode(null);// Clean xfermode in time
    //Restore
    canvas.restoreToCount(saved);
}

The above is the detailed explanation of Android custom view paint. For more information about Android view paint, please pay attention to other relevant articles of developeppaer!

Recommended Today

MySQL high availability architecture

1. Why do you need high availability? High availability ha (high availability) is to solve single machine failure. There is no service or machine in the world that is absolutely safe and reliable, but we can achieve high availability of the system through certain schemes, so as to reduce the unacceptable risk of destruction of […]