自定义view(三):onDraw 之 Canvas

2023-12-21 00:18
文章标签 自定义 canvas view ondraw

本文主要是介绍自定义view(三):onDraw 之 Canvas,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

onDraw(Canvas canvas)中的重中之重—-Canvas
Canvas是onDraw中贯穿整个方法的类。
那么让我们来看看Canvas里都有啥方法,(达康书记说:麻蛋,源码里方法太多,这锅我不背。)我就对几个常用的方法列举下:

  • drawARGB(int a, int r, int g, int b)drawColor(int color)
    不用画笔,直接填充画板颜色

  • drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
    画圆弧(顺时针):
    第一个参数—固定一块矩形区域作为画圆弧的范围。以矩形中心作为圆心画弧线
    第二个参数—起始弧角度
    第三个参数—画过的角度 , 从起始角度顺时针转过的角度画弧
    第四个参数—是否画出半径区域,true画出来的是一个区域块,false画出来的是一个弧线。
    第五个参数—画笔
    例如:
    RectF rectF = new RectF(0,100,500,250); //(由于矩形没有设置成正方形,所以并非正弧形)
    canvas.drawArc(rectF,0,30,true,paint);

    由于矩形没有设置成正方形,所以并非正弧形
    RectF 类中四个参数:
    第一个参数:矩形区域左边距离view左侧的距离
    第二个参数:矩形区域上边距离view左侧的距离
    第三个参数:矩形区域右边距离view顶部的距离, 第三减去第一即是矩形宽度
    第四个参数:矩形区域下边距离view顶部的距离,第四减去第二即是矩形高度
    RectF rectF = new RectF(左,上,右,下);

  • drawCircle(float cx, float cy, float radius, Paint paint)
    画圆,至于画的是实心圆还是圆圈,跟paint的Style属性有关。
    参数一:圆心X坐标
    参数二:圆心Y坐标
    参数三:圆半径
    参数四:这还用说么??!

  • drawLine(float startX, float startY, float stopX, float stopY, Paint paint)
    画线。
    参数一:线的起始点的X坐标
    参数二:线的起始点的Y坐标
    参数三:线的结束点的X坐标
    参数四:显得结束点的Y坐标
    参数五:不说了。

  • drawOval(RectF oval, Paint paint)
    绘制一个区域的内切圆或内切椭圆(视所定义的矩形而定):

  • drawPath(Path path, Paint paint)
    绘制路径。
    参数一:
    Path

        Path path = new Path();
//        path.moveTo(0,0);path.lineTo(100,100);path.lineTo(100,300);
//       path.closed();

此类很简单,但是有几个注意点:
1.path的起始点的设置调用方法是 moveTo();如果没有调用此方法,则默认起始点为(0,0)
2.如果要连接起始点和终点,只需要调用path.closed();即可
3.连接两个点,使用path.lineTo();
参数二:画笔

  • drawPoint(float x, float y, Paint paint)
    画点。
    需要注意的是,需要设置将画笔设置下 paint.setStrokeWidth(xxx);
    当然也可以给点加点特效: paint.setStrokeCap(Paint.Cap.ROUND);//或者paint.setStrokeCap(Paint.Cap.BUTT);
    设置画笔的样式,来指定所画的点的样式,圆形还是方形

  • drawRoundRect(RectF rect, float rx, float ry, Paint paint)
    参数一:矩形区域
    参数二、三:有人说它们是x轴和y轴方向的圆角弧度,我觉的应该是弧度中心点的x、y坐标
    如图:

canvas.drawRoundRect(rectF,50,100,paint);

这里写图片描述

按照指定坐标 绘制文本。float x和 float y表示 其实点的xy坐标
- drawText(String text, float x, float y, Paint paint)

  • drawText(char[] text, int index, int count, float x, float y, Paint paint)
    canvas.drawText("零一二三四五六七八九十".toCharArray(),1,3,10,100,paint); 》》》 一二三

  • drawText(CharSequence text, int start, int end, float x, float y, Paint paint)
    canvas.drawText("零一二三四五六七八九十",1,3,10,100,paint); 》》》 一二
    含头不含尾

  • drawPicture(Picture picture, RectF dst) 和 drawBitmap(Bitmap bitmap, float left, float top, Paint paint)
    区别 : drawPicture(矢量图) 和 drawBitmap(位图)
    参照: Android自定义View高级(四)-Canvas之图片文字

