手机编程 view.html5drawimage详解(canvas)为什么无效?急

前言Android 展示之三部曲:
Measure(测量)---->Layout(摆放)---->Draw(绘制)
系列文章:
Android 自定义View之Measure过程Android 自定义View之Layout过程Android 自定义View之Draw过程(上)前边我们已经分析了Measure和Layout过程。这俩最主要的任务是:确定View/ViewGroup可绘制的矩形区域。接下来将会分析,如何在这给定的区域内绘制想要的图形。Draw 过程涉及知识较多,分为上中下三篇
Android 自定义View之Draw过程(上)Android 自定义View之Draw过程(中)Android 自定义View之Draw过程(下)通过本篇文章,你将了解到:
1、为什么要自定义View2、一个简单的Demo3、View Draw过程4、ViewGroup Draw过程5、View/ViewGroup 常用方法分析
为什么要自定义ViewAndroid 提供了关于View最基础的两个类:
ViewGroup与View
然而ViewGroup 并没有约定其内部的子View是如何布局的,是叠加在一起呢?还是横向摆放、纵向摆放等。同样的View 也没有约定其展示的内容是啥样,是矩形、圆形、三角形、一张图片、一段文字抑或是不规则的形状?这些都要我们自己去实现吗?不尽然,值得高兴的是Android已经考虑到上述需求了,为了开发方便已经预制了一些常用的ViewGroup、View。如:继承自ViewGroup的子类
FrameLayout --> 里面的子View是层叠摆放的LinearLayout -->里边的子View是可以纵向/横向排列的RelativeLayout -->里边的子View可以相对布局RecyclerView -->里边的子View以列表形式展示等等…
继承自View的子类
TextView --> 用于绘制一段文本ImageView --> 用于绘制一张图片EditText -->用于绘制输入框Button --> 用户绘制按钮等等…
虽然以上衍生的View/ViewGroup子类已经大大为我们提供了便利,但也仅仅是通用场景下的通用控件,我们想实现一些较为复杂的效果,比如波浪形状进度条、会发光的球体等,这些系统控件就无能为力了,也没必要去预制千奇百怪的控件。想要达到此效果,我们需要自定义View/ViewGroup。通常来说自定义View/ViewGroup有以下几种:
1、如果你觉得系统提供的ViewGroup子类基本符合你需求,但你想将一些功能封装到一个组件里,那么就直接继承FrameLayout、LinearLayout等。这样一来,继承了他们的特性,也将自己的逻辑封装了。2、如果你觉得系统提供的View子类基本符合你的需求,但你想将一些功能封装到一个控件里,比如显示Emoji,那么直接继承自TextView(AppCompatTextView兼容)。3、如果你看不起系统预制的ViewGroup子类,直接继承自ViewGroup,那么你需要重写onMeasure(xx)、onLayout(xx)等方法。4、如果不想用系统预制的View子类,直接继承自View,那么你需要自己绘制内容,重写onDraw(xx)方法。
3 一般不怎么用,除非布局比较特殊。1、2、4 是我们常用的手段,对于我们常说的"自定义View" 一般指的是 4。接下来我们来看看 4是怎么实现的。一个简单的Demopublic class MyView extends View {
private Paint paint;
public MyView(Context context) {
super(context);
init();
}
//从xml加载MyView时调用该方法
public MyView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
paint = new Paint();
paint.setAntiAlias(true);
}
@Override
protected void onDraw(Canvas canvas) {
//涂红色
canvas.drawColor(Color.RED);
//画笔设置为黄色
paint.setColor(Color.YELLOW);
//画实心圆
canvas.drawCircle(getWidth()/2, getHeight()/2, 30, paint);
}
在xml里引用MyView
<com.fish.myapplication.MyView
android:id="@+id/myview"
android:layout_width="100px"
android:layout_height="100px">
</com.fish.myapplication.MyView>
效果如下:黑色部分为其父布局背景。红色矩形+黄色圆形即是MyView绘制的内容。以上是最简单的自定义View的实现,我们提取重点归纳如下:
1、继承自View2、重写onDraw(xx)方法(通常onMeasure(xx)也需要重写,此处为突出重点忽略)
View Draw过程View onDraw(xx)由上述Demo可知,我们只需要在重写的onDraw(xx)方法里绘制想要的图形即可。来看看View 默认的onDraw(xx)方法:#View.java
protected void onDraw(Canvas canvas) {
}
发现是个空实现,因此继承自View的类必须重写onDraw(xx)方法才能实现绘制。该方法传入参数为:Canvas类型。Canvas翻译过来一般叫做画布,在重写的onDraw(xx)里拿到Canvas对象后,有了画布我们还需要一支笔,这只笔即为Paint,翻译过来一般称作画笔。两者结合,就可以愉快的作画(绘制)了。你可能发现了,在Demo里调用canvas.drawColor(Color.RED);
并没有传入Paint啊,是不是Paint不是必须的?实际上调用该方法后,底层会自动生成Paint对象。#SkCanvas.cpp
void SkCanvas::drawColor(SkColor c, SkBlendMode mode) {
SkPaint paint;
paint.setColor(c);
paint.setBlendMode(mode);
this->drawPaint(paint);
}
可以看到,底层初始化了Paint,并且给其设置的颜色为在Java层设置的颜色。View Draw(xx)onDraw(xx)比较简单,开局一个Canvas,效果全靠画。试想,这个Canvas怎么来的呢,换句话说是谁调用了onDraw(xx)。发挥一下联想功能,在Measure、Layout 过程有提到过两者套路很像:
measure(xx)、layout(xx) 一般不需要重写onMeasure(xx)、onLayout(xx)[View 不需要] 需要重写measure(xx)里调用了onMeasure(xx)layout(xx)里调用了onLayout(xx)
那么Draw过程是否也是如此套路呢?看见了onDraw(xx),那么draw(xx)还远吗?没错,还真有draw(xx)方法:#View.java
public void draw(Canvas canvas) {
final int privateFlags = mPrivateFlags;
//打上已绘制标记
mPrivateFlags = (privateFlags & ~PFLAG_DIRTY_MASK)
PFLAG_DRAWN;
int saveCount;
//第一步 绘制背景
drawBackground(canvas);
final int viewFlags = mViewFlags;
//检查横向、纵向是否设置了边缘渐变效果
boolean horizontalEdges = (viewFlags & FADING_EDGE_HORIZONTAL) != 0;
boolean verticalEdges = (viewFlags & FADING_EDGE_VERTICAL) != 0;
//条件分支A
if (!verticalEdges && !horizontalEdges) {
//第三步 调用onDraw(xx),绘制View 内容
onDraw(canvas);(1)
//第四步 分发Draw,绘制子布局
dispatchDraw(canvas); (2)
//绘制自动填充的高亮(默认不会绘制)
drawAutofilledHighlight(canvas);
//mOverlay 绘制在内容之上,在前景色之下 (3)
if (mOverlay != null && !mOverlay.isEmpty()) {
mOverlay.getOverlayView().dispatchDraw(canvas);
}
//第六步,绘制装饰,如前景、滚动条等 (4)
onDrawForeground(canvas);
//第七步,绘制默认高亮,在touch mode模式基本不生效
drawDefaultFocusHighlight(canvas);
//调试用的,可以忽略
if (debugDraw()) {
debugDrawFocus(canvas);
}
//绘制完成,直接返回
return;
}
//条件分支B
//下面还有一大堆源码,主要就是做了一件事:绘制边缘渐变
//大部分情况下都不会走到这
//绘制步骤大体分为 七 个步骤,而上面只列出了1、3、4、6、7,剩下的步骤在此完成
//如果设置了边缘渐变,那么绘制步骤就会比不设置时多两个步骤,多出来的步骤是:2、5
//用文字简单概述一下
//1--->绘制背景
//2--->canvas.getSaveCount(); 记录canvas状态,为绘制边缘渐变做准备(canvas坐标要改变,因此先保存)
//3--->绘制内容
//4--->分发Draw,绘制子布局
//5--->绘制边缘渐变
//6--->绘制装饰
//7--->绘制默认高亮
}
可以看出,draw(xx)主要分为两个部分:
条件分支A–>大部分情况下都会走该分支条件分支B—>极小部分情况会走该分支B分支比A分支多了个2个步骤,目的是为了绘制边缘渐变效果不管是A分支还是B分支,都进行了好几步的绘制。通常来说,单一一个View的层次分为:
背景–>内容–>前景
后面绘制的可能会遮挡前边绘制的。对于一个ViewGroup来说,层次分为:
背景–>内容–>子布局的层次–>前景
来看看A分支标注的4个点:(1)onDraw(canvas)前面分析过,对于单一的View,onDraw(xx)是空实现,需要由我们自定义绘制。而对于ViewGroup,也并没有具体实现,如果在自定义ViewGroup里重写onDraw(xx),它会执行吗?默认是不会执行的,相关分析请移步:Android ViewGroup onDraw为什么没调用(2)dispatchDraw(canvas),来看看在View.java里的实现:
protected void dispatchDraw(Canvas canvas) {
}
发现是个空实现,再看看ViewGroup.java里的实现:
protected void dispatchDraw(Canvas canvas) {
...
//遍历子布局,发起Draw 过程
...
}
也即是说,对于单一View,因为没有子布局,因此没必要再分发Draw,而对于ViewGroup来说,需要触发其子布局发起Draw过程(此过程后续分析),可以类比事件分发过程View、ViewGroup的处理。感兴趣的请移步:Android 输入事件一撸到底之View接盘侠(3)(3)OverLay,顾名思义就是"盖在某个东西上面",此处是在绘制内容之后,绘制前景之前。怎么用呢?
View viewGroup = findViewById(R.id.myviewgroup);
//给overLay 指定一个Drawable
Drawable drawable = ContextCompat.getDrawable(this, R.drawable.shapeme);
//设置Drawable 的尺寸
drawable.setBounds(0, 0, 400, 58);
//为overLay添加Drawable
viewGroup.getOverlay().add(drawable);
以上是给一个ViewGroup设置overLay,效果如下:黑色部分为ViewGroup背景红色矩形+黄色圆圈 为子布局黄色矩形即为为ViewGroup添加的overLay,可以看出overLay绘制在内容之上。(4)onDrawForeground(xx)绘制前景,使用方法如下:
View viewGroup = findViewById(R.id.myviewgroup);
Drawable drawable = ContextCompat.getDrawable(this, R.drawable.shapeme);
drawable.setBounds(0, 0, 400, 58);
viewGroup.setForeground(drawable);
你可能发现了,这和设置overLay差不多的嘛,实际还是有差别的。在onDrawForeground(xx)里会重新调整Drawable的尺寸,该尺寸与View大小一致,之前给Drawable设置的尺寸会失效。运行效果如下:可以看出,ViewGroup都被前景盖住了。再来看看B分支的重点:边缘渐变效果先来看看TextView 边缘渐变效果:这是个TextView,以跑马灯的形式展示。给它水平方向加上边缘渐变效果,如上所示,两边是渐变的。怎么实现的呢?
//水平还是垂直方向
android:requiresFadingEdge="horizontal"
//渐变的长度
android:fadingEdgeLength="100dp"
加上这俩参数。实际上系统自带的一些控件也使用了该效果,如NumberPicker、YearPickerView以上是NumberPicker 的效果,可以看出是垂直方向渐变的。ViewGroup Draw过程对于View.java 里的onDraw(xx)、draw(xx),ViewGroup.java里并没有重写。而对于dispatchDraw(xx),在View.java里是空实现。在ViewGroup.java里发起对子布局的绘制。ViewGroup dispatchDraw(xx)#ViewGroup.java
@Override
protected void dispatchDraw(Canvas canvas) {
boolean usingRenderNodeProperties = canvas.isRecordingFor(mRenderNode);
final int childrenCount = mChildrenCount;
final View[] children = mChildren;
int flags = mGroupFlags;
//动画相关
...
int clipSaveCount = 0;
//设置了padding后,绘制的子布局不能超过padding (1)
final boolean clipToPadding = (flags & CLIP_TO_PADDING_MASK) == CLIP_TO_PADDING_MASK;
if (clipToPadding) {
//因此需要对canvas坐标进行变换,先保存其状态
clipSaveCount = canvas.save(Canvas.CLIP_SAVE_FLAG);
canvas.clipRect(mScrollX + mPaddingLeft, mScrollY + mPaddingTop,
mScrollX + mRight - mLeft - mPaddingRight,
mScrollY + mBottom - mTop - mPaddingBottom);
}
//重置相关标记
mPrivateFlags &= ~PFLAG_DRAW_ANIMATION;
mGroupFlags &= ~FLAG_INVALIDATE_REQUIRED;
...
for (int i = 0; i < childrenCount; i++) {
...
//遍历子布局,发起子布局绘制
final int childIndex = getAndVerifyPreorderedIndex(childrenCount, i, customOrder);
final View child = getAndVerifyPreorderedView(preorderedList, children, childIndex);
if ((child.mViewFlags & VISIBILITY_MASK) == VISIBLE
child.getAnimation() != null) {
more
= drawChild(canvas, child, drawingTime); (2)
}
}
...
}
来看看标记的2点:(1)设置padding的目的是为了让子布局留出一定的空隙出来,因此当设置了padding后,子布局的canvas需要根据padding进行裁减。判断标记为:(flags & CLIP_TO_PADDING_MASK) == CLIP_TO_PADDING_MASK
protected static final int CLIP_TO_PADDING_MASK = FLAG_CLIP_TO_PADDING
FLAG_PADDING_NOT_NULL;
FLAG_CLIP_TO_PADDING 默认设置为trueFLAG_PADDING_NOT_NULL 只要有padding不为0,该标记就会打上。也就是说:只要设置了padding 不为0,子布局显示区域需要裁减。能不能不让子布局裁减显示区域呢?答案是可以的。考虑到一种场景:使用RecyclerView的时候,我们需要设置paddingTop = 20px,效果是:RecyclerView Item展示时离顶部有20px,但是滚动的时候永远滚不到顶部,看起来不是那么友好。这就是上述的裁减起作用了,需要将此动作禁止。通过设置:setClipToPadding(false)
当然也可以在xml里设置:android:clipToPadding="false"
(2)drawChild(xx)#ViewGroup.java
protected boolean drawChild(Canvas canvas, View child, long drawingTime) {
return child.draw(canvas, this, drawingTime);
}
从方法名上看是调用子布局进行绘制。child.draw(x1,x2,x3)里分两种情况:
一是 硬件加速绘制二是 软件绘制
这两者具体作用与区别会在下篇文章分析,不管是硬件加速绘制还是软件加速绘制,最终都会调用View.draw(xx)方法,该方法上面已经分析过。注意,draw(x1,x2,x3)与draw(xx)并不一样,不要搞混了。View/ViewGroup 常用方法分析用图表示:View/ViewGroup Draw过程的联系:一般来说,我们通常会自定义View,并且重写其onDraw(xx)方法,有没有绘制内容的ViewGroup需求呢?是有的,举个例子,大家可以去看看RecyclerView ItemDecoration 的绘制,其中运用到了ViewGroup draw(xx)、ViewGroup onDraw(xx) 、View onDraw(xx)绘制的先后顺序来实现分割线,分组头部悬停等功能的。本篇文章基于 Android 10.0

我要回帖

更多关于 html5drawimage详解 的文章

 

随机推荐