zoukankan      html  css  js  c++  java
  • Canvas与Paint的0基础使用

    看了非常多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 stub
    		init();
    	}
    	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;
    	}
    	
    	@Override
    	protected void onDraw(Canvas canvas) {
    		// TODO Auto-generated method stub
    		super.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实现两条直线向两边发散的动画效果。






  • 相关阅读:
    CF1080D Olya and magical square
    CF1062D Fun with Integers
    leetcode378 Kth Smallest Element in a Sorted Matrix
    hdoj薛猫猫杯程序设计网络赛1003 球球大作战
    hihocoder1068 RMQ-ST算法
    hihocoder1032 最长回文子串
    hihocoder1394 网络流四·最小路径覆盖
    hihocoder1398 网络流五·最大权闭合子图
    【bzoj4562】HAOI2016食物链
    【bzoj1026】windy数
  • 原文地址:https://www.cnblogs.com/clnchanpin/p/7028317.html
Copyright © 2011-2022 走看看