Android--Canvas

最新推荐文章于 2021-06-23 20:16:52 发布
最新推荐文章于 2021-06-23 20:16:52 发布
阅读量177 收藏
点赞数
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daividtu/article/details/89353105
版权

draw系列

canvas.drawArc

1.方法

drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter,Paint paint)
drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

2.案例

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.RED);
        mPaint.setAntiAlias(true);
        RectF recf = new RectF(120,120,300,300);
        canvas.drawRect(recf,paint2);
        /**
         * recf 中心为坐标中心
         * startAngle，负数或大于360则对360模除。
         * sweepAngle，大于360，则画出一圈。
         * userCenter 若为true表示此弧会和 RectF 中心相连形成扇形，否则，弧的两头直接相连形成图形。
         * mPaint 画笔
         */
        canvas.drawArc(recf,0,150,true,mPaint);
    }

canvas.drawCircle

1.方法

drawCircle(float cx, float cy, float radius, Paint paint)

2.案例

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.RED);
        mPaint.setAntiAlias(true);
        /**
         * cx cy 所画圆的中心位置
         * radius 所画圆的半径
         * mPaint 画笔
         */
        canvas.drawCircle(100,100,80,mPaint);
    }

canvas.drawBitmap

1.方法1

/**
 * bitmap 要画在画布上的位图
 * matrix 构建的矩阵作用于将要画出的位图
 */
drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)

案例

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.RED);
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        Matrix matrix = new Matrix();
        matrix.postTranslate(400,0);//左移400
        matrix.postRotate(10);//顺时针旋转10
        canvas.drawBitmap(BitmapFactory.decodeResource(getResources(),R.mipmap.mv),matrix,mPaint);
    }

2.方法2

/**
 * src 可为null 表示画整个位图，否则只画出位图的一块矩形区域图
 * dst 定义的一个矩形范围，位图会平移或缩放来将自身放入矩形内
 */
drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint)

案例

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.RED);
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        Rect rect = new Rect(100,10,200,110);//取bitmap上src区域部分图像
        Rect dst = new Rect(100,100,500,500);//绘制的最终区域，一定填满
        canvas.drawBitmap(BitmapFactory.decodeResource(getResources(),R.mipmap.mv),rect,dst,mPaint);
    }

3.方法3

 drawBitmap(Bitmap bitmap, float left, float top, Paint paint)

案例

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(Color.RED);
        mPaint.setAntiAlias(true);        canvas.drawBitmap(BitmapFactory.decodeResource(getResources(),R.mipmap.mv),200,200,mPaint);
    }

4.方法4

drawBitmapMesh(Bitmap bitmap, int meshWidth, int meshHeight, float[] verts, int vertOffset, int[] colors, int colorOffset, Paint paint)

canvas.drawColor,drawRGB

画整个画布的背景

canvas.drawLine(s)

1.方法1

/**
 * 前四个参数为直线的起点和终点的XY轴坐标
 */
drawLine(float startX, float startY, float stopX, float stopY, Paint paint)

案例

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(Color.RED);
        mPaint.setAntiAlias(true);
        mPaint.setTextSize(64);
        canvas.drawText("起点(20,100)",22,100,mPaint);
        canvas.drawText("终点(250,200)",252,200,mPaint);
        canvas.drawLine(20,100,250,200,mPaint);
    }

2.方法2

drawLines(float[] ps,Paint paint)

案例

@SuppressLint("Range")
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(Color.RED);
        mPaint.setAntiAlias(true);
        mPaint.setTextSize(64);
        canvas.drawText("A(20,100)",22,100,mPaint);
        canvas.drawText("B(250,200)",252,200,mPaint);
        canvas.drawText("C(20,300)",22,300,mPaint);
        canvas.drawText("D(250,400)",252,400,mPaint);
        canvas.drawLines(new float[]{20,100,250,200,250,200,20,300,20,300,250,400},mPaint);
    }

3.方法3

/**
 *pts:待画的坐标点数组，格式为(x1,y1,x2,y2,...),至少4个值
 *offset:要跳过坐标点数组中几个值才开始画(必须是4的倍数)
 *count:至少为2，offset 之后数组的大小
 */
