首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Canvas类的最全面详解 - 自定义View应用系列

简介 定义:画布,是一种绘制时的规则 是安卓平台2D图形绘制的基础 作用:规定绘制内容时的规则 & 内容 1. 记住:绘制内容是根据画布的规定绘制在屏幕上的 2....绘制矩形(drawRect) 原理:矩形的对角线顶点确定一个矩形 一般是采用左上角和右下角的两个点的坐标。...与矩形相比,圆角矩形多了两个参数rx 和 ry 圆角矩形的角是椭圆的圆弧,rx 和 ry实际上是椭圆的两个半径,如下图: ?...绘制椭圆 原理:矩形的对角线顶点确定矩形,根据传入矩形的长宽作为长轴和短轴画椭圆 椭圆传入的参数和矩形是一样的; 绘制椭圆实际上是绘制一个矩形的内切图形。...总结 通过阅读本文,相信你已经全面了解Canvas类的使用; 接下来,我将继续对自定义View的应用进行分析,有兴趣的可以继续关注Carson_Ho的安卓开发笔记 ---- 请帮顶或评论点赞!

3.2K81
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Carson带你学Android:自定义View Canvas类使用教程

    简介 定义:画布,是一种绘制时的规则 是安卓平台2D图形绘制的基础 作用:规定绘制内容时的规则 & 内容 记住:绘制内容是根据画布的规定绘制在屏幕上的 理解为:画布只是绘制时的规则,但内容实际上是绘制在屏幕上的...绘制矩形(drawRect) 原理:矩形的对角线顶点确定一个矩形 一般是采用左上角和右下角的两个点的坐标。...,圆角矩形多了两个参数rx 和 ry 圆角矩形的角是椭圆的圆弧,rx 和 ry实际上是椭圆的两个半径,如下图: 特别注意:当 rx大于宽度的一半, ry大于高度一半 时,画出来的为椭圆 实际上,在rx...绘制椭圆 原理:矩形的对角线顶点确定矩形,根据传入矩形的长宽作为长轴和短轴画椭圆 椭圆传入的参数和矩形是一样的; 绘制椭圆实际上是绘制一个矩形的内切图形。...保存当前画布状态(save) 作用:保存画布状态(即保存画布的一系列操作) 应用场景:画布的操作是不可逆的,而且会影响后续的步骤,假如需要回到之前画布的状态去进行下一次操作,就需要对画布的状态进行保存和回滚

    2.4K10

    appinventor安卓壁纸设置(上)

    初步功能需求 打开安卓app,然后会看到一张内置好的图片,点击下方的设置壁纸,实现让这个图片成为壁纸的功能,实现方法调用安卓系统内置的壁纸设置工具。...问题明确 1,使用android.intent.action.ATTACH_DATA调用安卓系统默认的图片设置工具 2,不能直接将软件内置的图片设置为壁纸,需要先将图片存到手机本地中,然后进行调用,调用目录为...file:///mnt/sdcard/ 布局设计: 界面背景色会浅灰,然后一个画布组件,画布宽度100%,高度充满,背景图为内置的图片,画布下方一个按钮,按钮背景颜色为白色,文字为粉色,形状为圆角矩形,...文字为“设为壁纸”,最后在增加两个非可视组件:对话框和活动启动器 对话框:用来显示提示信息的 活动启动器:调用系统壁纸设置工具的 编程设计: 按钮被点击后依次执行:将画布图片保存至本地,然后定义活动启动器...,数据类型为图片,调用安卓内置工具,数据地址为本地图片地址,启动活动启动器。

    88610

    Android自定义View之Canvas一文搞定

    画图就得用到画笔和画布,也就是Paint和Canvas。我们来了解下Canvas。...Canvas Canvas我们可以简单理解为画布或是ps里面的图层,是绘制图形的直接对象,控制着图形的形状,比如矩形、圆形等。我们在自定义View时,通过调用Canvas的API来绘制具体的图形。...Canvas的常见API 绘制文字 //参数分别表示绘制的内容、绘制起点的坐标和画笔Paint canvas.drawText(@NonNull String text, float x, float...top, float right, float bottom, @NonNull Paint paint) 绘制圆角矩形 //参数分别表示矩形的参数、圆角的X方向的半径以及Y方向的半径 canvas.drawRoundRect...float startAngle, float sweepAngle, boolean useCenter,@NonNull Paint paint) 绘制椭圆 //参数分别表示要绘制的椭圆的外接矩形和画笔

    11810

    Android 在任意位置绘制文本

    首先通过如下实例代码来观察文本位置和(x,y)坐标的关系:String text = "afp8";canvas.drawText(text, x, y, paint);// 画两条垂直相交的直线直观地展示点...Paint#measureText根据文档,Paint#getTextBounds可以获取一个能包裹住文本的最小的矩形,矩形原点默认是(0,0)。...drawVerticalLine(canvas, x + textWidth, Color.GREEN);运行结果如下:[cx8cegbyi1.png]如文档所说,Paint#getTextBounds得到的矩形是能包裹文本的最小的矩形...而且标注文本区域的升部和降部的两条水平线间的距离比Paint#getTextBounds得到的矩形的高度也要大一些。...Paint#getTextBounds获取一个能包裹住文本的最小矩形,矩形原点默认为(0,0)。中文字符的绘制和英文字符并无区别,也可使用类似的基线和升部、降部。

    2.5K11

    Android自定义View——从零开始实现书籍翻页效果

    blog.csdn.net/eyishion/article/details/53728913 A区域的内容,有可能包含文字,图案等各种元素,因此我们需要将这些统一绘制到一个Bitmap中,然后绘制到画布上...contentCanvas.drawPath(pathA,pathPaint);//绘制一个背景,用来区分各区域 contentCanvas.drawText("这是在A区域的内容......绘制当前页(A区域)背面(C区域)的内容 相关博文链接: 安卓自定义View进阶-Matrix原理:http://blog.csdn.net/u013831257/article/details/52102081...我们将当前页设为矩形ABCD,将矩形ABCD翻转得到矩形AB₁CD₁ 旋转2倍角0的度数得到矩形AB₂C₂D₂(经过翻转和旋转后,此时我们的XY坐标轴方向在图中右上方已经标出来了) 解析:①设 角ehD...角0; ④所以旋转角度为两倍 角0 为了方便后面好计算,我们将矩形AB₂C₂D₂沿X轴负方向移动e.x的长度,沿Y轴负方向移动矩形长边的长度(即f.y或e.y的长度),最终得到矩形A₃B₃C₃D₃ 最后将矩形

    2.4K20

    看得见的数据结构Android版之开篇前言+完篇总结

    零、前言 一开始也是突发奇想,感觉对安卓的绘图了解比较深了,何不画画数据结构呢 演示操作的项目文件已经在Github开源了,大家可以下载来自己玩玩,想要研究或完善都很欢迎 这个项目以及下面几篇文章是近几天的成果...本系列每种数据结构将分为两篇:数据结构篇和视图篇,如果你只偏爱其中一种,自选观看(数据结构接口与java基本保持一致) 本篇会解决数组、单链表、双链表、二叉树、红黑树的单体绘制,有什么视觉方面的想法欢迎留言...基本样子大概就是下图了: ---- 三、下面来绘制一下各种数据结构的单体 以下是安卓原生绘图结果,也是本篇的重点: 0.统一常量管理类 /** * 作者:张风捷特烈 * 时间:2018...;//二叉树文字字号 } 1.数组单体的绘制 控制点1,2重合了,你也可以用二次的贝塞尔曲线 private void arrayView(Canvas canvas) { //画圆角矩形没什么好说的...Cons.BOX_HEIGHT / 2 + 3 * 10, mDataPaint); } ---- 2.单链表单体的绘制: private void singleLink(Canvas canvas) { //画圆角矩形没什么好说的

    29530

    速读原著-Android应用开发入门教程(2D图形接口的程序结构)

    ; Canvas:画布,2D 图形系统最核心的一个类,处理 onDraw()调用 主要绘制的设置和操作在 Paint(画笔)和 Canvas(画布)2 个类当中,使用这两个类就可以完成所有的绘制。...Canvas 类包含了一系列用于绘制的方法,方法分为 3 种类型: 几何图形 文本 位图 Canvas 类的几何图形(Geometry)方面的方法用于绘制点、绘制线、绘制矩形、绘制圆弧等。...绘制一个点 void drawLines(float[] pts, Paint paint) // 绘制一条线 void drawRect(RectF rect, Paint paint) // 绘制矩形...其中一些主要的方法如下所示: void drawText(String text, int start, int end, float x, float y, Paint paint) void drawText...boolean hasAlpha, Paint paint) void drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint)// 自动缩放到目标矩形的绘制

    74110

    【Web技术】929- 前端海报生成的不同方案和优劣

    https://github.com/niklasvh/h... star:22k 时间 2021-01-06 首页测试demo:https://html2canvas.hertzen.com/ 兼容性测试 安卓...✅ 6.0 koobee ✅ 5.0.2 vovoY51A 安卓微信版本-内置 ✅ 7.0.3 ✅ 7.0.22 ios ✅ 14.2 ✅ 11.2.1 ios微信内置 ✅ 7.0.20 ✅ 7.0.1...iOS14.2下,图片丢失问题 其实在测的时候,发现ios14.2下生成图片第一次始终会出现图片丢失,第二次或第三次正常 解决方案,2~3次调用,取最后一次(看issue里有些机型还是不支持的) 3.低端安卓机上会出现失败情况...Bold', x, y) ctx.fillText('20px', x, y) 2.2.2(一定要完整某种字体的情况下:动态变化的数据,需要接口支持) svg to img 直接domtoSvg也有安卓失败的问题...// 画布和设计稿750的比例 scale = (document.body.clientWidth * this.imgQuality) / 750 线: ** * 画线 */ export

    1.5K40

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

    这是因为最终我们连接的是 (100,100) 和 (200, 300) 之间的线段。...此处仅以 rLineTo 为例,只要理解 “绝对坐标” 和 “相对坐标” 的区别,其他方法类比即可。...Inverse 和含义是“相反,对立”,说明反奇偶规则刚好与奇偶规则相反,例如对于一个矩形而言,使用奇偶规则会填充矩形内部,而使用反奇偶规则会填充矩形外部,这个会在后面示例中代码展示两者对区别。...切换填充规则(即原有规则与反向规则之间相互切换) 奇偶规则与反奇偶规则 mDeafultPaint.setStyle(Paint.Style.FILL); // 设置画布模式为填充...); // 设置画笔模式为填充 canvas.translate(mViewWidth / 2, mViewHeight / 2); // 移动画布

    87710

    自定义控件详解(一):Paint类与Canvas类

    Style.FILL ,即 画笔填充 ,比如你要画一个矩形,那么这个矩形内部是填充了的 ?   Style.STROKE ,即画笔画出的只有边框, ?   ...Style.FILL_AND_STROKE ,即边框线条和内部填充都有 ?   2、paint.setShadowLayer(10, 15, 15, Color.GREEN);//设置阴影 ?    ...radius(角度),即阴影的倾斜角度,      (2)、dx ,即阴影x方向偏移量    (3)、dy ,即阴影y方向偏移量      (4)、shadowColor ,即阴影的颜色 二、Canvas   画布...Canvas类的主要方法是drawXXX() , 即 画线条,画圆形,画矩形,画文字,画椭圆 等等 ?...canvas.drawCircle(400,800,100,paint); //画一条圆心坐标(400,800) 半径100 的红色实心圆形 canvas.drawText

    87240

    Canvas实现progress效果

    它也可用于创建图片特效和动画。(反正就是好东西)   既然是HTML5的特性,那必须是只有支持HTML5的浏览器才能使用,兼容性如下图: ?...参数 text:要测量的文本 ---- fillText 定义:在画布上绘制填色的文本 context.fillText(text, x, y, maxWidth); 参数 text:规定在画布上输出的文本...x:开始绘制文本的 x 坐标位置(相对于画布)。 y:开始绘制文本的 y 坐标位置(相对于画布)。 maxWidth:可选。允许的最大文本宽度,以像素计。...context.clearRect(x, y, width, height); 参数 x:要清除的矩形左上角的 x 坐标 y:要清除的矩形左上角的 y 坐标 width:要清除的矩形的宽度,以像素计 height..._drawText(n); ---- 测试用例 <!

    1.2K10

    Canvas实现progress效果

    它也可用于创建图片特效和动画。(反正就是好东西)   既然是HTML5的特性,那必须是只有支持HTML5的浏览器才能使用,兼容性如下图: ?...参数 text:要测量的文本 fillText 定义:在画布上绘制填色的文本 context.fillText(text, x, y, maxWidth); 参数 text:规定在画布上输出的文本...x:开始绘制文本的 x 坐标位置(相对于画布)。 y:开始绘制文本的 y 坐标位置(相对于画布)。 maxWidth:可选。允许的最大文本宽度,以像素计。...context.clearRect(x, y, width, height); 参数 x:要清除的矩形左上角的 x 坐标 y:要清除的矩形左上角的 y 坐标 width:要清除的矩形的宽度,以像素计 height..._drawText(n); 测试用例 <!

    1.5K70
    领券