Android绘图机制(二)——自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解资料

Android绘图机制（二）——自定义View 绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解

我们要想画好一些炫酷的View，首先我们得知道怎么去画一些基础的图案，比如矩形，圆形，三角形，多边形等….

新建一个项目

然后我们创建一个listview,每个图案一个Activity,这样看起来是不是很顺眼

android:id="@+id/listview"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

编写ListView

private ListView listview;

//item上的数据源

private String[] name = {"矩形", "圆形", "三角形", "扇形", "椭圆", "曲线","文字和图片"};

//listview的adapter

private ArrayAdapteradapter;

private void initView() {

//实例化listview

listview = (ListView) findViewById(R.id.listview);

//实例化数据源

adapter = new ArrayAdapter(this, https://www.360docs.net/doc/8f11321316.html,yout.simple_list_item_1, name);

//listview设置adapter

listview.setAdapter(adapter);

//listview设置点击事件

listview.setOnItemClickListener(new AdapterView.OnItemClickListener() {

@Override

public void onItemClick(AdapterView parent, View view, int position, long id) {

//判断点击了第几个

if (id == 0) {

//矩形

startActivity(new Intent(MainActivity.this, RectActivity.class));

} else if (id == 1) {

//圆形

startActivity(new Intent(MainActivity.this, CircleActivity.class));

} else if (id == 2) {

//三角形

startActivity(new Intent(MainActivity.this, TrigonActivity.class));

} else if (id == 3) {

//扇形

startActivity(new Intent(MainActivity.this, SectorActivity.class));

} else if (id == 4) {

//椭圆

startActivity(new Intent(MainActivity.this, OvalActivity.class));

} else if (id == 5) {

//曲线

startActivity(new Intent(MainActivity.this, PathActivity.class));

}else if (id == 6) {

//曲线

startActivity(new Intent(MainActivity.this, TvIvActivity.class));

}

}

});

}

效果是这样的

后续可以添加

1.矩形——RectActivity

好的，上面写ListView的代码是不是很简单？拿我们新建一个RectActivity去画点了，首先我们要新建一个RectView继承View

package com.lgl.view.view;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.util.AttributeSet;

import android.view.View;

/**

* 矩形

* Created by LGL on 2016/1/7.

*/

public class RectView extends View {

//无参

public RectView(Context context) {

super(context);

}

//有参

public RectView(Context context, AttributeSet attrs) { super(context, attrs);

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

// 创建画笔

Paint p = new Paint();

//设置实心

p.setStyle(Paint.Style.FILL);

// 设置红色

p.setColor(Color.BLACK);

// 设置画笔的锯齿效果

p.setAntiAlias(true);

//绘制

canvas.drawRect(50, 100, 300, 300, p);

}

}

截图

1.圆形——CircleActivity

我们还是新建一个CircleActivity去画点了，首先我们要新建一个CircleView继承View package com.lgl.view.view;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.util.AttributeSet;

import android.view.View;

import android.view.WindowManager;

/**

* 圆

* Created by LGL on 2016/1/7.

*/

public class CircleView extends View {

int width;

int height;

//无参

public CircleView(Context context) {

super(context);

init();

}

//有参

public CircleView(Context context, AttributeSet attrs) {

super(context, attrs);

init();

}

private void init() {

//获取屏幕的宽高

//Android绘图机制（一）——自定义View的基础属性和方法里面有讲

WindowManager wm = (WindowManager) getContext()

.getSystemService(Context.WINDOW_SERVICE);

width = wm.getDefaultDisplay().getWidth();

height = wm.getDefaultDisplay().getHeight();

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

Paint p = new Paint();

p.setColor(Color.BLACK);

// 设置画笔的锯齿效果

p.setAntiAlias(true);

canvas.drawCircle(width / 2, height / 2, width / 2, p);

}

}

截图

3.三角形——TrigonActivity

我们还是新建一个TrigonActivity去画点了，首先我们要新建一个trigonView继承View package com.lgl.view.view;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.Path;

import android.util.AttributeSet;

import android.view.View;

/**

* 三角形

* Created by LGL on 2016/1/7.

*/

public class TrigonView extends View {

//无参

public TrigonView(Context context) {

super(context);

}

//有参

public TrigonView(Context context, AttributeSet attrs) { super(context, attrs);

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

Paint p = new Paint();

p.setColor(Color.BLACK);

//实例化路径

Path path = new Path();

path.moveTo(80, 200);// 此点为多边形的起点

path.lineTo(120, 250);

path.lineTo(80, 250);

path.close(); // 使这些点构成封闭的多边形

canvas.drawPath(path, p);

}

}

4.扇形——SectorActivity

package com.lgl.view.view;

import android.content.Context; import android.graphics.Canvas; import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.RectF;

import android.util.AttributeSet;

import android.view.View;

/**

* 扇形

* Created by LGL on 2016/1/8.

*/

public class SectorView extends View {

public SectorView(Context context) {

super(https://www.360docs.net/doc/8f11321316.html,text);

}

public SectorView(Context context, AttributeSet attrs) { super(context, attrs);

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

// 创建画笔

Paint p = new Paint();

p.setColor(Color.BLACK);

RectF rectF = new RectF(60, 100, 200, 240);

canvas.drawArc(rectF, 200, 130, true, p);

}

}

5.椭圆——OvalActivity

package com.lgl.view.view;

import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.RectF; import android.util.AttributeSet; import android.view.View;

/**

* 椭圆

* Created by LGL on 2016/1/8.

*/

public class OvalView extends View {

public OvalView(Context context) {

super(context);

}

public OvalView(Context context, AttributeSet attrs) { super(context, attrs);

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

// 创建画笔

Paint p = new Paint();

p.setColor(Color.BLACK);

RectF rectF = new RectF(60, 100, 200, 240);

rectF.set(210,100,250,130);

canvas.drawOval(rectF, p);

}

}

椭圆的思路和扇形是一样的，这里就不演示了

截图

6.曲线——PathActivity

package com.lgl.view.view;

import android.content.Context;

import android.graphics.Canvas; import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.Path;

import android.util.AttributeSet; import android.view.View;

/**

* Created by LGL on 2016/1/8.

*/

public class PathView extends View {

public PathView(Context context) {

super(context);

}

public PathView(Context context, AttributeSet attrs) {

super(context, attrs);

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

// 创建画笔

Paint p = new Paint();

p.setColor(Color.BLACK);

p.reset();

//设置空心

p.setStyle(Paint.Style.STROKE);

Path path = new Path();

path.moveTo(100, 320);//设置Path的起点

path.quadTo(150, 310, 170, 400); //设置路径点和终点

canvas.drawPath(path, p);

}

}

截图

7.文字和图片——TvIvActivity

package com.lgl.view.view;

import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Color;

import android.graphics.Paint;

import android.util.AttributeSet; import android.view.View;

import com.lgl.view.R;

/**

* Created by LGL on 2016/1/8.

*/

public class TvIvView extends View {

public TvIvView(Context context) {

super(context);

}

public TvIvView(Context context, AttributeSet attrs) {

super(context, attrs);

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

Paint p = new Paint();

p.setColor(Color.RED);

//文本

canvas.drawText("自定义文本", 250, 330, p);

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);

//图片

canvas.drawBitmap(bitmap, 250, 360, p);

}

}

文字和图片感觉不用多说，图片加载需要一个bitmap，而加载bitmap又需要一个工厂类，就是这样

大致的坐标思维

截图

相信看到这里，一些基础的图案都是可以绘制了。