Home Java javaTutorial Introduction to the method of using Path to draw basic graphics such as circles, rectangles, ellipses, triangles, etc. in Android development Canvas

Introduction to the method of using Path to draw basic graphics such as circles, rectangles, ellipses, triangles, etc. in Android development Canvas

Apr 22, 2017 am 10:01 AM
android canvas path

This article mainly introduces the method of using Path to draw basic graphics in Canvas in Android programming development, involving basic graphics drawing skills of Android, and analyzes the implementation of drawing basic graphics such as circles, rectangles, ellipses, triangles, etc. with examples. For the method, friends who need it can refer to

Drawing basic collection graphics in Android. This program is to customize a View component. The program rewrites the onDraw(Canvase) method of the View component, and then draws it on the Canvas. Draw a large number of basic set shapes.

Go directly to the code:

1. Customized View component code:

package com.infy.configuration;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View;
public class MyView extends View{
    public MyView(Context context, AttributeSet attrs) {
      super(context, attrs);
    }
    @Override
    protected void onDraw(Canvas canvas) {
      // TODO Auto-generated method stub
      super.onDraw(canvas);
      //把整张画布绘制成白色
      canvas.drawColor(Color.WHITE);
      Paint paint = new Paint();
      //去锯齿
      paint.setAntiAlias(true);
      paint.setColor(Color.BLUE);
      paint.setStyle(Paint.Style.STROKE);
      paint.setStrokeWidth(3);
      //绘制圆形
      canvas.drawCircle(40, 40, 30, paint);
      //绘制正方形
      canvas.drawRect(10, 80, 70, 140, paint);
      //绘制矩形
      canvas.drawRect(10, 150, 70, 190, paint);
      RectF rel = new RectF(10,240,70,270);
      //绘制椭圆
      canvas.drawOval(rel, paint);
      //定义一个Path对象,封闭一个三角形
      Path path1 = new Path();
      path1.moveTo(10, 340);
      path1.lineTo(70, 340);
      path1.lineTo(40, 290);
      path1.close();
      //根据Path进行绘制,绘制三角形
      canvas.drawPath(path1, paint);
      //定义一个Path对象,封闭一个五角星
      Path path2 = new Path();
      path2.moveTo(27, 360);
      path2.lineTo(54, 360);
      path2.lineTo(70, 392);
      path2.lineTo(40, 420);
      path2.lineTo(10, 392);
      path2.close();
      //根据Path进行绘制,绘制五角星
      canvas.drawPath(path2, paint);
      //设置填丛风格后进行绘制
      paint.setStyle(Paint.Style.FILL);
      paint.setColor(Color.RED);
      canvas.drawCircle(120, 40, 30, paint);
      //绘制正方形
      canvas.drawRect(90, 80, 150, 140, paint);
      //绘制矩形
      canvas.drawRect(90, 150, 150, 190, paint);
      //绘制圆角矩形
      RectF re2 = new RectF(90,200,150,230);
      canvas.drawRoundRect(re2, 15, 15, paint);
      //绘制椭圆
      RectF re21 = new RectF(90, 240, 150, 270);
      canvas.drawOval(re21, paint);
      Path path3 = new Path();
      path3.moveTo(90, 340);
      path3.lineTo(150, 340);
      path3.lineTo(120, 290);
      path3.close();
      //绘制三角形
      canvas.drawPath(path3,paint);
      //绘制五角形
      Path path4 = new Path();
      path4.moveTo(106, 360);
      path4.lineTo(134, 360);
      path4.lineTo(150, 392);
      path4.lineTo(120, 420);
      path4.lineTo(90, 392);
      path4.close();
      canvas.drawPath(path4, paint);
      //设置渐变器后绘制
      //为Paint设置渐变器
      Shader mShasder = new LinearGradient(0, 0, 40, 60, new int[]{Color.RED,Color.GREEN,Color.BLUE,Color.YELLOW}, null, Shader.TileMode.REPEAT);
      paint.setShader(mShasder);
      //设置阴影
      paint.setShadowLayer(45, 10, 10, Color.GRAY);
      //绘制圆形
      canvas.drawCircle(200, 40, 30, paint);
      //绘制正方形
      canvas.drawRect(170, 80, 230, 140, paint);
      //绘制矩形
      canvas.drawRect(170, 150, 230, 190, paint);
      //绘制圆角的矩形
      RectF re31 = new RectF();
      canvas.drawRoundRect(re31, 15, 15, paint);
      //绘制椭圆
      RectF re32 =new RectF();
      canvas.drawOval(re32, paint);
      //根据Path,绘制三角形
      Path path5 = new Path();
      path5.moveTo(170, 340);
      path5.lineTo(230, 340);
      path5.lineTo(200, 290);
      path5.close();
      canvas.drawPath(path5, paint);
      //根据PAth,进行绘制五角形
      Path path6 = new Path();
      path6.moveTo(186, 360);
      path6.lineTo(214, 360);
      path6.lineTo(230, 392);
      path6.lineTo(200, 420);
      path6.lineTo(170, 392);
      path6.close();
      canvas.drawPath(path6, paint);
    }
}
Copy after login

