2020CallforPapers-TV《续3.1.1Text组件》不需要背景图，自定义绘图会更好。51cto.com/#zz上一节我们详细了解了Text组件。我们可以通过设置Text组件的各种属性让Text组件好看，但是我们只能自动设置背景，字体大小，字体大小。Fit、contentwrap、margin、padding等。很多时候我们想给字体设置边框、圆角、阴影等特殊效果，但是attributes中没有具体的属性来实现。当然我们可以给Text组件设置一个背景图片，这样也可以达到我们预期的效果，但是如果整个APP的图片比较多的话，会增加我们安装包的体积，在运行过程中会出现不可预知的问题各种手机的适配。官方团队提供了一个可以绘制颜色、渐变、边框、用于视图背景、设置各种形状的类——ShapeElement。ShapeElement类源码ShapeElement类是Element的子类，Element类有多个扩展类，这里不做详细介绍，后面需要的时候再展开说明。目前，JavaAPI提供了多个常量值、两个构造函数和多种绘制方法。我们先来了解一下可以设置哪些形状？ShapeElement类提供了矩形、椭圆、直线、圆弧和路径（多轮廓路径由直线段、二次曲线和三次曲线的几何组合表示）的设置。本节只介绍前三个几何图形，后两个将在后面的小节中详细介绍。/***继承自Element，提供一个带有颜色渐变的drawable实例，通常用于视图背景*/publicclassShapeElementextendsElement{//Drawable几何图形//绘制形状为矩形publicstaticfinalintRECTANGLE=0;//绘制形状isEllipsepublicstaticfinalintOVAL=1;//把形状画成直线publicstaticfinalintLINE=2;//默认构造函数，如果在代码中设置了几何和背景，就用这个构造函数publicShapeElement(){}//参考set在资源文件中对于几何和背景，使用这个构造函数//xmlId作为资源文件的内存地址publicShapeElement(Contextcontext,intxmlId){}//设置要显示的集合图形，参数为上面的静态常量publicvoidsetShape(intshape){}//设置背景色publicvoidsetRgbColor(RgbColorcolor){}//设置渐变效果填充的颜色值，参数为颜色数组，对直线无效publicvoidsetRgbColors(RgbColor[]colors){}//设置边框的宽度和颜色publicvoidsetStroke(intwidth,RgbColorcolor){}//设置角半径，该方法只对矩形有效publicvoidsetCornerRadius(floatradius){}//设置每个角的半径，该方法只对矩形有效//表示四个角的半径数组。如果数组长度不等于8，则此设置无效。//每对半径代表一个角的x轴半径和y轴半径。publicvoidsetCornerRadiiArray(float[]radii){}//指定组件渐变效果的方向publicvoidsetOrientation(ShapeElement.Orientationorientation){}publicvoidsetGradientOrientation(ShapeElement.Orientationorientation){}//设置虚线的间隔和相位line//数组项是成对的：这些值的偶数和奇数索引分别指定要绘制的像素数和空白像素数。publicvoidsetDashPathEffectValues(float[]intervals,floatphase){}}ShapeElement示例应用上面我们简单分析了常用的源码，接下来我们将着重于实际操作，以便能够掌握ShapeElement的应用。我们先来看一下上面的UI界面，上面有三种自定义文字显示，矩形，椭圆，直线。OHOS还提供基于圆弧和路径的多形状图形。在矩形中，我们实现了默认的矩形背景，四个角相同的圆角矩形背景，四个角不同的圆角矩形背景，实线边框矩形背景，虚线边框矩形背景，椭圆背景，圆形背景，线性背景背景。首先，让我们了解一下为什么要使用这种类型的背景。1.为app瘦身，可以替换纯色和渐变色的组件背景2.写一个矩形，圆形，椭圆，易于维护，只需要改动少量代码就可以实现效果.3.节省内存。在ShapeElement类中，ShapeElement类是Element类的子类，用于实现具有渐变效果的图形视图背景。它提供了矩形、椭圆、直线、圆弧和基于路径的多形状图形。本节我们先举例介绍矩形、椭圆和直线，后两者我们会在后续的专栏中详细介绍。Rectangle矩形是常见的视图背景，我们可以设置默认的矩形，圆角矩形，带边框的矩形。//矩形背景DirectionalLayoutrectangle_layout=initChildDirectionalLayout(this);//该组件显示的效果为“有背景的矩形”Textrectangle_background_text=initText(this,"有背景的矩形");//设置背景颜色ShapeElementrectangle_background_text_element=initChildShapeElement(this);rectangle_background_text_element.setShape(ShapeElement.RECTANGLE);rectangle_background_text.setBackground(rectangle_background_text_element);rectangle_layout.addComponent(rectangle_background_text);//该组件显示的效果为“背景圆角矩形”Textrectangle_background_radius_text,Text=init和圆角的矩形");//设置背景色和圆角ShapeElementrectangle_background_radius_text_element=initChildShapeElement(this);rectangle_background_radius_text_element.setShape(ShapeElement.RECTANGLE);rectangle_background_radius_text_element.setCornerRadius(20);rectangle_background_radius_text_element.setDashPathEffectValues(newfloat[]{20f,25f,30f,35f},2);rectangle_background_radius_text.setBackground(rectangle_background_radius_text_element);rectangle_layout.addComponent(rectangle_background_radius_text);//该组件显示的效果为“背景不同圆角矩形”Textrectangle_background_different_radius_text=initText(this,"背景不同圆角矩形");//设置背景色和每个角的圆角ShapeElementrectangle_background_different_radius_text_element=initChildShapeElement(this);rectangle_background_different_radius_text_element.setShape(ShapeElement.RECTANGLE);rectangle_background_different_radius_text_element.setCornerRadiiArray(newfloat[]{20,40,30,60,20,20,100,120});rectangle_background_different_radius_text.setBackground(rectangle_background_different_radius_text_element);rectangle_layout.addComponent(rectangle_background_different_radius_text);//该组件显示的效果为“渐变背景”矩形Textgradient_background_text=initText(this,"具有渐变效果的矩形背景");//设置背景颜色和渐变（来自底部角到顶角）ShapeElementgradient_background_text_element=initChildShapeElement(this);gradient_background_text_element.setShape(ShapeElement.RECTANGLE);RgbColor[]rgbColors=newRgbColor[]{newRgbColor(34,197,255),newRgbColor(255,197,34)};gradient_background_text_element.setRgbColors(rgbColors);gradient_background_text_element.setGradientOrientation(ShapeElement.Orientation.BOTTOM_END_TO_TOP_START);gradient_background_text.setBackground(gradient_background_text_element);rectangle_layout.addComponent(gradient_background_text);//这个组件的效果是“实线边框的背景”rectangleTextstroke_background_text=initText(this,"实线边框的背景");//设置背景颜色和路径ShapeElementstroke_background_text_element=initChildShapeElement(this);stroke_background_text_element.setShape(ShapeElement.RECTANGLE);stroke_background_text_element.setStroke(5,newRgbColor(255,197,34));stroke_background_text.setBackground(stroke_background_text_element);rectangle_layout.addComponent(stroke_background_text);//这个组件的效果是“虚线边框背景”矩形Textstroke_dash_background_text(this="Backgroundofdottedborder");//设置背景颜色和路径ShapeElementstroke_dash_background_text_element=initChildShapeElement(this);stroke_dash_background_text_element.setShape(ShapeElement.RECTANGLE);stroke_dash_background_text_element.setStroke(5,newRgbColor(255,197,34));stroke_dash_background_text_element.setDashPathEffectValues(newfloat[]{10,21,32,43,54,65},1);stroke_dashsetBackground_text.(stroke_dash_background_text_element);rectangle_layout.addComponent(stroke_dash_background_text);OHOS还提供了一种加载XML资源文件的方法。在graphic文件夹中，可以创建xml类型的drawable资源，如SVG可缩放矢量图形文件、基本几何图形（如矩形、圆、直线等）形状资源，以下是形状资源XML格式：
