Canvas学习笔记之 2D绘图

最新推荐文章于 2023-06-23 14:57:06 发布

刹那公子

最新推荐文章于 2023-06-23 14:57:06 发布

阅读量317

点赞数

分类专栏： Android 文章标签： canvas android

本文链接：https://blog.csdn.net/qq_42654067/article/details/100546776

版权

Android 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

参考博客链接：https://blog.csdn.net/qq_41405257/article/details/80487997

1.画坐标系（canvas坐标系支持平移和旋转）

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //屏幕宽高
    int w=canvas.getWidth();
    int h=canvas.getHeight();

    Paint paint1=new Paint();

    paint1.setStyle(Paint.Style.FILL);
    //设置始末端样式
    paint1.setStrokeCap(Paint.Cap.ROUND);
    //设置画笔粗细
    paint1.setStrokeWidth(20);
    //绘制坐标系
    paint1.setColor(Color.RED);
    canvas.drawLine(0,0,w,0,paint1);
    paint1.setColor(Color.BLUE);
    canvas.drawLine(0,0,0,h,paint1);

    //平移绘制坐标系
    canvas.translate(w/4,h/4);
    paint1.setColor(Color.RED);
    canvas.drawLine(0,0,w,0,paint1);
    paint1.setColor(Color.BLUE);
    canvas.drawLine(0,0,0,h,paint1);

    //平移旋转(顺时针)   绘制坐标系
    canvas.translate(w/4,h/4);
    canvas.rotate(90);
    paint1.setColor(Color.RED);
    canvas.drawLine(0,0,w,0,paint1);
    paint1.setColor(Color.BLUE);
    canvas.drawLine(0,0,0,h,paint1);

}

2.给画布上色

canvas.drawARGB(99,100,100,100);

3.绘制文本

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //屏幕宽高
    int w=canvas.getWidth();
    int h=canvas.getHeight();
    int t=getResources().getDimensionPixelOffset(R.dimen.textHeight);
    int translate=t;
    Paint paint1=new Paint();
    paint1.setTextSize(t);
    canvas.save();
    canvas.translate(200,translate);
    canvas.drawText("正常文本",0,0,paint1);
    translate+=2*t;
    canvas.restore();

    canvas.save();
    canvas.translate(600, translate);
    paint1.setTextAlign(Paint.Align.LEFT);
    canvas.drawText("左对齐文本",0,0,paint1);
    translate+=2*t;
    canvas.restore();

    canvas.save();
    canvas.translate(600, translate);
    paint1.setTextAlign(Paint.Align.RIGHT);
    canvas.drawText("右对齐文本",0,0,paint1);
    translate+=2*t;
    canvas.restore();

    canvas.save();
    canvas.translate(600, translate);
    paint1.setTextAlign(Paint.Align.CENTER);
    canvas.drawText("居中对齐文本",0,0,paint1);
    translate+=2*t;
    paint1.setTextAlign(Paint.Align.LEFT);
    canvas.restore();

    canvas.save();
    paint1.setUnderlineText(true);
    canvas.translate(200,translate);
    canvas.drawText("下划线文本",0,0,paint1);
    paint1.setUnderlineText(false);
    translate+=2*t;
    canvas.restore();

    canvas.save();
    paint1.setFakeBoldText(true);
    canvas.translate(200,translate);
    canvas.drawText("粗体文本",0,0,paint1);
    translate+=2*t;
    canvas.restore();

    canvas.save();
    canvas.translate(200,translate);
    canvas.rotate(90);
    canvas.drawText("旋转90度文本",0,0,paint1);
    translate+=2*t;
    canvas.restore();
}

4.画点

protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //屏幕宽高
        int w=canvas.getWidth();
        int h=canvas.getHeight();
        Paint paint=new Paint();
        paint.setColor(Color.RED);

        canvas.save();
        canvas.translate(w/2,h/4);
        //设置线宽
        paint.setStrokeWidth(60);
        //圆形
        paint.setStrokeCap(Paint.Cap.ROUND);
        canvas.drawPoint(0,0,paint);
        canvas.restore();

        canvas.save();
        canvas.translate(w/2,h/2);
        //默认
        paint.setStrokeCap(Paint.Cap.BUTT);
        canvas.drawPoint(0,0,paint);
        canvas.restore();


        canvas.save();
        canvas.translate(w/2,3*h/4);
        //方形
        paint.setStrokeCap(Paint.Cap.SQUARE);
        canvas.drawPoint(0,0,paint);
        //画多条线
        float[] xys={
                0,0,400,0,
                0,100,400,100,
                0,200,400,200
        };
        canvas.drawLines(xys,paint);
        canvas.restore();
    }

5.绘制矩形

//左，上，右，下

canvas.drawRect(0,0,400,400,paint);

6.绘制圆形

protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //屏幕宽高
        int w=canvas.getWidth();
        int h=canvas.getHeight();
        Paint paint=new Paint();
        paint.setColor(Color.RED);
        paint.setStrokeWidth(20);
        paint.setStyle(Paint.Style.STROKE);
        //圆心
        canvas.drawCircle(200,200,200,paint);

        paint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(600,200,200,paint);

        paint.setStyle(Paint.Style.STROKE);

        canvas.translate(w/2,h/2);
        canvas.drawCircle(0,0,200,paint);
        canvas.drawCircle(0,0,400,paint);
    }

