Canvas与Paint的初级使用

来源:互联网 发布:淘宝旺旺可以改名字吗 编辑:程序博客网 时间:2024/06/05 15:31

看了很多android自定义方面的资料,了解了很多原理,遇到人家自定义的东西也能够看得懂,但是,当自己去自定义的时候,发现脑袋一片空白,所以就先从认识Canvas和Paint开始吧!


Canvas 类

主要是实现了屏幕的绘制过程,是自定义View的时候不可少的一个步骤,其中包含了很多实用的方法,不如绘制一条路径、区域、画点、画线、渲染文本。下面就是一下canvas的常用方法介绍。


void drawRect(RectF rect,Paint paint) //绘制区域,参数为一个RectF一个区域


void drawPath(Path path,Paint paint)// 绘制一个路径,参数为一个Path路径对象


 void drawBitmap(Bitmap bitmap,Rect src,Rect dst,Paint paint)//贴图,参数一就是常规的Bitmap对象,参数二是原区域,参数三是目标区域,参数四是自定义的paint对象。这个地方设计到了图像学的一些知识,就是原区域跟目标区域混合的情况,涉及到PorterDuffXfermode 这个类。该类含有一个构造方法
PorterDuffXfermode(PorterDuff.Mode mode)虽说构造方法的签名列表里只有一个PorterDuff.Mode的参数,但是它可以实现很多酷毙的图形效果!!而PorterDuffXfermode就是图形混合模式的意思,其概念最早来自于SIGGRAPH的Tomas Proter和Tom Duff,混合图形的概念极大地推动了图形图像学的发展,延伸到计算机图形图像学像Adobe和AutoDesk公司著名的多款设计软件都可以说一定程度上受到影响,而我们PorterDuffXfermode的名字也来源于这俩人的人名组合PorterDuff,那PorterDuffXfermode能做些什么呢?我们先来看一张API DEMO里的图片


这张图片从一定程度上形象地说明了图形混合的作用,两个图形一圆一方通过一定的计算产生不同的组合效果。如下:




void  drawLine(float startX, float startY, float stopX, float stopY, Paint paint)  //画线,参数一起始点的x轴位置,参数二起始点的y轴位置,参数三终点的x轴水平位置,参数四y轴垂直位置,最后一个参数为Paint画刷对象。

 void  drawPoint(float x, float y, Paint paint) //画点,参数一水平x轴,参数二垂直y轴,第三个参数为Paint对象。
 
 void drawText(String text, float x, float y, Paint paint)  //渲染文本,Canvas类除了上面的还可以描绘文字,参数一是String类型的文本,参数二x轴,参数三y轴,参数四是Paint对象。

void  drawTextOnPath(String text, Path path, float hOffset, float vOffset, Paint paint) //在路径上绘制文本,相对于上面第二个参数是Path路径对象

       从上面来看我们可以看出Canvas绘制类比较简单同时很灵活,实现一般的方法通常没有问题,同时可以叠加的处理设计出一些效果,不过细心的网友可能发现最后一个参数均为Paint对象。如果我们把Canvas当做绘画师来看,那么Paint就是我们绘画的工具,比如画笔、画刷、颜料等等。

Paint类

      void  setARGB(int a, int r, int g, int b)  设置Paint对象颜色,参数一为alpha透明通道

       void  setAlpha(int a)  设置alpha不透明度,范围为0~255

       void  setAntiAlias(boolean aa)  //是否抗锯齿

       void  setColor(int color)  //设置颜色,这里Android内部定义的有Color类包含了一些常见颜色定义 

       void  setFakeBoldText(boolean fakeBoldText)  //设置伪粗体文本
  
       void  setLinearText(boolean linearText)  //设置线性文本
 
       PathEffect  setPathEffect(PathEffect effect)  //设置路径效果
 
       Rasterizer  setRasterizer(Rasterizer rasterizer) //设置光栅化
 
       Shader  setShader(Shader shader)  //设置阴影 

       void  setTextAlign(Paint.Align align)  //设置文本对齐

       void  setTextScaleX(float scaleX)  //设置文本缩放倍数,1.0f为原始
  
       void  setTextSize(float textSize)  //设置字体大小
 
       Typeface  setTypeface(Typeface typeface)  //设置字体,Typeface包含了字体的类型,粗细,还有倾斜、颜色等。

       void  setUnderlineText(boolean underlineText)  //设置下划线


基本的知识点介绍完成了,我们需要把两者结合起来用一下

package com.example.shise;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.graphics.Rect;import android.util.AttributeSet;import android.view.View;import android.view.WindowManager;public class LineView extends View{Paint mPaint,mPaint2;Path mPath;int right,right2;int width;public LineView(Context context) {super(context);init();}public LineView(Context context,AttributeSet attrs) {super(context,attrs);// TODO Auto-generated constructor stubinit();}public void init(){mPaint=new Paint();mPaint2=new Paint();mPath=new Path();mPaint.setAntiAlias(true);mPaint.setStrokeWidth(2);mPaint.setColor(Color.GREEN);mPaint2.setAntiAlias(true);mPaint2.setStrokeWidth(2);mPaint2.setColor(Color.GREEN);WindowManager wm = (WindowManager) getContext()                .getSystemService(Context.WINDOW_SERVICE);width = wm.getDefaultDisplay().getWidth();right=width/2+10;right2=width/2-10;}@Overrideprotected void onDraw(Canvas canvas) {// TODO Auto-generated method stubsuper.onDraw(canvas);canvas.save();Rect r=new Rect(width/2,20,right,30);Rect r2=new Rect(right2,20,width/2,30);canvas.drawRect(r, mPaint);canvas.restore();canvas.drawRect(r2, mPaint2);if(right<width){right=(int) (right*1.2);right2=(int) (right2-(right*1.2-right));invalidate();}}}

上述代码通过invalidate的不断重绘View实现两条直线向两边发散的动画效果。






2 0
原创粉丝点击