drawLines(float[] pts, int offset, int count, Paint paint)

案例

@SuppressLint("Range")
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(Color.RED);
        mPaint.setAntiAlias(true);
        mPaint.setTextSize(64);
        canvas.drawText("A(20,100)",22,100,mPaint);
        canvas.drawText("B(250,200)",252,200,mPaint);
        canvas.drawText("C(20,300)",22,300,mPaint);
        canvas.drawText("D(250,400)",252,400,mPaint);
        canvas.drawLines(new float[]{20,100,250,200,250,200,20,300,20,300,250,400},4,8,mPaint);
    }

canvas.drawRect

1.方法

/**
 * 确定矩形四个顶点的位置配上画笔即可
 */
void drawRect(float left, float top, float right, float bottom, Paint paint)

void drawRect(Rect r, Paint paint) 

void drawRect(RectF r, Paint paint)

canvas.drawOval

drawOval(RectF oval,Paint paint)

drawOval(float left, float top, float right, float bottom, Paint paint)

canvas.drawPaint

方法

/**
 *自定义paint 画在整个画布上
 */
drawPaint(Paint paint)

canvas.drawPoint(s)

/**
 *类似drawLine(s) 可以参考
 */
drawPoint(float x, float y,Paint paint)

drawPoints(float[] pts, Paint paint)

drawPoints(float[] pts, int offset, int count,Paint paint)

canvas.drawRoundRect

/**
 *  rx,ry 表示 left 到 left+rx 与 left 到 left+ry 所围区域做弧，其余三个角类似，当 rx=ry>=(right-left)/2 时表示画一个半径为 rx(ry) 的圆（刚好外接一个矩形）
 */
drawRoundRect(RectF rect, float rx, float ry, Paint paint)   

drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint)

案例

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(Color.RED);
        mPaint.setAntiAlias(true);
        canvas.drawRoundRect(new RectF(100,200,400,400),50,50,mPaint);
    }

canvas.drawText

1.方法1

/**
 * x,y位置开始画text 注意 其中y 是表示文字的基线(baseLine)
 */
drawText(String text,float x,float y,Paint paint)

案例

String text = "涂文远TWYtwy abcd";
int centery = 300;
mPaint.setAntiAlias(true);
mPaint.setDither(true);
mPaint.setTextSize(100);
mPaint.setColor(Color.RED);
 
paint2.reset();
paint2.setColor(Color.GREEN);
paint2.setAntiAlias(true);
canvas.drawLine(0,centery,1000,centery,paint2);//中心线
 
Paint.FontMetricsInt fontMetricsInt = mPaint.getFontMetricsInt();
int baseliney = centery+(fontMetricsInt.bottom-fontMetricsInt.top)/2-fontMetricsInt.bottom;
canvas.drawLine(0,baseliney,1000,baseliney,paint2);//基线

2.方法2

/**
 * 画出start 到 end(不含end)之间的字符
 */ 
drawText(CharSequence text, int start, int end, float x, float y, Paint paint)

案例

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(Color.RED);
        mPaint.setAntiAlias(true);
        mPaint.setTextSize(32);
        canvas.drawText("abcdefg",3,6,50,300,mPaint);
    }

3.方法3

/*
 * text 字符数组的定义
 * index 表示从第几个字符开始
 * count 表示截取数组的长度
 */
drawText(char[] text, int index, int count, float x, float y, Paint paint)

案例

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(Color.RED);
        mPaint.setAntiAlias(true);
        mPaint.setTextSize(64);
        canvas.drawText("abcdefg".toCharArray(),3,2,50,300,mPaint);
    }

4.方法4

/**
 * path文字绘制的路径
 * hOffset 相对于路径的水平偏移量
 * vOffset 相对于路径垂直偏移量
 */
drawTextOnPath(String text, Path path, float hOffset, float vOffset, Paint paint)

案例

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(Color.RED);
        mPaint.setAntiAlias(true);
        mPaint.setTextSize(32);
        Path path = new Path();
        path.addCircle(100,100,50,Path.Direction.CCW);
        canvas.drawPath(path,paint2);
        canvas.drawTextOnPath("abcdef",path,0,0,mPaint);
    }

5.方法5

