绘图［下］（四）

image.png

PATH

使用Path不仅能够绘制简单图形，也可以绘制这些比较复杂的图形。如绘制一个心形正多边形五角星等．

Path封装了由直线和曲线(二次，三次贝塞尔曲线)构成的几何路径。你能用Canvas中的drawPath来把这条路径画出来(同样支持Paint的不同绘制模式)，也可以用于剪裁画布和根据路径绘制文字。我们有时会用Path来描述一个图像的轮廓，所以也会称为轮廓线(轮廓线仅是Path的一种使用方法，两者并不等价)

废话不多说，开始战斗！！Ｏ（∩＿∩）Ｏ

使用moveTo和lineTo画直线

首先需要定义下画笔，和昨天的project结构一样：

代码语言：javascript复制

        // 设置画笔
        Paint mPaint = new Paint();
        // 设定画笔颜色
        mPaint.setColor(Color.RED);
        //抗锯齿
        mPaint.setAntiAlias(true);
        //设置宽度
        mPaint.setStrokeWidth(20);
        // 设定画笔填充类型(不填充)
        mPaint.setStyle(Paint.Style.STROKE);

定义好之后开始定义path：

代码语言：javascript复制

        //获取控件的宽高
        int width = getWidth();
        int height = getHeight();
        //移动坐标系
        canvas.translate(width / 2, height / 2);
        //创建path
        Path path = new Path();
        //移动到开始坐标点
        path.moveTo(0, 0);
        //划线到终点坐标点
        path.lineTo(300,300);
        // 绘制Path
        canvas.drawPath(path, mPaint);

画出一条红线:

image.png

运行效果:

image.png

addCircle绘制圆

使用addCircle函数来绘制圆圈:

代码语言：javascript复制

      // 设置画笔
        Paint mPaint = new Paint();
        // 设定画笔颜色
        mPaint.setColor(Color.RED);
        //抗锯齿
        mPaint.setAntiAlias(true);
        //设置宽度
        mPaint.setStrokeWidth(20);
        // 设定画笔填充类型(不填充)
        mPaint.setStyle(Paint.Style.STROKE);

        //获取控件的宽高
        int width = getWidth();
        int height = getHeight();
        //移动坐标系
        canvas.translate(width / 2, height / 2);
        //　制定路径
        Path mPath = new Path();

        mPath.addCircle(0,0,width/4, Path.Direction.CW);

        canvas.drawPath(mPath, mPaint);

效果:

image.png

运行结果:

image.png

接下来,做一个小练习,绘制五角星.O(∩_∩)O

小练习(绘制五角星)

首先学习下绘制五角星的方法: 1.绘制一个圆 2.从这个圆中,均匀的选出五个点,每个点之间的弧度差是:360/5. 3.根据笔画依次连接这五个点.

源码:

代码语言：javascript复制

package com.example.user.test11;

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.graphics.Path;

public class HelloView extends View{

    public HelloView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }
    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);

        // 设置画笔
        Paint mPaint = new Paint();
        // 设定画笔颜色
        mPaint.setColor(Color.RED);
        //抗锯齿
        mPaint.setAntiAlias(true);
        //设置宽度
        mPaint.setStrokeWidth(20);
        // 设定画笔填充类型(不填充)
        mPaint.setStyle(Paint.Style.STROKE);

        //获取控件的宽高
        int width = getWidth();
        int height = getHeight();
        //移动坐标系
        canvas.translate(width / 2, height / 2);

        float radius = width / 2;

        //第一个点的坐标
        float x1 = 0;
        float y1 = radius;

        //第二个点的坐标
        float x2 = (float)(Math.cos(Math.PI / 2 - Math.PI * 2 / 5) * radius);
        float y2 = (float)(Math.sin(Math.PI / 2 - Math.PI * 2 / 5) * radius);
        //第三个点的坐标
        float x3 = (float)(-(Math.cos(Math.PI / 2 - Math.PI * 2 / 5) * radius));
        float y3 = (float)(Math.sin(Math.PI / 2 - Math.PI * 2 / 5) * radius);
        //第四个点的坐标
        float x4 = (float)(-(Math.cos(Math.PI * 2 / 5 - (Math.PI / 2 - Math.PI * 2 / 5)) * radius));
        float y4 = (float)(-(Math.sin(Math.PI * 2 / 5 - (Math.PI / 2 - Math.PI * 2 / 5)) * radius));
        //第五个点的坐标
        float x5 = (float)(Math.cos(Math.PI * 2 / 5 - (Math.PI / 2 - Math.PI * 2 / 5)) * radius);
        float y5 = (float)(-(Math.sin(Math.PI * 2 / 5 - (Math.PI / 2 - Math.PI * 2 / 5)) * radius));
        //　制定路径
        Path mPath = new Path();

        mPath.moveTo(x1,y1);
        mPath.lineTo(x5,y5);
        mPath.lineTo(x3,y3);
        mPath.lineTo(x2,y2);
        mPath.lineTo(x4,y4);
        mPath.lineTo(x1,y1);

        //绘制五角星
        canvas.drawPath(mPath, mPaint);
        //绘制圆
        canvas.drawCircle(0, 0, radius, mPaint);
    }

}

注意:JAVA中Math类中的三角函数参数是弧度并非数值

实现效果: