Android25-2D、xml绘图及绘图技巧

dp、sp、px之间的单位转换

/**
 * dp、sp转换为px的工具类
 */
public class DisplayUtil {
    /**
     * 将px值转换为dip或dp值,保证尺寸大小不变
     */
    public static int px2dip(Context context, float pxValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int)(pxValue/scale + 0.5f);
    }
    /**
     *将dip或dp值转换为px值,保证尺寸大小不变
     */
    public static int dip2px(Context context, float dipValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int)(dipValue * scale + 0.5f);
    }
    /**
     *将px值转换为sp值,保证文字大小不变
     * @param context
     * @param pxValue
     * @return
     */
    public static int px2ps(Context context,float pxValue) {
        final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
        return (int)(pxValue/fontScale + 0.5f);
    }
    /**
     *将sp值转换为px值,保证文字大小不变
     * @param context
     * @param spValue
     * @return
     */
    public static int sp2px(Context context, float spValue) {
        final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
        return (int)(spValue * fontScale + 0.5f);
    }
}

2D绘图基础

系统通过提供Canvas对象来提供绘图方法。这个对象提供了各种绘制图像的API,如:drawPoint(点)、drawLine(线)、drawRect(矩形)、drawVertices(多边形)、drawArc(弧)、drawCircle(圆)等。

  • Paint(画笔)是绘图中一个非常重要的元素,一下是一些属性设置和对应的功能。
>setAntiAlias();        //设置画笔的锯齿效果
>setColor();            //设置画笔的颜色
>setARGB();             //设置画笔的ARGB值
>setAlpha();            //设置画笔的Alpha值
>setTextSize;           //设置字体尺寸
>setStyle();            //设置画笔的风格(空心或实心)
>setStrokeWidth();      //设置空心边框的宽度
  • 以下是一些常用的图形绘制
>public class DrawViewTest extends View {
    private float touchX = -100, touchY = -100;
    private Paint drawPaint;
    public DrawViewTest(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }
    public DrawViewTest(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }
    public DrawViewTest(Context context) {
        super(context);
        initView();
    }
    private void initView() {
        setBackgroundColor(Color.YELLOW);
        //设置画笔样式
        drawPaint = new Paint();   drawPaint.setColor(Color.BLUE);     drawPaint.setStrokeWidth(5);  drawPaint.setStyle(Paint.Style.STROKE);
   drawPaint.setTextSize(100);
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        touchX = event.getX();
        touchY = event.getY();
        //重绘视图
        invalidate();
        return true;
    }
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制点
//        canvas.drawPoint(touchX, touchY, drawPaint);
        //绘制直线
//       canvas.drawLine(touchX, touchY, touchX, touchY + 100, drawPaint);
        //绘制圆角矩形
//        canvas.drawRoundRect(touchX,touchY,touchX+100,touchY+100,10,45,drawPaint);
        //绘制矩形
//        canvas.drawRect(touchX, touchY, touchX + 100, touchY + 100, drawPaint);
        //绘制圆
//        canvas.drawCircle(touchX, touchY, 50, drawPaint);
        //绘制弧形扇形,倒数第二个参数为true时绘制的为扇形,否则为弧形
//        canvas.drawArc(touchX, touchY, touchX + 100, touchY + 100, 180, 90, false, drawPaint);
        //绘制椭圆形
//        canvas.drawOval(touchX, touchY, touchX + 200, touchY + 100, drawPaint);
        //绘制文本
//        canvas.drawText("我是绘制的文本", touchX, touchY, drawPaint);
        //绘制路径
//        Path path = new Path();
//        path.moveTo(touchX, touchY);
//        //lineTo()传入的参数时结束点的坐标。
//        path.lineTo(touchX + 100, touchY);
//        path.lineTo(touchX + 100, touchY + 100);
//        path.lineTo(touchX + 50, touchY + 50);
//        canvas.drawPath(path, drawPaint);
    }
}

XML绘图

  • Shape

    可以在XML中绘制各种形状

  • Layer

    可以实现类似PhotoShop中图层的概念

  • Selector

    Selector的作用在于帮助开发者实现静态绘图中的事件反馈。