/**
 * text 字符数组的定义
 * index 表示从第几个开始
 * count 表示截取数组的长度
 * path 路径
 */
drawTextOnPath(char[] text, int index, int count, Path path, float hOffset, float vOffset, Paint paint)

6.方法6

/**
 * contextStart:可选，直接=start
 * contextEnd：可选，直接=end
 * x,y：文字绘制起点
 * isRt1(isRightToLeft):文字是否支持rtl
 */
drawTextRun(CharSequence text, int start, int end, int contextStart, int contextEnd, float x, float y, boolean isRtl, Paint paint)  

drawTextRun(char[] text, int index, int count, int contextIndex, int contextCount, float x, float y, boolean isRtl, Paint paint)

案例

@RequiresApi(api = Build.VERSION_CODES.M)
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(Color.RED);
        mPaint.setAntiAlias(true);
        mPaint.setTextSize(32);
        canvas.drawTextRun("abcdefg".toCharArray(),2,3,2,3,50,300,true,mPaint);
    }

canvas.drawPath

/**
 * 根据定义的路径画出图
 */
drawPath(Path path, Paint paint)

案例

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(Color.RED);
        mPaint.setAntiAlias(true);
        mPaint.setTextSize(32);
        Path path = new Path();
        path.addCircle(300,300,150,Path.Direction.CW);
        canvas.drawPath(path,mPaint);
    }

canvas.clipxxx系列

canvas.clipPath

1.方法1

/**
 * 按所定义的路线剪裁,默认Region.Op.INTERSECT表示剪裁出相交的部分
 */
clipPath(Path path)  

/**
 * 用指定的路径 path 修改当前的剪裁对op参数的理解:以剪裁两次的区域分别为A，B来区别
 * Region.Op.DIFFERENCE:剪裁出差异的部分，类似 A-B 部分
 * Region.Op.REPLACE:后剪裁B的覆盖剪裁的A
 * Region.Op.REVERSE_DEFFERENCE:剪裁出差异的部分，类似 B-A 部分
 * Region.Op.INTERSECT:剪裁出相交的部分，类似 A交B 部分
 * Region.Op.UNION:剪裁出AB合并的部分，类似** AUB**
 * Region.Op.XOR：是** (AUB)-(A交B)** 刚好与** A交B** 相对
 */
clipPath(Path path, Region.Op op)  

clipRect(Rect rect)  

clipRect(Rect[F] rect, Region.Op op)//[]表示可选

案例

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.RED);
        canvas.drawColor(Color.BLUE);
        canvas.drawRect(new RectF(20, 20, 120, 120), mPaint);
        canvas.drawCircle(120, 70, 50, mPaint);
        canvas.clipRect(new RectF(20, 20, 120, 120));
        Path path = new Path();
        path.addCircle(120, 70, 50, Path.Direction.CCW);
        canvas.clipPath(path, op);
        canvas.drawColor(Color.GREEN);
        Toast.makeText(getContext(),op.name(),Toast.LENGTH_LONG).show();
    }

案例

canvas的保存与恢复

  1. 解释：用来保存或恢复 Canvas 的状态
  2. 作用：save 之后可以调用 Canvas 的平移、放缩、旋转、错切、裁剪等对当前画布进行操作,再进行相应的绘制，避免影响画布上已绘制的 view，配合 canvas.restore()(将当前画布恢复到初始状态) 使用

canvas的变幻操作

canvas.translate

/**
 * 作用 移动当前画布水平距离dx 垂直距离dy
 */
canvas.translate(float dx,float dy)

案例

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.RED);
        canvas.drawColor(Color.BLUE);
        canvas.translate(100,100);
        canvas.drawCircle(0,0,50,mPaint);
    }

canvas.scale

1.方法1

/**
 * 作用：sx、sy 是 x、y 方向上缩放的倍数,画布缩放后，再画出的图片相应的坐标都会进行缩放
 */
canvas.scale(float sx, float sy)

案例

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.RED);
        canvas.drawColor(Color.BLUE);
        canvas.save();
        canvas.scale(0.5f,0.5f);//x,y均缩小一半
        canvas.drawCircle(100,100,50,mPaint);
        canvas.restore();
        mPaint.setColor(Color.WHITE);
        canvas.drawCircle(100,100,50,mPaint);
    }

