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

【Android UI】Canvas 画布 ⑦ ( Canvas 绘制显示区域 | Canvas 绘制矩形源码分析 )

; Canvas 画布中 , 有 2 套坐标系 , 分别是 : Canvas 自身坐标系 Canvas 绘图坐标系 一、Canvas 绘制显示区域 ---- Canvas 绘制时 , 并不是由 Canvas..., 是无法改变的 ; 参考 【Android UI】Canvas 画布 ⑥ ( Canvas 绘图源码分析 | ViewRootImpl#draw 方法源码 | ViewRootImpl#drawSoftware...Canvas#translate , Canvas#rotate , Canvas#scale 方法 , 可以改变 Canvas 的绘图坐标系 ; Canvas 自身坐标系 有一个很重要的作用 就是 确定画布范围..., 之后所有的绘制内容只能显示这个画布范围内的元素 , 画出边界的元素是不显示的 ; 如下图 , 蓝色矩形框是 Canvas 自身坐标系 , 红色矩形框是 Canvas 绘图坐标系 , 两个坐标系重合部分...: /** * 使用指定的绘制绘制指定的矩形。

1.6K10

Android项目实战(九):CustomShapeImageView 自定义形状的ImageView

SVG可以算是目前最最火热的图片文件格式,这里作者已经给我们写好了几个特殊的图形  如果想要自定义更多形状的话,可以学习下SVG  1、shape_5.svg 五边形 ?...3、接下来就是使用了 如果我们使用raw文件夹下的svg写的形状作为ImageView的形状 则:这里一个app:svg_raw_resource="@raw/shape_star_3" 这里就是指定图片形状为...一样使用,标签变了而已 1 <com.meg7.widget.CircleImageView 2 android:layout_width="100dp" 3 android:layout_height...源码中CustomShapeImageView.java看了下源码是默认显示圆形图片的ImageView,里面有圆形,方形,自定义形,看情况使用了,个人感觉,以上的几个使用起来就足够了。...相关知识: 自定义圆形图片

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

    Android自定义View之绘制圆形头像

    那么,如何通过自定义View的方式实现圆形头像呢,那么,本片博文会告诉你不仅仅是实现过程。一定会有意想不到的收获哦! 最终效果 国际惯例,我们先来看最终实现的效果图 ?...自定义RoundImageView继承自ImageView public class RoundImageView extends ImageView { public RoundImageView...使用自定义View无非就两种情况下,第一种就是直接在xml布局中使用,另一种就是在Activity中new出来,下面我们分别使用上述两种方式,为了便于观察我们在三个构造方法中分别加入一行打印。 ?...结论:自定义View当在xml中使用,使用的是第二个构造方法,当在Activity中使用时,实例化时传入几个参数调用的就是含有几个参数的构造方法。...最终我们重新将bitmap绘制出来即可 canvas.drawBitmap(bitmap, rect, rect, paint); 绘制部分完整代码如下所示: * 获取圆形裁剪的bitmap *

    1.1K10

    android 自定义控件之-绘制钟表盘

    引言 Android 自定义 View 应用非常广泛,最近逛 github 是偶然发现一个 Demo 感觉写的很好,我结合着这个项目的内容,给大家讲讲如何绘制时钟表盘,也算是加深下自己对自定义 View...方法,保证绘制的是圆 绘制刻度线的准备 开始绘制刻度线 大功告成 ---- 让我们先搭建这个 View 首先,我们定义一个叫做 ClockView 的自定义 View ,让它继承自 View 类。...mCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG); mCirclePaint.setColor(mDarkColor); // 官方:使用此样式绘制的几何和文本将被描边...---- 绘制刻度线的准备 开始绘制先前,我们先要准备下一些工具, 首先一个 Paint 对象是必不可少的, 然后为了方便用户使用,我们再定义一个颜色,暴露给予设置, 最后我们还需要一个 int 型的值...mCanvas.restore(); } ---- 大功告成 然我们看看效果: ---- 项目 Demo 地址:https://github.com/FishInWater-1999/android_view_user_defined_first.git

    1.1K20

    Android开发笔记(一百五十三)OpenGL绘制三维图形的流程

    然后还要有绘画作品的载体,比如显示生活中黑板的漆面,以及用于国画的宣纸、用于油画的油布等等,在Android系统中,这个绘画载体便是画布Canvas。...正如前面介绍的Android自定义控件那样,有了视图View、画布Canvas、画笔Paint,方能绘制炫彩多姿的各种控件。...为方便理解,接下来不妨继续套用Android二维绘图的有关概念,从Android自定义控件的主要流程得知,自定义一个二维控件,主要有以下四个步骤: 1、声明自定义控件的构造函数,可在此进行控件属性初始赋值等初始化操作...和onLayout两个函数的功能; 3、onDrawFrame顾名思义跟自定义控件的onDraw函数差不多,onDraw函数用于绘制二维图形的具体形状,而onDrawFrame函数用于绘制三维图形的具体形状...-- 注意这里要使用控件的全路径android.opengl.GLSurfaceView --> android.opengl.GLSurfaceView android:id

    2K20

    Excel图表学习63: 使用形状填充技术绘制图片信息图表

    看看下图1所示的图表,是不是非常有趣且表达得非常生动,这是使用形状填充技术来绘制的图表。 ? 图1 下面来讲解这个图表是如何绘制的。...图2所示是用于绘制图表的示例数据,左侧是原始数据,右侧红色方框内是辅助数据,其中“底层”和“顶层”的100是固定值,“中间层”的值等于“数值-底层-顶层”。 ?...图3 在Excel工作表中导入或者绘制代表底层、中间层、顶层的形状图片,如下图4所示。 ? 图4 先复制代表底层的图片,然后选择图表中的底层系列,按Ctrl+V填充图表。...图5 当我们使用形状填充图表时,Excel会自动拉伸图片,但我们需要堆积图片。选取图表系列,按Ctrl+1组合键,在“设置数据系列格式”中使“系列选项”中的间隙宽度为0,如下图6所示。 ?

    1.1K10

    Android-2D绘图

    概述 Android中使用图形处理引擎,2D部分是android SDK内部自己提供,3D部分是用Open GL ES 1.0 大部分2D使用的api都在android.graphics和android.graphics.drawable...以图形处理来说,我们最常用到的就是在一个View上画一些图片、形状或者自定义的文本内容,这里我们都是使用Canvas来实现的。...你可以获取View中的Canvas对象,绘制一些自定义形状,然后调用View. invalidate方法让View重新刷新,然后绘制一个新的形状,这样达到2D动画效果。...自定义View import android.content.Context; import android.graphics.Canvas; import android.graphics.Color...Canvas类:画布 Android系统中的绘图操作主要是在Canvas画布上进行的,在绘图时,使用的是前面设置好的Paint画笔。

    5.1K20

    Android自定义View之Canvas一文搞定

    欢迎点击上方"AntDream"关注我,每天进步一点点 用继承View的方式来自定义View,我们就需要重写onDraw方法,也就是得咱自己来画图了。...Canvas Canvas我们可以简单理解为画布或是ps里面的图层,是绘制图形的直接对象,控制着图形的形状,比如矩形、圆形等。我们在自定义View时,通过调用Canvas的API来绘制具体的图形。...Canvas的四大方法 保存画布 canvas.save() 作用是将之前的所有已经绘制的图像保存起来,让后续的操作就好像在一个新的图层上操作一样 合并画布 canvas.restore() 可以理解为...旋转画布 canvas.rotate() 将坐标系旋转一定的角度 下面以绘制一个钟表盘为例子来实际运用canvas 以绘制一个位于屏幕中间的钟表盘为例子,这是一个自定义View,在布局文件中LayoutParams...,和Paint搭配使用能绘制丰富的图像 要掌握Canvas的常用的一些API 要掌握Canvas的平移和旋转操作,能帮我们简化很多图像坐标的计算 END 点亮【赞和在看】,让钱和爱都流向你。

    11910

    Android中的各种Drawable类详解

    Drawable简介 图形图像的绘制需要在画布上进行操作和处理,但是绘制需要了解很多细节以及可能要进行一些复杂的处理,这样就会增加学习和使用的成本,因此系统提供了一个被称之为Drawable的类来进行绘制处理...你需要为位图指定绘制到画布上的位置以及缩放到区域的方式: //这里的android.view.Gravity参考值。...Shape是一个抽象的形状类,您可以使用如下具体的形状类: ArcShape 弧形。构造指定开始角度和增加的角度,是顺时针方向, 这里0度是在正右边。 OvalShape 椭圆形。...相当于自定义图形。构造函数的后两个参数是缩放因子。也就是x轴缩放: bounds宽度/stdWidth, y轴缩放:bounds高度/stdHeight。也就是会对绘制的位置和长度进行放大缩小。...状态stateSet可以使用:**android.R.attr.state_XXX ** 中列出的值。

    1.6K20

    Android 自定义View小实例-实现绘制打折标签

    选取自定义View的方法 我们都知道自定义View有多种方式,比如继承自View、ViewGroup或者继承自现有的View子类等,每种实现方式的不同我们所需要做的处理工作也不同,从图中可以看出包含两个...,我这里没有绘制直接为布局文件添加的shape背景。...绘制打折标签 接下来的标签就是绘制标签,在这里有两个注意的问题: (1) 绘制的方式有很多,可以绘制矩形后旋转画布或者直接用Path绘制,这里我们采用使用Path绘制 (2) 既然要绘制东西,那么就要重新...睁大眼睛可以看到文字在路径的上边,设置文字大小: paintDisText.setTextSize(35f); 同样的也是在边上,我们查看源码看一下drawTextOnPath的使用以及上边设置的两个0...我们可以设置文字值和打折数目,意义是否绘制打折,如果不绘制则不会绘制path。

    88760

    HenCoder Android 自定义 View 1-5: 绘制顺序

    这期是 HenCoder 自定义绘制的第 1-5 期:绘制顺序 之前的内容在这里: HenCoder Android 开发进阶 自定义 View 1-1 绘制基础 HenCoder Android 开发进阶...自定义 View 1-2 Paint 详解 HenCoder Android 开发进阶 自定义 View 1-3 文字的绘制 HenCoder Android 开发进阶 自定义 View 1-4 Canvas...API 去设置(xml 布局文件的 android:background 属性以及 Java 代码的 View.setBackgroundXxx() 方法,这个每个人都用得很 6 了),而不能自定义绘制...-- 使用半透明的黑色作为前景,这是一种很常见的处理 --> <AppImageView ... android:foreground="#88000000" /> ?...总结 今天的内容就是这些:使用不同的绘制方法,以及在重写的时候把绘制代码放在 super.绘制方法() 的上面或下面不同的位置,以此来实现需要的遮盖关系。下面用一张图和一个表格总结一下: ?

    81630

    了解 Android 的矢量图片格式:`VectorDrawable`

    然而,矢量图像是通过在抽象大小的画布上定义一系列形状来描绘图像。 为什么使用矢量图?...矢量资源有三大好处,分别是: 好用 占用资源少 动态 好用 矢量图可以优雅的调整大小;这是因为它们将图像绘制在抽象大小的画布上,你可以放大或缩小画布,然后重新绘制对应尺寸的图像。...Android 在受限制的移动设备上运行,因此支持整个 SVG 规范并不是一个现实的目标。 然而,SVG 包含一个 路径规范,它定义了如何描述和绘制形状。使用此 API,您可以表达大多数矢量形状。...第二个 视口 大小定义虚拟画布,或者定义所有后续绘制命令的空间坐标。固有和视口尺寸可以不同(但应该以相同的比例)— 如果你需要,可以在 1*1 画布中定义矢量。...它们可以被命名(以供稍后参考,例如动画),但至关重要的是必须指定描述形状的 pathData 元素。这个神秘的字符串可以被认为是控制虚拟画布上的笔的一系列命令: ?

    2.5K30

    Android自定义View:绘制前的准备-DecorView创建

    前言 回忆前文:Android自定义View基础:ViewRoot、DecorView & Window的简介,可看出最后1步 = 绘制 但在绘制前,系统会有一些绘制准备,即前面几个步骤:创建PhoneWindow...Carson带你学Android自定义View文章系列: Carson带你学Android:自定义View基础 Carson带你学Android:一文梳理自定义View工作流程 Carson带你学...Android:自定义View Measure过程 Carson带你学Android:自定义View Layout过程 Carson带你学Android:自定义View Draw过程 Carson...总结 本文全面总结自定义View 绘制前的准备,主要包括:DecorView创建 & 显示,具体总结如下: 工作流程机制 源码分析 Carson带你学Android自定义View文章系列: Carson...带你学Android:自定义View基础 Carson带你学Android:一文梳理自定义View工作流程 Carson带你学Android:自定义View Measure过程 Carson带你学

    66240

    Android进阶之绘制-自定义View完全掌握(四)

    前面的案例中我们都是使用系统的一些控件通过组合的方式来生成我们自定义的控件,自定义控件的实现还可以通过自定义类继承View来完成。...从该篇博客开始,我们通过自定义类继承View来实现一些我们自定义的控件。 我们通过一个案例来学习,现在来实现这样一个效果。 ?...注意,一定要重写带两个参数的构造方法,因为如果我们在布局文件使用该类,将会用这个构造方法实例该类,如果没有就崩溃。 介绍一下一个控件从创建到显示过程中的主要方法。...,通过draw方法,需要去重写onDraw方法 根据上面两个方法的一些参数进行绘制 所以我们自定义View一般只需要重写onMeasure(int,int)方法和onDraw(canvas)方法。...这样一个自定义的View就绘制好了,然后我们在activity_main.xml文件中使用。 <?xml version="1.0" encoding="utf-8"?

    53920

    Android进阶之绘制-自定义View完全掌握(二)

    这是自定义View系列的第二篇博客,我们继续来学习关于自定义View的知识。 今天我们来实现一下广告条案例。 我们要实现的是这样的一个效果。 ?...要想实现这样的效果,我们可以借助ViewPager控件,然后加上自定义的一些控件即可完成。那么现在就开始吧。 新建一个android项目。 修改activity_main.xml文件。 绘制指示点显示,我这种用的是第二种方式。贴出MainActivity的代码。...-object==" + object); container.removeView((View) object); } } } 指示点我是用xml文件绘制的...整个案例也就结束了,这只是ViewPager使用的一小部分,这个程序还可以加上很多的功能,比如自动播放,然后点击跳转等等,由于篇幅有限,我就不一一实现了,感兴趣的可以自己尝试着写一写。

    44540

    Android进阶之绘制-自定义View完全掌握(五)

    在自定义类继承View实现自定义控件的过程中,我们还应该对一些自定义属性有所了解。 我们通过一个案例来学习一下。...; import android.util.AttributeSet; import android.view.View; /** * 自定义属性 */ public class MyAttributeView...我们可以思考一下,一个类在布局文件中使用,它是如何被呈现到屏幕上的,我们知道,在java中,一个类要想被使用,该类就必须被实例化,那么在android中,它是如何对这个自定义的View类进行实例化显示的呢...它使用的是反射技术。它会把所有属性封装到AttributeSet类中,那么你会发现,在自定义类中重写的构造方法的参数里就存在这么一个属性的集合类。...我们设置的属性信息都被成功绘制上来了。 由此,我们必须得掌握第三种获取属性值的方法,前两种有能力去掌握的也可以去理解一下。 源码我已上传至GitHub,感兴趣的同学可以下载阅读一下。

    35720

    Android进阶之绘制-自定义View完全掌握(一)

    Android的UI设计可以说是决定一个app质量的关键因素,因为人们在使用app的时候,最先映入眼帘的就是app的界面了,一个美观、充实的界面能够给用户带来非常好的体验,会在用户心中留下好的印象。...对于UI设计,Android原生的控件加上一些开源库的使用,已经能够满足大部分的UI需求,但是,某些比较新颖、花哨的控件效果,我们只能通过自定义View来实现,那么,从该篇博客开始,我将记录关于Android...自定义View的学习内容,并将其整理呈现给大家。...> android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com...可以想象,使用属性动画来旋转的话,当动画执行完毕时,布局旋转180度,此时控件都会旋转到屏幕的下方,这样,用户就点击不到控件从而也就不能触发点击事件了。 修改工具类代码。

    61340
    领券