zoukankan      html  css  js  c++  java

  • Android自定义控件：绘图（二）------路径及文字

    《Android自定义控件三部曲文章索引》: http://blog.csdn.net/harvic880925/article/details/50995268

    一、创建路径

    canvas中绘制路径利用：

    void drawPath (Path path, Paint paint)


    1、直线路径

    void moveTo (float x1, float y1):直线的开始点；即将直线路径的绘制点定在（x1,y1）的位置；
    void lineTo (float x2, float y2)：直线的结束点，又是下一次绘制直线路径的开始点；lineTo（）可以一直用；
    void close ():如果连续画了几条直线，但没有形成闭环，调用Close()会将路径首尾点连接起来，形成闭环；

    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. Paint paint=new Paint();  
    2. paint.setColor(Color.RED);  //设置画笔颜色      
    3. paint.setStyle(Style.STROKE);//填充样式改为描边   
    4. paint.setStrokeWidth(5);//设置画笔宽度  
    5.   
    6. Path path = new Path();  
    7.   
    8. path.moveTo(10, 10); //设定起始点  
    9. path.lineTo(10, 100);//第一条直线的终点，也是第二条直线的起点  
    10. path.lineTo(300, 100);//画第二条直线  
    11. path.lineTo(500, 100);//第三条直线  
    12. path.close();//闭环  
    13.   
    14. canvas.drawPath(path, paint);  


    2、矩形路径

    void addRect (float left, float top, float right, float bottom, Path.Direction dir)
    void addRect (RectF rect, Path.Direction dir)

    这里Path类创建矩形路径的参数与上篇canvas绘制矩形差不多，唯一不同的一点是增加了Path.Direction参数；
    Path.Direction有两个值：
    Path.Direction.CCW：是counter-clockwise缩写，指创建逆时针方向的矩形路径；
    Path.Direction.CW：是clockwise的缩写，指创建顺时针方向的矩形路径；

    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. //先创建两个大小一样的路径  
    2. //第一个逆向生成  
    3. Path CCWRectpath = new Path();  
    4. RectF rect1 =  new RectF(50, 50, 240, 200);  
    5. CCWRectpath.addRect(rect1, Direction.CCW);  
    6.   
    7. //第二个顺向生成  
    8. Path CWRectpath = new Path();  
    9. RectF rect2 =  new RectF(290, 50, 480, 200);  
    10. CWRectpath.addRect(rect2, Direction.CW);  
    11.   
    12. //先画出这两个路径   
    13. canvas.drawPath(CCWRectpath, paint);  
    14. canvas.drawPath(CWRectpath, paint);  

    问：从效果图中，看不出顺时针生成和逆时针生成的任何区别，怎么会没区别呢？
    答：当然没区别啦，无论正时针还是逆时针，仅仅是生成方式不同而已，矩形就那么大画出来的路径矩形当然与矩形一样大了。
    问：那生成方式有什么区别呢？
    答：生成方式的区别在于，依据生成方向排版的文字！后面我们会讲到文字，文字是可以依据路径排版的，那文字的行走方向就是依据路径的生成方向；

    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. //先创建两个大小一样的路径  
    2. //第一个逆向生成  
    3. Path CCWRectpath = new Path();  
    4. RectF rect1 =  new RectF(50, 50, 240, 200);  
    5. CCWRectpath.addRect(rect1, Direction.CCW);  
    6.   
    7. //第二个顺向生成  
    8. Path CWRectpath = new Path();  
    9. RectF rect2 =  new RectF(290, 50, 480, 200);  
    10. CWRectpath.addRect(rect2, Direction.CW);  
    11.   
    12. //先画出这两个路径   
    13. canvas.drawPath(CCWRectpath, paint);  
    14. canvas.drawPath(CWRectpath, paint);  
    15.   
    16. //依据路径写出文字  
    17. String text="风萧萧兮易水寒，壮士一去兮不复返";  
    18. paint.setColor(Color.GRAY);  
    19. paint.setTextSize(35);  
    20. canvas.drawTextOnPath(text, CCWRectpath, 0, 18, paint);//逆时针生成  
    21. canvas.drawTextOnPath(text, CWRectpath, 0, 18, paint);//顺时针生成  

    （有关文字的代码部分，可以先忽略，后面会讲到，这里只是让大家知道生成方式的用处）

    3、圆角矩形路径

    void addRoundRect (RectF rect, float[] radii, Path.Direction dir)
    void addRoundRect (RectF rect, float rx, float ry, Path.Direction dir)

    这里有两个构造函数，部分参数说明如下：
    第一个构造函数：可以定制每个角的圆角大小：
    float[] radii：必须传入8个数值，分四组，分别对应每个角所使用的椭圆的横轴半径和纵轴半径，如｛x1,y1,x2,y2,x3,y3,x4,y4｝，其中，x1,y1对应第一个角的（左上角）用来产生圆角的椭圆的横轴半径和纵轴半径，其它类推……
    第二个构造函数：只能构建统一圆角大小
    float rx：所产生圆角的椭圆的横轴半径；
    float ry：所产生圆角的椭圆的纵轴半径；

    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. Path path = new Path();  
    2. RectF rect1 =  new RectF(50, 50, 240, 200);  
    3. path.addRoundRect(rect1, 10, 15 , Direction.CCW);  
    4.   
    5. RectF rect2 =  new RectF(290, 50, 480, 200);  
    6. float radii[] ={10,15,20,25,30,35,40,45};  
    7. path.addRoundRect(rect2, radii, Direction.CCW);  
    8.   
    9. canvas.drawPath(path, paint);  


    4、圆形路径

    void addCircle (float x, float y, float radius, Path.Direction dir)

    参数说明：
    float x：圆心X轴坐标 
    float y：圆心Y轴坐标
    float radius：圆半径

    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. Path path = new Path();  
    2. path.addCircle(200, 200, 100, Direction.CCW);  
    3. canvas.drawPath(path, paint);  


    5、椭圆路径

    void addOval (RectF oval, Path.Direction dir)

    参数说明：
    RectF oval：生成椭圆所对应的矩形
    Path.Direction :生成方式，与矩形一样，分为顺时针与逆时针，意义完全相同，不再重复

    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. Path path = new Path();  
    2. RectF rect =  new RectF(50, 50, 240, 200);  
    3. path.addOval(rect, Direction.CCW);  
    4. canvas.drawPath(path, paint);  


    6、弧形路径

    void addArc (RectF oval, float startAngle, float sweepAngle)

    参数：
    RectF oval：弧是椭圆的一部分，这个参数就是生成椭圆所对应的矩形；
    float startAngle：开始的角度，X轴正方向为0度
    float sweepAngel：持续的度数；

    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. Paint paint=new Paint();  
    2. paint.setColor(Color.RED);  //设置画笔颜色      
    3. paint.setStyle(Style.STROKE);//填充样式改为描边   
    4. paint.setStrokeWidth(5);//设置画笔宽度  
    5.   
    6. Path path = new Path();  
    7. RectF rect =  new RectF(50, 50, 240, 200);  
    8. path.addArc(rect, 0, 100);  
    9.   
    10. canvas.drawPath(path, paint);//画出路径  


    7、线段轨迹---待补充

    void quadTo (float x1, float y1, float x2, float y2)


    二、文字

    1、Paint相关设置

    [html] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. //普通设置  
    2. paint.setStrokeWidth (5);//设置画笔宽度  
    3. paint.setAntiAlias(true); //指定是否使用抗锯齿功能，如果使用，会使绘图速度变慢  
    4. paint.setStyle(Paint.Style.FILL);//绘图样式，对于设文字和几何图形都有效  
    5. paint.setTextAlign(Align.CENTER);//设置文字对齐方式，取值：align.CENTER、align.LEFT或align.RIGHT  
    6. paint.setTextSize(12);//设置文字大小  
    7.   
    8. //样式设置  
    9. paint.setFakeBoldText(true);//设置是否为粗体文字  
    10. paint.setUnderlineText(true);//设置下划线  
    11. paint.setTextSkewX((float) -0.25);//设置字体水平倾斜度，普通斜体字是-0.25  
    12. paint.setStrikeThruText(true);//设置带有删除线效果  
    13.   
    14. //其它设置  
    15. paint.setTextScaleX(2);//只会将水平方向拉伸，高度不会变  

    示例1：绘图样式的区别：

    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. Paint paint=new Paint();  
    2. paint.setColor(Color.RED);  //设置画笔颜色      
    3.   
    4. paint.setStrokeWidth (5);//设置画笔宽度  
    5. paint.setAntiAlias(true); //指定是否使用抗锯齿功能，如果使用，会使绘图速度变慢  
    6. paint.setTextSize(80);//设置文字大小  
    7.   
    8. //绘图样式，设置为填充      
    9. paint.setStyle(Paint.Style.FILL);     
    10. canvas.drawText("欢迎光临Harvic的博客", 10,100, paint);  
    11.   
    12. //绘图样式设置为描边   
    13. paint.setStyle(Paint.Style.STROKE);  
    14. canvas.drawText("欢迎光临Harvic的博客", 10,200, paint);  
    15.   
    16. //绘图样式设置为填充且描边    
    17. paint.setStyle(Paint.Style.FILL_AND_STROKE);  
    18. canvas.drawText("欢迎光临Harvic的博客", 10,300, paint);  

    示例二：文字样式设置及倾斜度正负区别

    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. Paint paint=new Paint();  
    2. paint.setColor(Color.RED);  //设置画笔颜色      
    3.   
    4. paint.setStrokeWidth (5);//设置画笔宽度  
    5. paint.setAntiAlias(true); //指定是否使用抗锯齿功能，如果使用，会使绘图速度变慢  
    6. paint.setTextSize(80);//设置文字大小  
    7. paint.setStyle(Paint.Style.FILL);//绘图样式，设置为填充     
    8.   
    9. //样式设置  
    10. paint.setFakeBoldText(true);//设置是否为粗体文字  
    11. paint.setUnderlineText(true);//设置下划线  
    12. paint.setStrikeThruText(true);//设置带有删除线效果  
    13.   
    14. //设置字体水平倾斜度，普通斜体字是-0.25，可见往右斜  
    15. paint.setTextSkewX((float) -0.25);  
    16. canvas.drawText("欢迎光临Harvic的博客", 10,100, paint);  
    17.   
    18. //水平倾斜度设置为：0.25，往左斜  
    19. paint.setTextSkewX((float) 0.25);  
    20. canvas.drawText("欢迎光临Harvic的博客", 10,200, paint);  

    示例三：水平拉伸设置（ paint.setTextScaleX(2);）

    写三行字，第一行，水平未拉伸的字体；第二行，水平拉伸两倍的字体；第三行，水平未拉伸和水平拉伸两部的字体写在一起，可以发现，仅是水平方向拉伸，高度并未改变；

    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. Paint paint=new Paint();  
    2. paint.setColor(Color.RED);  //设置画笔颜色      
    3.   
    4. paint.setStrokeWidth (5);//设置画笔宽度  
    5. paint.setAntiAlias(true); //指定是否使用抗锯齿功能，如果使用，会使绘图速度变慢  
    6. paint.setTextSize(80);//设置文字大小  
    7. paint.setStyle(Paint.Style.FILL);//绘图样式，设置为填充     
    8.   
    9. //变通样式字体  
    10. canvas.drawText("欢迎光临Harvic的博客", 10,100, paint);  
    11.   
    12. //水平方向拉伸两倍  
    13. paint.setTextScaleX(2);//只会将水平方向拉伸，高度不会变  
    14. canvas.drawText("欢迎光临Harvic的博客", 10,200, paint);  
    15.   
    16. //写在同一位置,不同颜色,看下高度是否看的不变  
    17. paint.setTextScaleX(1);//先还原拉伸效果  
    18. canvas.drawText("欢迎光临Harvic的博客", 10,300, paint);  
    19.   
    20. paint.setColor(Color.GREEN);  
    21. paint.setTextScaleX(2);//重新设置拉伸效果  
    22. canvas.drawText("欢迎光临Harvic的博客", 10,300, paint);  


    2、canvas绘图方式

    （1）、普通水平绘制

    构造函数：

    void drawText (String text, float x, float y, Paint paint)
    void drawText (CharSequence text, int start, int end, float x, float y, Paint paint)
    void drawText (String text, int start, int end, float x, float y, Paint paint)
    void drawText (char[] text, int index, int count, float x, float y, Paint paint)

    说明：
    第一个构造函数：最普通简单的构造函数；
    第三、四个构造函数：实现截取一部分字体给图；
    第二个构造函数：最强大，因为传入的可以是charSequence类型字体，所以可以实现绘制带图片的扩展文字（待续），而且还能截取一部分绘制

    这几个函数就不再多说了，很简单，前面我们也一直在用第一个构造函数，文字截取一般用不到，我也不多说了，浪费时间，可能大家看到有个构造函数中，可以传入charSequence类型的字符串，charSequence是可以利用spannableString来构造有图片的字符串的，那这里是不是可以画出带有图片的字符串来呢 ，我想多了，实际证明，canvas画图是不支持Span替换的。所以这里的charSequence跟普通的String没有任何区别的。


    （2）、指定个个文字位置

    void drawPosText (char[] text, int index, int count, float[] pos, Paint paint)
    void drawPosText (String text, float[] pos, Paint paint)

    说明：
    第一个构造函数：实现截取一部分文字绘制；

    参数说明：
    char[] text：要绘制的文字数组
    int index:：第一个要绘制的文字的索引
    int count：要绘制的文字的个数，用来算最后一个文字的位置，从第一个绘制的文字开始算起
    float[] pos：每个字体的位置，同样两两一组，如｛x1,y1,x2,y2,x3,y3……｝

    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. Paint paint=new Paint();  
    2. paint.setColor(Color.RED);  //设置画笔颜色      
    3.   
    4. paint.setStrokeWidth (5);//设置画笔宽度  
    5. paint.setAntiAlias(true); //指定是否使用抗锯齿功能，如果使用，会使绘图速度变慢  
    6. paint.setTextSize(80);//设置文字大小  
    7. paint.setStyle(Paint.Style.FILL);//绘图样式，设置为填充     
    8.   
    9. float []pos=new float[]{80,100,  
    10.                         80,200,  
    11.                         80,300,  
    12.                         80,400};  
    13. canvas.drawPosText("画图示例", pos, paint);//两个构造函数  

    （3）、沿路径绘制

    void drawTextOnPath (String text, Path path, float hOffset, float vOffset, Paint paint)
    void drawTextOnPath (char[] text, int index, int count, Path path, float hOffset, float vOffset, Paint paint)

    参数说明：

    有关截取部分字体绘制相关参数（index,count），没难度，就不再讲了，下面首重讲hOffset、vOffset
    float hOffset  : 与路径起始点的水平偏移距离
    float vOffset  : 与路径中心的垂直偏移量

    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. Paint paint=new Paint();  
    2. paint.setColor(Color.RED);  //设置画笔颜色      
    3.   
    4. paint.setStrokeWidth (5);//设置画笔宽度  
    5. paint.setAntiAlias(true); //指定是否使用抗锯齿功能，如果使用，会使绘图速度变慢  
    6. paint.setTextSize(45);//设置文字大小  
    7. paint.setStyle(Paint.Style.STROKE);//绘图样式，设置为填充  
    8.   
    9. String string="风萧萧兮易水寒，壮士一去兮不复返";  
    10.   
    11. //先创建两个相同的圆形路径，并先画出两个路径原图  
    12. Path circlePath=new Path();  
    13. circlePath.addCircle(220,200, 180, Path.Direction.CCW);//逆向绘制,还记得吗,上篇讲过的  
    14. canvas.drawPath(circlePath, paint);//绘制出路径原形  
    15.   
    16. Path circlePath2=new Path();  
    17. circlePath2.addCircle(750,200, 180, Path.Direction.CCW);  
    18. canvas.drawPath(circlePath2, paint);//绘制出路径原形  
    19.   
    20. paint.setColor(Color.GREEN);  
    21. //hoffset、voffset参数值全部设为0，看原始状态是怎样的  
    22. canvas.drawTextOnPath(string, circlePath, 0, 0, paint);  
    23. //第二个路径，改变hoffset、voffset参数值  
    24. canvas.drawTextOnPath(string, circlePath2, 80, 30, paint);  

    3、字体样式设置（Typeface）

    在Paint中设置字体样式：

    paint.setTypeface(typeface);


    Typeface相关

    概述：Typeface是专门用来设置字体样式的，通过paint.setTypeface()来指定。可以指定系统中的字体样式，也可以指定自定义的样式文件中获取。要构建Typeface时，可以指定所用样式的正常体、斜体、粗体等，如果指定样式中，没有相关文字的样式就会用系统默认的样式来显示，一般默认是宋体。

    创建Typeface：

     Typeface create(String familyName, int style) //直接通过指定字体名来加载系统中自带的文字样式
     Typeface create(Typeface family, int style)     //通过其它Typeface变量来构建文字样式
     Typeface createFromAsset(AssetManager mgr, String path) //通过从Asset中获取外部字体来显示字体样式
     Typeface createFromFile(String path)//直接从路径创建
     Typeface createFromFile(File path)//从外部路径来创建字体样式
     Typeface defaultFromStyle(int style)//创建默认字体

    上面的各个参数都会用到Style变量,Style的枚举值如下:
    Typeface.NORMAL  //正常体
    Typeface.BOLD  //粗体
    Typeface.ITALIC  //斜体
    Typeface.BOLD_ITALIC //粗斜体

    （1）、使用系统中的字体

    从上面创建Typeface的所有函数中可知，使用系统中自带的字体有下面两种方式来构造Typeface：

     Typeface defaultFromStyle(int style)//创建默认字体
     Typeface create(String familyName, int style) //直接通过指定字体名来加载系统中自带的文字样式

    其实，第一个仅仅是使用系统默认的样式来绘制字体，基本没有可指定性，就不再讲了，使用起来难度也不大，下面只以第二个构造函数为例，指定宋体绘制：

    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. //使用系统自带字体绘制          
    2. Paint paint=new Paint();  
    3. paint.setColor(Color.RED);  //设置画笔颜色      
    4.   
    5. paint.setStrokeWidth (5);//设置画笔宽度  
    6. paint.setAntiAlias(true); //指定是否使用抗锯齿功能，如果使用，会使绘图速度变慢  
    7. paint.setTextSize(60);//设置文字大小  
    8. paint.setStyle(Paint.Style.STROKE);//绘图样式，设置为填充  
    9.   
    10. String familyName = "宋体";  
    11. Typeface font = Typeface.create(familyName,Typeface.NORMAL);  
    12. paint.setTypeface(font);  
    13. canvas.drawText("欢迎光临Harvic的博客",10,100, paint);  

    （不知道为什么，我用其它系统中也带有字体的时候，也还是用宋体写，烦死，有知道的同学，教一下，谢谢！）

    2、自字义字体

    自定义字体的话，我们就需要从外部字体文件加载我们所需要的字形的，从外部文件加载字形所使用的Typeface构造函数如下面三个：
     Typeface createFromAsset(AssetManager mgr, String path) //通过从Asset中获取外部字体来显示字体样式
     Typeface createFromFile(String path)//直接从路径创建
     Typeface createFromFile(File path)//从外部路径来创建字体样式

    后面两个从路径加载难度不大，而我们一般也不会用到，这里我们说说从Asset文件中加载；

    首先在Asset下建一个文件夹，命名为Fonts，然后将字体文件jian_luobo.ttf 放入其中

    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. //自定义字体，，，迷你简罗卜  
    2. Paint paint=new Paint();  
    3. paint.setColor(Color.RED);  //设置画笔颜色      
    4.   
    5. paint.setStrokeWidth (5);//设置画笔宽度  
    6. paint.setAntiAlias(true); //指定是否使用抗锯齿功能，如果使用，会使绘图速度变慢  
    7. paint.setTextSize(60);//设置文字大小  
    8. paint.setStyle(Paint.Style.FILL);//绘图样式，设置为填充  
    9.   
    10. AssetManager mgr=m_context.getAssets();//得到AssetManager  
    11. Typeface typeface=Typeface.createFromAsset(mgr, "fonts/jian_luobo.ttf");//根据路径得到Typeface  
    12. paint.setTypeface(typeface);  
    13. Log.v("msg",typeface.toString());  
    14. canvas.drawText("欢迎光临Harvic的博客",10,100, paint);//两个构造函数  


    好了，本篇就到这了；


    本篇所涉及到的代码及字体文件下载地址：http://download.csdn.net/detail/harvic880925/7845017

    请大家尊重原创者版权，转载请标明出处：http://blog.csdn.net/harvic880925/article/details/38926877  谢谢！
  • 相关阅读:
    MySQL 5.6 中 TIMESTAMP 的变化
    NetWork
    Esper
    maven nexus linux私服搭建
    file not found app文件
    设计模式之十五:訪问者模式（Visitor Pattern）
    邻接表 几篇不错的解说
    自己定义带三角形箭头的TextView
    linux程序调试命令addr2line之入门简单介绍(本文先不聊gdb调试)
    AndroidManifest 中android:exported
  • 原文地址：https://www.cnblogs.com/vegetate/p/9997289.html
Copyright © 2011-2022 走看看