在绘制图形的过程中,会需要对画布进行旋转,缩放,平移等操作,但对画布进行比如平移操作之后,会对以后画上去的内容也产生影响,有时,我们只希望这种平移或是旋转操作只是临时作用于画布上的某些内容,这个时候就可以使用save和restore方法,save和restore方法一般是配对使用.
例如:

        canvas.drawText("00000000", 0, 20, paint);canvas.translate(200, 200);//将画布从(0,0)移动一段距离到(200,200)canvas.drawText("——2223233———", 0, 20, paint);

如图下
这里写图片描述

        canvas.drawText("00000000", 0, 20, paint);canvas.save();canvas.translate(200, 200);canvas.restore();canvas.drawText("——2223233———", 0, 20, paint);}

如图下
这里写图片描述

save()在画布移动前调用和restore()方法在画布移动之后调用,这样 画布中的内容才不会跟随画布移动。

参考: Canvas的常用操作速查表

这篇关于自定义view(三):onDraw 之 Canvas的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/518037

相关文章

ROS话题通信流程自定义数据格式

ROS话题通信流程自定义数据格式 需求流程实现步骤定义msg文件编辑配置文件编译 在 ROS 通信协议中,数据载体是一个较为重要组成部分,ROS 中通过 std_msgs 封装了一些原生的数据类型,比如:String、Int32、Int64、Char、Bool、Empty… 但是,这些数据一般只包含一个 data 字段,结构的单一意味着功能上的局限性,当传输一些复杂的数据,比如:

以canvas方式绘制粒子背景效果,感觉还可以

这个是看到项目中别人写好的,感觉这种写法效果还可以,就存留记录下 就是这种的背景效果。如果想改背景颜色可以通过canvas.js文件中的fillStyle值改。 附上demo下载地址。 https://download.csdn.net/download/u012138137/11249872

添加自定义的CALayer

iOS开发UI篇—CAlayer(创建图层) 一、添加一个图层 添加图层的步骤: 1.创建layer 2.设置layer的属性(设置了颜色,bounds才能显示出来) 3.将layer添加到界面上(控制器view的layer上)  1 // 2 // YYViewController.m 3 // 01-创建一个简单的图层 4 // 5 //

ScrollView 往上滑动,里面的一个View停在某个位置的思路

1.scrollView的contentoffset 为view的左上角,减去此时scrollView的左上角 2.而且还不需要让那个红色的view removeFromSuperView ,直接self.view AddSubView 就会自动从原来的那个View脱离开来 3.以后遇到问题的思路。当发现UIView很许多奇特的效果的时候,思考它是不是在不断的改变父控件。 #pragma m

导航条下 ScrollView 第一个View去掉向下偏移的64px

self.automaticallyAdjustsScrollViewInsets=NO;      self.scrollView.contentInset=UIEdgeInsetsMake(-64, 0, 0, 0); self.automaticallyAdjustsScrollViewInsets=NO; 相同的意思。

android自定义View的和FramgentActivity的一个小坑

对于自定义View //加载样式TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.TitleBarView, defStyleAttr, 0);setTitle(typedArray.getString(R.styleable.TitleBarView_main_title));//不能写成

第三十七章 添加和使用自定义标题元素 - 自定义标头的继承

文章目录 第三十七章 添加和使用自定义标题元素 - 自定义标头的继承自定义标头的继承示例 在 `SOAPHEADERS` 参数中指定支持的标头元素自定义标头的继承 第三十七章 添加和使用自定义标题元素 - 自定义标头的继承 自定义标头的继承 如果创建此Web 服务的子类,该子类将继承不特定于方法的标头信息 — 包含在 <request> 或 <response> 元素中的标头信

自定义recyclerView实现时光轴效果

时光轴效果在很多app上都有出现,例如淘宝中快递的跟踪,本文将使用recyclerView实现时光轴效果,我们会到自定义控件,首先先看一下效果图: 接下来是步骤分析 1自定义属性 这个大家应该都了解了,根据我们之前的分析,直接在attrs.xml中进行声明 <declare-styleable name="TimeLine"><attr name="beginLine" f

CesiumJS【Basic】- #008 通过canvas绘制billboard

文章目录 通过canvas绘制billboard1 目标2 实现 通过canvas绘制billboard 1 目标 通过canvas绘制billboard 2 实现 /** @Author: alan.lau* @Date: 2024-06-16 11:15:48* @LastEditTime: 2024-06-16 11:43:02* @LastEditors: al

Android自定义系列——9.Path详细用法

rXxx方法 rXxx方法的坐标使用的是相对位置(基于当前点的位移),而之前方法的坐标是绝对位置(基于当前坐标系的坐标)。 Path path = new Path();path.moveTo(100,100);path.lineTo(100,200);canvas.drawPath(path,mDeafultPaint); 在这个例子中,先移动点到坐标(100,100)处,之后再连接