2.方法2

/**
 * 缩放画布并平移画布到基准点 (px,py)  px,py 为缩放后画布新的坐标原点(也叫缩放基准点)
 */
canvas.scale (float sx, float sy, float px, float py)

案例

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setAntiAlias(true);
        canvas.drawColor(Color.BLUE);
        mPaint.setColor(Color.WHITE);
        canvas.drawCircle(100,100,50,mPaint);
        canvas.save();
        canvas.scale(0.5f,0.5f,100,100);
        mPaint.setColor(Color.RED);
        canvas.drawCircle(100,100,50,mPaint);
        canvas.restore();
    }

canvas.rotate

canvas.rotate(float degrees)
/**
 * degrees 顺时针旋转角度 dx dy 基准点坐标
 */
canvas.rotate(float degrees,float dx,float dy)

案例

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setAntiAlias(true);
        canvas.drawColor(Color.BLUE);
        mPaint.setColor(Color.WHITE);
        canvas.drawRect(new RectF(80,80,180,180),mPaint);
        canvas.save();
        //canvas.rotate(45);
        canvas.rotate(45,200,200);
        mPaint.setColor(Color.RED);
        canvas.drawRect(new RectF(80,80,180,180),mPaint);
        canvas.restore();
    }

 

本文参考 https://www.jianshu.com/p/afa06f716ca6 感谢该作者

 

 

 

 

