Android_2D绘图的学习Paint,Canvas(一)

前言

安卓2D绘图,都是主要涉及到2个类:Paint,Canvas.

一,Paint

Paint画笔,用于指定图形或者文字的颜色,大小等。

常用方法:

setAntiAlias: 设置画笔的锯齿效果。

setColor: 设置画笔颜色

setAlpha: 设置Alpha值

setTextSize: 设置字体尺寸。

setStyle: 设置画笔风格,空心或者实心。

setStrokeWidth: 设置空心的边框宽度。

1,HelloWorld

先从经典的helloworld开始,我们画出一个蓝色,字体大小为20sp的HelloWorld。

效果:

代码:

    /**
     * 字体颜色
     */
    private int mTextColor = 0xff0000ff;
    /**
     * 画笔
     */
    private Paint mPaint;
    /**
     * 绘制的文本
     */
    private String text  = "HelloWorld";

    public CanvasView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        //初始化画笔,设置字体大小,颜色
        mPaint = new Paint();
        mPaint.setTextSize(sp2px(20));
        mPaint.setColor(mTextColor);
        setBackgroundColor(Color.parseColor("#fff1f1f1"));
    }

    public CanvasView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public CanvasView(Context context) {
        this(context,null);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //设置该View的大小为文字的大小
        int width = (int) mPaint.measureText(text);
        int height = (int) Math.abs(mPaint.descent()-mPaint.ascent());
        widthMeasureSpec = MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY);
        heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //在canvas上画出文字,参数分别为:文本字符串,文字X和Y的偏移,画笔
        canvas.drawText(text, 0, getHeight()-mPaint.descent(), mPaint);
    }

    private int sp2px(int value){
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, value, getResources().getDisplayMetrics());
    }

在构造函数中初始化画笔,然后在onDraw()方法中调用canvas的drwaText()方法即可。为了精确,我把View的高度和宽度设为了文字的宽度和高度。这里还涉及到字体偏移的问题,后面再一起讨论。

二,Canvas

Canvas画布,就像黑板一样,可以理解为画画的背景。

常用方法:

drawColor();设置画布背景色

drawLine();线

drawRect()矩形

drawRoundRect();圆角矩形

drawArc();圆弧,三点钟方向为0°

drawCircle();

1,线

先从最简单的几何图形,开始学习canvas的使用方法。

效果:

代码:

mPaint.setStrokeWidth(dp2px(2));
canvas.drawLine(0, 10, getWidth(), 10, mPaint);

设置画笔宽度,画出线条。drawLine()方法中,前两个参数为第一个点坐标(x1,y1),第3,4个参数为第二个点的坐标(x2,y2),最后一个为画笔。

2,矩形

效果:

代码:

    mPaint.setStrokeWidth(dp2px(2));
    //设置风格为空心轨迹
    mPaint.setStyle(Style.STROKE);
    RectF rectF = new RectF(getWidth()/2, 10, getWidth()-10, getHeight()-10);
    canvas.drawRoundRect(rectF, 10, 10, mPaint);

设置Paint的Style为空心轨迹,根据2个点的坐标画出矩形,圆角矩形是通过在一个矩形中绘制的。drawRect()方法的参数和线条完全相同,都是根据2个坐标点来绘制的。drawRoundRect()方法参数为矩形,x方向上的圆角,y方向上的圆角,画笔

3,圆

效果:

代码:

canvas.drawCircle(getWidth()/2, getHeight()/2, getWidth()/2-30, mPaint);    

同样设置好画笔后,绘制圆形。参数分别为:圆心的坐标(x1,y1),圆的半径,画笔。

4,圆弧

效果:

代码:

    //设置画笔抗锯齿(圆滑)
        mPaint.setAntiAlias(true);
        RectF rectF = new RectF(0, 0, getWidth()/2, getHeight());
        canvas.drawArc(rectF, 0, 90, true, mPaint);
        RectF rectF2 = new RectF(getWidth()/2, 0, getWidth(), getHeight());
        canvas.drawArc(rectF2, 0, 90, false, mPaint);

圆弧是在一个矩形中画出,所以我们先初始化一个矩形,然后再在这个矩形中,绘制圆弧。drawArc()方法参数分别为:矩形,圆弧中心的坐标(x1,y1),是否连接圆点,画笔。

5,图片

原始图片:

效果:

代码:

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.star);
        canvas.drawBitmap(bitmap, 10, 10, mPaint);

将图片拷贝到drawable文件夹下,生成bitmap对象,然后通过canvas绘制。

drawBitmap()方法参数分别为:bitmap对象,x方向偏移量,y方向偏移量,画笔。

三,Path

通过Path这个类,我们可以画出三角形,梯形等多边形。

常用方法:

moveTo();设置地点

lineTo();连接2点

close();连接起点和终点

1,三角形

效果:

代码:

        Path angle = new Path();
        angle.moveTo(50, 0);//设置起点
        angle.lineTo(0, 100);
        angle.lineTo(100, 100);
        angle.close();//闭合路径
        canvas.drawPath(angle, mPaint);

通过建立一个三角形路径,在画布上绘制出。

时间: 2024-10-10 00:04:24

