更多信息请访问：HarmonyOS技术社区https://harmonyos.51cto.com并使用默认图层进行绘图。下面通过几个小例子来介绍HarmonyOS自定义组件中层的概念和使用。使用说明1.HarmonyOS绘图入口1.1DrawTask接口HarmonyOS的Component组件对外提供了DrawTask接口。通过addDrawTask方法为组件添加DrawTask，开发者可以自定义绘制逻辑。首先我们看一下DrawTask的描述：publicinterfaceDrawTask{intBETWEEN_BACKGROUND_AND_CONTENT=1;intBETWEEN_CONTENT_AND_FOREGROUND=2;voidonDraw(Componentcomponent,Canvascanvas);}1.2onDraw绘图方法这个接口只有一个onDraw方法，做移动开发的同学应该知道这个名字的方法很熟悉。在这个回调中，系统提供了一个canvas画布，我们可以调用canvas的API来绘制一些基本的图形。2.HarmonyOS图层介绍2.1图层概念介绍从下往上绘制的顺序其实和我们熟悉的View的绘制过程基本一致。这种设计与PS中图层的概念基本相同。构建多个层分别运行，最后合成一层渲染在屏幕上。我们可以用下图来理解：在这个层次结构中，有两层是为上层应用提供的，即图中的UserLayer1和UserLayer2。它们分别位于背景和内容之间，内容和前景之间。其中，后台、内容、前台是系统私有的，应用层无法干预。（这里补充一下，根据官方的API文档，有一个Foreground层，但是不清楚系统在实践中是如何使用这个层的，个人猜测应该是预留给滚动条等场景使用的）2.2Layer概念实践在第一节DrawTask接口的介绍中，定义了两个与layer相关的常量：BETWEEN_BACKGROUND_AND_CONTENT和BETWEEN_CONTENT_AND_FOREGROUND，分别对应上图中的两个UserLayer。下面我们用代码来练习一下层结构和这两个常量的作用。自定义一个Text组件，在上图中的两个UserLayer中绘制不同颜色的实心矩形：publicclassCustomTextextendsText{publicCustomText(Contextcontext,AttrSetattrSet){super(context,attrSet);init();}privatevoidprepare(){//绘制红色backgroundShapeElementbackground=newShapeElement();background.setShaderType(ShapeElement.RECTANGLE);background.setRgbColor(newRgbColor(255,0,0));setBackground(background);//绘制白色文字setText("HellohelloyouHellohello");setTextColor（color.white）;}privateVoidInit（）{prapary（）;//在_background_and_and_contentlayerlaysadddrawtask（newbackdrawtask（），drawtask.betweienween_backweien_backform_and_content）;//(),DrawTask.BETWEEN_CONTENT_AND_FOREGROUND);}//BETWEEN_BACKGROUND_AND_CONTENTprivatestaticclassBackDrawTaskimplementsDrawTask{@OverridepublicvoidonDraw(Componentcomponent,Canvascanvas){finalintoffset=50;Paintpaint=newPaint();paint.setStyle(Paint.Style.FILL_STYLE);paint.setColor(Color.BLUE);canvas.drawRect(newRect(offset,offset,component...;paint.setColor(Color.GREEN);canvas.drawRect(newRect(offset,offset,component.getWidth()-offset,component.getHeight()-offset),paint);}}布局代码如下：运行工程，来看看实际渲染效果，不出所料从眼睛的垂直方向来看，从下往上的内容是：底部红色背景（Background）、自定义蓝色矩形（BackDrawTask）、Text自身的文本内容（Content）、自定义绿色矩形（ForeDrawTask）。3.HarmonyOS图层的使用3.1继承Component的自定义组件当我们继承Component实现自定义组件时，无论选择哪一层进行绘制都是一样的。因为这两个UserLayer都位于Background层，而Component组件默认没有内容层和前景的默认绘制，所以这两个层可以忽略。3.2通过图层实现水波纹效果当我们继承系统组件时，系统组件的内容层和前景层都有内部绘制逻辑，所以我们谨慎选择UserLayer层。为自定义Button添加水波纹触摸反馈效果**（水波纹效果需要绘制在按钮文字下方和按钮背景上方，所以使用BETWEEN_BACKGROUND_AND_CONTENT）**：publicclassCustomButtonextendsButtonimplementsComponent.TouchEventListener,Component.DrawTask{privatefloatdownX,downY;privateintmaxRadius;privatefloatcurrentRadius;privatefinalPaintpaint=newPaint();{paint.setColor(Color.YELLOW);paint.setStyle(Paint.Style.FILL_STYLE);}privateAnimatorValueav=newAnimatorValue();publicCustomButton(Contextcontext,AttrSetattrSet){contextattrSet);av.setValueUpdateListener((animatorValue,v)->{currentRadius=maxRadius*v;invalidate();});init();}@OverridepublicbooleanonTouchEvent(Componentcomponent,TouchEventtouchEvent){if(touchEvent.getAction()==TouchEvent.PRIMARY_POINT_DOWN){if(maxRadius==0){intw=component.getWidth();inth=component.getHeight();maxRadius=(int)Math.sqrt(w*w+h*h);}intindex=touchEvent.getIndex();MmiPointpointer=touchEvent.getPointerPosition(index);down??X=pointer.getX();down??Y=pointer.getY();av.cancel();av.start();returntrue;}elseif(touchEvent.getAction()==TouchEvent.PRIMARY_POINT_UP){av.cancel();currentRadius=0;invalidate();returntrue;}returnfalse;}privatevoidinit(){setTouchEventListener(这);addDrawTask(this,DrawTask.BETWEEN_BACKGROUND_AND_CONTENT);}@OverridepublicvoidonDraw(Componentcomponent,Canvascanvas){canvas.drawCircle(downX,downY,currentRadius,paint);}}效果如下：3.3通过图层实现遮罩效果为自定义Image添加颜色遮罩效果**（图片遮罩是在图片内容上添加遮罩，所以需要在图片上绘制，所以使用BETWEEN_CONTENT_AND_FOREGROUND）**：publicclassCustomImageextendsImageimplementsComponent.DrawTask{privatefinalPaintpaint=newPaint();{paint.setColor(Color.YELLOW);paint.setStyle(Paint.Style.FILL_STYLE);paint.setAlpha(0.3f);}publicCustomImage(Contextcontext,AttrSetattrSet){super(context,attrSet);//图片遮罩为为图片内容添加遮罩，所以需要在内容层和前景层绘制遮罩addDrawTask(this,DrawTask.BETWEEN_CONTENT_AND_FOREGROUND);}@OverridepublicvoidonDraw(Componentcomponent,Canvascanvas){canvas.drawRect(newRect(0,0,组件.getWidth(),组件.getHeight()),paint);}}4.效果展示如下，左边是原图，右边是蒙版图：综上所述，以上就是HarmonyOS层的介绍。核心内容总结如下：组件定义了5层，从下到上依次为：Background、UserLayer1、Content、UserLayer2、ForegroundHarmonyOS自定义组件可以使用两层，分别位于Background和Content之间、Content和Foreground之间。灵活选择绘图层可以实现特殊的UI效果，如水波纹触摸反馈、图片遮罩效果等。文章相关附件可点击下方原文链接下载https://harmonyos.51cto.com/resource/1612更多信息请访问：与华为官方共建鸿蒙科技社区https://harmonyos.51cto.com