涂文远
关注
专栏目录
android刷新时的圆形动画_一个简单的Android圆弧刷新动画
weixin_39947016的博客
12-18 335
之前刷贴吧的时候看到的贴吧的刷新动画，就是一个圆弧旋转的动画，感觉挺好看的，就抽空实现了一下。最终的结果是这样的：从上图中可以看出，动画的效果是三段圆弧进行旋转，同时弧度也在逐渐增大缩小，这里采用的是在onDraw中绘制三段圆弧。// 绘制圆弧mPaint.setColor(mTopColor);canvas.drawArc(left, top, right, bottom, startAngle...
android canvas 异步_Android--Canvas绘制优化
weixin_42502165的博客
01-14 985
onDraw( ) 是同步方法 ,如果同时绘制的数据量太大就会卡顿 (例如100万个坐标点);优化方法如下:数据量太大的时候,可以考虑在UI效果和流畅度上面平衡一下;例如:A. setAntiAlias( ) 抗锯齿功能，会消耗较大资源，绘制图形速度会变慢;B. setDither(boolean dither); setFilterBitmap(boolean filter) 等…显示的效果越好...
Android_canvas_map:canvas实现地图
05-23
Android_canvas_map 在Androi中通过canvas实现地图，地图模型可使用svgdeveloper来绘制,可以导入地图图片来绘制地图得到svg数据，再根据svg数据来画图
Canvas全屏3D地球旋转特效特效代码
03-20
Canvas全屏3D地球旋转特效是一款支持鼠标拖动缩放查看地球，全屏模式查看效果代码。
一个简单的Android圆弧刷新动画
01-06
之前刷贴吧的时候看到的贴吧的刷新动画，就是一个圆弧旋转的动画，感觉挺好看的，就抽空实现了一下。 最终的结果是这样的： 从上图中可以看出，动画的效果是三段圆弧进行旋转，同时弧度也在逐渐增大缩小，这里采用的是在onDraw中绘制三段圆弧。 // 绘制圆弧 mPaint.setColor(mTopColor); canvas.drawArc(left, top, right, bottom, startAngle, sweepAngle, false, mPaint); mPaint.setColor(mLeftColor); canvas.drawArc(left, top, right, b
android: Canvas的drawArc()方法的几个误区
weixin_30399797的博客
06-24 417
绘制圆环很多时候会用到Canvas的drawArc方法， drawArc()方法的说明很简单： public void drawArc (RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 第一个参数 oval：定义承载圆弧形状的矩形。通过设置该矩形可以指定圆弧的位置和大小。...
android-canvas-donut-chart.7z
07-29
"android-canvas-donut-chart.7z"这个压缩包文件很可能包含了一个使用Canvas来实现甜甜圈图（Donut Chart）的示例项目。甜甜圈图是一种数据可视化工具，通常用于展示各项比例关系，它由环形区域组成，中心有一个空洞...
android-canvas.rar_ android Canvas_android canvas_android canv
09-20
Android Canvas是Android系统中用于图形绘制的核心组件，它在Android应用开发中扮演着至关重要的角色。Canvas提供了在屏幕或者Bitmap上进行2D图形绘制的能力，包括线条、形状、文本、图像等元素。开发者可以通过调用...
react-native-signature-canvas：用于Android && IOS && expo的基于React Native Signature组件的WebView Canvas
02-05
对Android && IOS && expo的基于本地签名组件的Canvas进行React 支持Android，iOS和Expo 没有本地依赖项的纯JavaScript实现 经过RN 0.50测试 核心使用 只依靠React和React本机 生成签名的base64编码png图像注意：...
android-openGL-canvas-master.zip
08-21
在“android-openGL-canvas-master.zip”这个项目中，开发者可能结合了这两者，创建了一个示例应用来展示如何在 Android 上使用 OpenGL ES（OpenGL 的嵌入式版本）与 Canvas 进行交互，以实现更高效的图形绘制和动画...
HTML5 canvas 3D地球旋转代码.zip
05-27
HTML5 canvas 3D地球旋转代码，地球顺时针旋转动画。
java 画弧线,利用Android画圆弧canvas.drawArc()实例详解
weixin_36019375的博客
03-20 617
前言在学习android中图形图像处理技术这部分内容时，对绘制圆弧函数canvas.drawArc()的用法、参数含义及画图原理很是不理解，在网上搜索了一些，加上自己的理解，在此做个小总结，下面来一起看看吧。示例代码public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCent...
Canvas模拟太阳地球月球的运动过程
forward
06-23 4389
先看效果图代码package com.test.paintdemo.pathrelate;import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphi
android canvas 源代码,Android应用开发揭秘的第9个程序5_4_canvas修改版和高仿版的源码注释...
weixin_30746067的博客
05-26 92
//学会运用画布canvasActivity01.javapackage com.canvas;import android.app.Activity;import android.os.Bundle;public class Activity01 extends Activity{private GameView mGameView =null;/** Called when the activ...
Android中Canvas绘图基础详解（附源码下载）
热门推荐
孙群
11-11 4万+
Android中，如果我们想绘制复杂的自定义View或游戏，我们就需要熟悉绘图API。Android通过Canvas类暴露了很多drawXXX方法，我们可以通过这些方法绘制各种各样的图形。Canvas绘图有三个基本要素：Canvas、绘图坐标系以及Paint。Canvas是画布，我们通过Canvas的各种drawXXX方法将图形绘制到Canvas上面，在drawXXX方法中我们需要传入要绘制的图形的
android 地球仪源码,SwiftUI SceneKit 原生绘制Sphere球体与地球仪(教程含源码)
weixin_42545503的博客
05-30 674
本文价值与收获看完本文后，您将能够作出下面的界面截屏2020-07-29 上午9.15.24.png地球仪网格SceneKit 绘制Sphere基础知识SCNSphere球体(或球或地球仪)几何。class SCNSphere : SCNGeometry使用教程球体及其性质SCNSphere球体定义了一个曲面，该曲面的每个点均与其中心等距，该曲面位于其局部坐标空间的原点。您可以使用其radius属...
canvas绘制地球围绕太阳转、月球围绕地球转
ayhg1的博客
06-23 885
素材（放到img中，与html同级）: 太阳 地球 月亮 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { background-color: #99CCFF; } #canvas { background-color:
Canvas模拟地球，月球公转
litong94的博客
10-29 3447
前言众所周知，地球绕着太阳公转，月球作为地球的卫星，绕着地球沿着一定的轨道在旋转，这儿用圆来模拟地球和月球的旋转轨道（实际为椭圆）。 正文首先来分析，如何画一个绕着太阳不停旋转的地球。大家都知道context.arc(x,y,radius,0,2*Math.PI)这是canvas里面画圆的一个方法，那么要让圆动起来，并绕着一定的轨道旋转，实际上就是不断的改变圆心的坐标。那么就地球的旋转来讲，它的圆心
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值