概述:
没什么好说的。
Demo
新建一个自定义View
public class MyPathView extends View {
private int width;
private int height;
private Paint mPaint;
private Path mPath;
private Paint mPaintPoint;
private Paint mPaintText;
private boolean isAdd = true;
public MyPathView(Context context) {
super(context);
}
public MyPathView(Context context, AttributeSet attrs) {
super(context, attrs);
mPaint = new Paint();
mPaint.setColor(Color.GREEN);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setTextSize(50);
mPaint.setAntiAlias(true);
mPaintPoint = new Paint();
mPaintPoint.setAntiAlias(true);
mPaintPoint.setColor(Color.RED);
mPaintPoint.setStyle(Paint.Style.STROKE);
//mPaintPoint.setStrokeWidth(10);
mPaintText = new Paint();
mPaintText.setAntiAlias(true);
mPaintText.setColor(Color.BLACK);
mPaintText.setTextAlign(Paint.Align.CENTER);
mPaintText.setTextSize(20);
mPath = new Path();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
width = getDefaultSize(getSuggestedMinimumWidth(),widthMeasureSpec);
height = getDefaultSize(getSuggestedMinimumHeight(),heightMeasureSpec);
setMeasuredDimension(width,height);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//画一个三角形
mPath.moveTo(100, 100);//起始位置
mPath.lineTo(0, 200);//从起始位置移动到此位置
mPath.lineTo(200, 200);//从上一位置移动到下一位置
mPath.close();//前面只画了两条边,调用close()可以让三角形自动闭合
canvas.drawPath(mPath, mPaint);//把path经历的轨迹画出来
}
}
画一个圆,沿着圆写一段文字,修改onDraw()方法:
/*画一个圆,并沿着圆写一段文字*/
//参数依次为:圆心x座标,圆心y座标,圆的半径,CW顺时针(CCW逆时针)方向
mPath.addCircle(width / 2, height / 2, 300, Path.Direction.CW);
canvas.drawPath(mPath, mPaint);
//沿着path的轨迹写一段文字
canvas.drawTextOnPath("我要沿着圆形写文字", mPath, 0, 0, mPaint);
canvas.drawPath(mPath, mPaint);
演示结果:
贝塞尔曲线:
贝塞尔曲线也可以叫做贝济埃曲线或者贝兹曲线,它由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋。一般的矢量图形软件常利用贝塞尔曲线来精确画出曲线。
Android提供的贝塞尔曲线绘制接口
在Android开发中,要实现贝塞尔曲线其实还是很简单的,因为Android已经给我们提供了相关接口,但此接口方法,藏于Path类中(android.graphics.Path)。此方法如下:
quadTo(float x1, float y1, float x2, float y2)
Since: API Level 1
参数说明:
x1:操作点的x座标
y1:操作点的y座标
x2:结束点的x座标
y2:结束点的y座标
mPath.moveTo(100, 100);
//画一条贝塞尔曲线,参数依次为:控制点的x座标,控制点的y座标,结束点的x座标,结束点的y座标
mPath.quadTo(100, 400, 300, 300);
canvas.drawPath(mPath, mPaint);
canvas.drawPoint(100, 100, mPaintPoint);
canvas.drawPoint(100, 400, mPaintPoint);
canvas.drawPoint(300, 300, mPaintPoint);
//会出以上贝塞尔曲线的起始点、控制点、结束点
canvas.drawText("起始点", 100, 100, mPaintText);
canvas.drawText("控制点", 100, 400, mPaintText);
canvas.drawText("结束点", 300, 300, mPaintText);
演示结果:
用path绘制动态贝塞尔曲线——模拟水面:
public class MyPathView extends View {
private int width;
private int height;
private Paint mPaint;
private Path mPath;
private Paint mPaintPoint;
private Paint mPaintText;
private int size = 0;
private int count;
private boolean isAdd = true;
private static final int START_WAVE = 0x21;
private Handler handler = new Handler(){
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
switch (msg.what){
case START_WAVE:
count+=5;
if(count>=80){
count=0;
}
if (isAdd){
size++;
if(size>10){
isAdd = false;
}
}else{
size--;
if(size<=-10){
isAdd =true;
}
}
invalidate();
sendEmptyMessageDelayed(START_WAVE,100);
break;
}
}
};
public MyPathView(Context context) {
super(context);
}
public MyPathView(Context context, AttributeSet attrs) {
super(context, attrs);
mPaint = new Paint();
mPaint.setColor(Color.GREEN);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setTextSize(50);
mPaint.setAntiAlias(true);
mPaintPoint = new Paint();
mPaintPoint.setAntiAlias(true);
mPaintPoint.setColor(Color.RED);
mPaintPoint.setStyle(Paint.Style.STROKE);
//mPaintPoint.setStrokeWidth(10);
mPaintText = new Paint();
mPaintText.setAntiAlias(true);
mPaintText.setColor(Color.BLACK);
mPaintText.setTextAlign(Paint.Align.CENTER);
mPaintText.setTextSize(20);
mPath = new Path();
handler.sendEmptyMessageDelayed(START_WAVE,1000);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
width = getDefaultSize(getSuggestedMinimumWidth(),widthMeasureSpec);
height = getDefaultSize(getSuggestedMinimumHeight(),heightMeasureSpec);
setMeasuredDimension(width,height);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
/*
画一条个模拟流动的波浪
*/
mPath.reset();
//当count增大时,重绘会显示向前流动效果
mPath.moveTo(count, 200);
//size的从大到小从小到大变化,重绘时会产生波浪起伏效果
for(int i=0;i<10;i++) {
/*
rQuadTo()方法每次都会自动移动到下一位置,参数依次为水平幅度,
垂直幅度,水平位移,处置位移
*/
mPath.rQuadTo(20, size, 40, 0);
mPath.rQuadTo(20, -size, 40, 0);
}
canvas.drawPath(mPath,mPaintPoint);
canvas.drawCircle(width / 2, 200, 100, mPaint);
}
}
结果演示:
我们猿类工作压力大,很需要有自己的乐趣,于是乎,我开通了音乐人账号,以后的作品将会上传到我的音乐人小站上。如果这篇博客帮助到您,希望您能多关注,支持,鼓励我将创作进行下去,同时也祝你能在工作和生活乐趣两发面都能出彩!