7.绘制椭圆

 protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //屏幕宽高
        int w=canvas.getWidth();
        int h=canvas.getHeight();
        Paint paint=new Paint();

        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.GREEN);
        paint.setStrokeWidth(20);
        canvas.drawOval(0,0,600,400,paint);

        paint.setStyle(Paint.Style.FILL);
        canvas.drawOval(0,600,600,1000,paint);
    }

8.绘制圆弧

protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //屏幕宽高
        int w=canvas.getWidth();
        int h=canvas.getHeight();
        Paint paint=new Paint();

        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.GREEN);
        paint.setStrokeWidth(20);
        RectF rectF=new RectF(0,0,600,400);
        //画出椭圆
        canvas.drawArc(rectF,0,360,true,paint);

        RectF rectF2=new RectF(0,400,600,600);
        //画出椭圆的1/4，从rectf的中心为圆心画
        canvas.drawArc(rectF2,0,90,true,paint);

        RectF rectF3=new RectF(0,600,600,800);
        canvas.drawArc(rectF3,0,90,false,paint);

        paint.setStyle(Paint.Style.FILL);
        RectF rectF4=new RectF(0,800,600,1000);
        canvas.drawArc(rectF4,0,90,true,paint);

        RectF rectF5=new RectF(0,1000,600,1200);
        canvas.drawArc(rectF5,0,90,true,paint);
    }

9.绘制路径

   protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //屏幕宽高
        int w=canvas.getWidth();
        int h=canvas.getHeight();
        Paint paint=new Paint();
        paint.setColor(Color.GREEN);
        paint.setStrokeWidth(20);
//绘制填充面
        Path path=new Path();
        //圆弧
        RectF arc=new RectF(0,0,400,300);
        path.addArc(arc,0,90);
        //椭圆，CCW表示逆时针
        RectF oval=new RectF(400,0,800,300);
        path.addOval(oval, Path.Direction.CCW);
        //圆
        RectF cir=new RectF();
        path.addCircle(950,150,150,Path.Direction.CCW);
        //矩形
        RectF rect=new RectF(0,0,200,300);
        path.addRect(rect, Path.Direction.CCW);
        canvas.drawPath(path,paint);

//绘制线条
        canvas.save();
        canvas.translate(0,400);
        Path path1=path;
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawPath(path1,paint);
        canvas.restore();

        canvas.save();
        canvas.translate(0,800);
        Path path2=new Path();
        List<Point>list=new ArrayList<>();
        paint.setStrokeWidth(10);
        list.add(new Point(0,0));
        //线段
        path2.moveTo(0,0);
        path2.lineTo(100,0);
        list.add(new Point(100,0));
        //圆弧
        RectF arcRect=new RectF(0,0,200,400);
        path2.arcTo(arcRect,270,180);
        list.add(new Point(200,200));
        //贝塞尔曲线,当前点不在起始点，要移动一下
        path2.moveTo(200,200);
        path2.quadTo(300,100,400,200);
        list.add(new Point(400,200));
        //三阶贝塞尔曲线
        path2.cubicTo(500,100,600,100,700,200);
        list.add(new Point(700,200));

        canvas.drawPath(path2,paint);
        paint.setStrokeWidth(30);
        paint.setStrokeCap(Paint.Cap.ROUND);
        for (int i = 0; i <list.size() ; i++) {
            canvas.drawPoint(list.get(i).x,list.get(i).y,paint);
        }
        canvas.restore();

    }

10.绘制bitmap

 protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //屏幕宽高
        int w=canvas.getWidth();
        int h=canvas.getHeight();
        Paint paint=new Paint();
        paint.setStyle(Paint.Style.STROKE);

        Bitmap bitmap= BitmapFactory.decodeResource(getResources(),R.drawable.ic_launcher_background);
        if (bitmap==null){
           return;
        }
        canvas.drawBitmap(bitmap,0,0,paint);
        Rect src=new Rect(0,0,bitmap.getWidth(),bitmap.getHeight());
        RectF dest=new RectF(400,0,400+bitmap.getWidth(),bitmap.getHeight()*0.5f);
        canvas.drawBitmap(bitmap,src,dest,paint);
        //防止内存泄漏
        bitmap.recycle();
    }

注意：

Paint默认的字体大小为12px，画笔的默认颜色为黑色，默认的style为FILL，默认的cap为BUTT，默认的线宽为0
如果Paint的style是FILL，则绘制填充面；如果是STROKE，则绘制轮廓线。

刹那公子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas学习笔记之 2D绘图

参考博客链接：https://blog.csdn.net/qq_41405257/article/details/804879971.画坐标系（canvas坐标系支持平移和旋转）protected void onDraw(Canvas canvas) { super.onDraw(canvas); //屏幕宽高 int w=canvas.getWid...
复制链接

扫一扫