Android_2D绘图的学习Paint,Canvas(一)的相关文章

Android_2D绘图的学习Paint,Canvas(二)

前言 上一节,学会了Paint,Canvas的基本用法后,这一节,学习Paint的高级用法.还没看过上一节的请点击这里:Android_2D绘图的学习Paint,Canvas(一). 一,文字的绘制 在做UI的时候,常常会绘制文字,Canvas绘制文字时,主要考虑到字体的宽度和高度问题.字体的宽度比较好理解,这里我们主要考虑一下字体的高度. 先看一张图,网上搜的: 这里说明了在安卓中绘制字体时对于高度的划分:top,ascent,baseLine,descent,bottom.有点类似我们刚开始

Android_2D绘图的学习Paint,Canvas(三)

前言 上一节,学习了Paint的高级用法后,这一节我们将canvas的用法.主要涉及到canvas的绘制坐标变换translate,rotate.还没看过上一节的请点击这里:Android_2D绘图的学习Paint,Canvas(二). 一,translate translate在很多语言的图像处理中都存在,意思是平移,在canvas中,他表示平移坐标原点.比如说,你要在一个View的中心点画一个半径为r圆.你可以这样直接画:canvas.drawCircle(getWidth()/2,getH

自定义View时,用到Paint Canvas的一些温故,讲讲平时一些效果是怎么画的(基础篇 二,图像遮盖,Canvas静态变化)

转载请注明出处:王亟亟的大牛之路 上一篇把简单的一些概念理一理,还画了个圈,那这一篇讲一下图像遮盖"Xfermode"和Canvas的旋转.平移等效果 Xfermode: AvoidXfermode 指定了一个颜色和容差,强制Paint避免在它上面绘图(或者只在它上面绘图). PixelXorXfermode 当覆盖已有的颜色时,应用一个简单的像素异或操作. PorterDuffXfermode 这是一个非常强大的转换模式,使用它,可以使用图像合成的16条Porter-Duff规则的任

【猪猪-前端】微信打飞机高质量Demo,学习HTML5+Canvas技术编写,下载即可使用,注释齐全。

原文:[猪猪-前端]微信打飞机高质量Demo,学习HTML5+Canvas技术编写,下载即可使用,注释齐全. 源代码下载地址:http://www.zuidaima.com/share/1553027668610048.htm //获取绘图环境 02 var canvas=document.getElementById('canvas'); 03 var context=canvas.getContext('2d'); 04   05   06 //创建对象集合 (集合所有精灵) 07 var 

学习HTML5 canvas遇到的问题

学习HTML5 canvas遇到的问题 1. 非零环绕原则(nonzZero rule) 非零环绕原则是canvas在进行填充的时候是否要进行填充的判断依据. 在判断填充的区域拉一条线出来,拉到图形的外面,这条拉出来的线就是辅助线.判断绘制的线是否是从辅助线的左边穿过到辅助线的右边,此时这种穿过的方式记录为+1;如果是从辅助线的右边穿到辅助线的左边,就记做-1.最后将所有记录的数字进行求和,如果求和的结果为0,代表这块区域不要填充,否则,必须填充 上面的原理较难理解,可以这样理解,当在大矩形中绘

Android Path, Region, Paint, Canvas API篇

从这篇文章开始,准备学习Android Canvas相关的一些知识点,因为Canvas使用的时候还经常要用到Path,Region,Paint.所以这里我们先熟悉Path,Region,Paint,Canvas常用的一些API,为后续的学习做好准备. 在列出Path,Region,Paint,Canvas这些API之前先展示一个具体的实例.一个仪表盘.主要用到的是Canvas的API,和一些三角函数的运算.具体效果图如下 仪表盘分成了三段(2:1:2),每一段显示不同的颜色.刻度分成8大份每小份

转载《学习HTML5 canvas遇到的问题》

学习HTML5 canvas遇到的问题 1. 非零环绕原则(nonzZero rule) 非零环绕原则是canvas在进行填充的时候是否要进行填充的判断依据. 在判断填充的区域拉一条线出来,拉到图形的外面,这条拉出来的线就是辅助线.判断绘制的线是否是从辅助线的左边穿过到辅助线的右边,此时这种穿过的方式记录为+1;如果是从辅助线的右边穿到辅助线的左边,就记做-1.最后将所有记录的数字进行求和,如果求和的结果为0,代表这块区域不要填充,否则,必须填充 上面的原理较难理解,可以这样理解,当在大矩形中绘

html5学习(一)--canvas画时钟

利用空余时间学习一下html5. 1 <!doctype html> 2 <html> 3 <head></head> 4 <body> 5 <canvas id="clock" width="500" height="500"></canvas> 6 <script> 7 var clock=document.getElementById('cloc

[游戏学习24] MFC 各种绘图 字体学习

>_<:这里包含字体设置及各种绘图,只要稍微看一下代码就能理解,这里不多介绍 >_<:Hello.h 1 #include<afxwin.h> 2 class CMyApp:public CWinApp 3 { 4 public: 5 virtual BOOL InitInstance(); 6 }; 7 class CMainWindow:public CFrameWnd 8 { 9 public: 10 CMainWindow(); 11 protected: 12