2. Use a basic Activity to implement the customized MyView component,

Define an Activity of ZiDingYiViewTes:

package com.infy.configuration;
import android.app.Activity;
import android.os.Bundle;
public class ZiDingYiViewTes extends Activity{
    private MyView myView =null;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
      // TODO Auto-generated method stub
      super.onCreate(savedInstanceState);
      myView = new MyView(this, null);
      setContentView(myView);
    }
}
Copy after login

Android's Canvas can draw simple collection graphics or draw a Bitmap directly to the canvas.
Finally attached is the rendering (with an extra ellipse):

The above is the detailed content of Introduction to the method of using Path to draw basic graphics such as circles, rectangles, ellipses, triangles, etc. in Android development Canvas. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

New report delivers damning assessment of rumoured Samsung Galaxy S25, Galaxy S25 Plus and Galaxy S25 Ultra camera upgrades New report delivers damning assessment of rumoured Samsung Galaxy S25, Galaxy S25 Plus and Galaxy S25 Ultra camera upgrades Sep 12, 2024 pm 12:23 PM

In recent days, Ice Universe has been steadily revealing details about the Galaxy S25 Ultra, which is widely believed to be Samsung's next flagship smartphone. Among other things, the leaker claimed that Samsung only plans to bring one camera upgrade

Samsung Galaxy S25 Ultra leaks in first render images with rumoured design changes revealed Samsung Galaxy S25 Ultra leaks in first render images with rumoured design changes revealed Sep 11, 2024 am 06:37 AM

OnLeaks has now partnered with Android Headlines to provide a first look at the Galaxy S25 Ultra, a few days after a failed attempt to generate upwards of $4,000 from his X (formerly Twitter) followers. For context, the render images embedded below h

IFA 2024 | TCL\'s NXTPAPER 14 won\'t match the Galaxy Tab S10 Ultra in performance, but it nearly matches it in size IFA 2024 | TCL\'s NXTPAPER 14 won\'t match the Galaxy Tab S10 Ultra in performance, but it nearly matches it in size Sep 07, 2024 am 06:35 AM

Alongside announcing two new smartphones, TCL has also announced a new Android tablet called the NXTPAPER 14, and its massive screen size is one of its selling points. The NXTPAPER 14 features version 3.0 of TCL's signature brand of matte LCD panels

Vivo Y300 Pro packs 6,500 mAh battery in a slim 7.69 mm body Vivo Y300 Pro packs 6,500 mAh battery in a slim 7.69 mm body Sep 07, 2024 am 06:39 AM

The Vivo Y300 Pro just got fully revealed, and it's one of the slimmest mid-range Android phones with a large battery. To be exact, the smartphone is only 7.69 mm thick but features a 6,500 mAh battery. This is the same capacity as the recently launc

Samsung Galaxy S24 FE billed to launch for less than expected in four colours and two memory options Samsung Galaxy S24 FE billed to launch for less than expected in four colours and two memory options Sep 12, 2024 pm 09:21 PM

Samsung has not offered any hints yet about when it will update its Fan Edition (FE) smartphone series. As it stands, the Galaxy S23 FE remains the company's most recent edition, having been presented at the start of October 2023. However, plenty of

New report delivers damning assessment of rumoured Samsung Galaxy S25, Galaxy S25 Plus and Galaxy S25 Ultra camera upgrades New report delivers damning assessment of rumoured Samsung Galaxy S25, Galaxy S25 Plus and Galaxy S25 Ultra camera upgrades Sep 12, 2024 pm 12:22 PM

In recent days, Ice Universe has been steadily revealing details about the Galaxy S25 Ultra, which is widely believed to be Samsung's next flagship smartphone. Among other things, the leaker claimed that Samsung only plans to bring one camera upgrade

Xiaomi Redmi Note 14 Pro Plus arrives as first Qualcomm Snapdragon 7s Gen 3 smartphone with Light Hunter 800 camera Xiaomi Redmi Note 14 Pro Plus arrives as first Qualcomm Snapdragon 7s Gen 3 smartphone with Light Hunter 800 camera Sep 27, 2024 am 06:23 AM

The Redmi Note 14 Pro Plus is now official as a direct successor to last year'sRedmi Note 13 Pro Plus(curr. $375 on Amazon). As expected, the Redmi Note 14 Pro Plus heads up the Redmi Note 14 series alongside theRedmi Note 14and Redmi Note 14 Pro. Li

iQOO Z9 Turbo Plus: Reservations begin for the potentially beefed-up series flagship iQOO Z9 Turbo Plus: Reservations begin for the potentially beefed-up series flagship Sep 10, 2024 am 06:45 AM

OnePlus'sister brand iQOO has a 2023-4 product cycle that might be nearlyover; nevertheless, the brand has declared that it is not done with itsZ9series just yet. Its final, and possibly highest-end,Turbo+variant has just beenannouncedas predicted. T

See all articles