Android绘图技巧

  • Canvas对象常用方法

    • Canvas.save() : 将之前已绘制的图像保存起来,让后续的操作在一个新的图层上操作。
    • Canvas.restore : 将我们在save()之后绘制的图像与save()之前的图像进行合并。
    • Canvas.translate() : 在调用了translate(x, y)之后,将原点(0, 0)移动到了(x, y), 之后的所有操作都将以(x, y)为原点执行/
    • Canvas.rotate : 与translate()方法同理,将坐标系旋转了一定的角度。
  • Layer图层

    Android通过调用saveLayer()方法、saveLayerAlpha()方法将一个图层入栈,使用restore()、restoreToCount()方法将一个图层出栈,入栈的时候,后面所有的操作都发生在这个图层上,而出栈后,则会把图像绘制到上层Canvas上。

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawColor(Color.WHITE);
        Paint mPaint = new Paint();
        mPaint.setColor(Color.BLUE);
        canvas.drawCircle(150, 150, 100, mPaint);
        //当透明度为127:即半透明
        //255:完全不透明
        //0: 完全透明
        //layer入栈,之后的操作在此图层上
        canvas.saveLayerAlpha(0, 0, 400, 400, 127, Canvas.CLIP_TO_LAYER_SAVE_FLAG);
        mPaint.setColor(Color.RED);
        canvas.drawCircle(200, 200, 100, mPaint);
        canvas.restore();
    }
    
  • SufacerView

    Android系统提供了View进行绘图处理,View通过刷新来重绘视图,刷新间隔为16ms,如果在16ms内View无法完成了所有的重绘操作,那么用户在视觉上就会产生卡顿的感觉。为了避免这一问题,Android提供了SurfaceView组件来解决这个问题。

    • 以下是SurfaceView和View的一些区别

    • View主要适用于主动更新的情况,SurfaceView主要适用于被动更新的情况,例如频繁的刷新。

    • View在主线程对画面进行刷新,而SurfacerView通常会通过一个子线程来进行页面的刷新。

    • View在绘图时没有双缓冲机制,而SurfaceView在底层机制中就已经实现了双缓冲机制。

    注:如果自定义的view需要频繁刷新,或者刷新时数据处理量大的话,可以优先考虑用SurfaceView来取代View

    • 以下时自定义surfaceview的简单模版
    public class SurfaceViewTemplate extends SurfaceView
        implements SurfaceHolder.Callback, Runnable {
    //自定义SurfaceView通常要定义这三个成员变量
    // SurfaceHolder
    private SurfaceHolder mHolder;
    // 用于绘图的Canvas
    private Canvas mCanvas;
    // 子线程标志位
    private boolean mIsDrawing;
    public SurfaceViewTemplate(Context context) {
        super(context);
        initView();
    }
    public SurfaceViewTemplate(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }
    public SurfaceViewTemplate(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initView();
    }
    //初始化方法
    private void initView() {
        //初始化一个SurfaceHolder对象,并注册SurfaceHolder的回调方法
        mHolder = getHolder();
        mHolder.addCallback(this);
        setFocusable(true);
        setFocusableInTouchMode(true);
        this.setKeepScreenOn(true);
        //mHolder.setFormat(PixelFormat.OPAQUE);
    }
    @Override
    public void run() {
        //子线程,使用一个While(mIsDrawing)循环来不停地进行绘制
        while (mIsDrawing) {
            draw();
        }
    }
    //绘制的具体逻辑
    private void draw() {
        try {
            //通过lockCanvas()方法获得当前的Canvas绘图对象
            mCanvas = mHolder.lockCanvas();
            // draw sth
        } catch (Exception e) {
        } finally {
            if (mCanvas != null)
                //通过unlockCanvasAndPost()方法对画布内容进行提交
                mHolder.unlockCanvasAndPost(mCanvas);
        }
    }
    ///surfaceHolder的三个回调方法
    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        mIsDrawing = true;
        //开启子线程进行绘制
        new Thread(this).start();
    }
    @Override
    public void surfaceChanged(SurfaceHolder holder,
                               int format, int width, int height) {
    }
    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {
        mIsDrawing = false;
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容