鸿蒙升级后桌面背景底纹,#2020征文-TV#「续3.1.1 文本组件」不需要背景图，自定义绘制会更好...

上节我们对Text组件有了详细的认知，我们可以通过设置Text组件的各类属性来让Text组件美观起来，但是我们仅仅能设置背景、字体大小、字体大小自适应、内容折行、外边距、内边距等。很多时候我们想给字体设置边框、圆角、阴影等等特殊的效果，但是在属性中没有特定的属性可以完成这件事。当然我们可以给Text组件设置背景图片，这样也可以达到我们的预期效果，但是如果整个APP中图片比较多会增加我们安装包的体积，还会在各种手机的适配上出现不可预知的问题。

官方团队提供了一个可以绘制带有颜色、渐变、边框，用于视图背景的，及设置各种形状的类—ShapeElement。

ShapeElement类源码

ShapeElement类是Element的子类，Element类有多个扩展类，这里就不详细说明了，后面我们在需要的时候再扩展讲解。目前Java API中提供了多个常量值，两个构造函数，以及多个绘图方法。

我们先来了解一下能够设置哪些形状？

ShapeElement类提供了设置矩形、椭圆形、直线、圆弧和路径(以直线段、二次曲线和三次曲线的几何组合表示多轮廓路径)。本节仅对前三个几何图形做介绍，后两个后面小节会详细介绍。/**

* 继承自Element，提供了带有颜色渐变的可绘制实例，通常用于视图背景

*/

public class ShapeElement extends Element {

// 可绘制的几何图形

// 绘制形状为矩形

public static final int RECTANGLE = 0;

// 绘制形状为椭圆

public static final int OVAL = 1;

// 绘制形状为直线

public static final int LINE = 2;

//默认构造器，在代码中设定几何图形和背景的话，使用这个构造函数

public ShapeElement() {}

//引用资源文件中设定的几何图形和背景的话，使用这个构造函数

//xmlId为资源文件的内存地址

public ShapeElement(Context context, int xmlId) {}

//设置要显示的集合图形，参数为上面的静态常量

public void setShape(int shape) {}

//设置背景颜色

public void setRgbColor(RgbColor color) {}

//设置渐变效果填充的颜色值，参数为颜色数组，对直线无效

public void setRgbColors(RgbColor[] colors) {}

//设置边框的宽度和颜色

public void setStroke(int width, RgbColor color) {}

//设置圆角半径，这个方法仅对矩形有效

public void setCornerRadius(float radius) {}

//设置每个角的半径，这个方法仅对矩形有效

//表示四个角的半径数组。如果数组的长度不等于8，则该设置无效。

// 每对半径表示一个角的x轴半径和y轴半径。

public void setCornerRadiiArray(float[] radii) {}

//指定组件的渐变效果方向

public void setOrientation(ShapeElement.Orientation orientation) {}

public void setGradientOrientation(ShapeElement.Orientation orientation) {}

//设置虚线的间隔和相位

//数组项是成对的:这些值的偶数和奇数索引分别指定要绘制的象素个数和空白象素个数。

public void setDashPathEffectValues(float[] intervals, float phase) {}

}

ShapeElement实例应用

上面我们将常用的源码做了简单分析，接下来我们将以实操为主，能够熟练掌握ShapeElement的应用。

我们先来看看上面的UI界面，上面有三种自定义文本显示，矩形、椭圆形、直线。而OHOS还提供了圆弧和基于路径的多形状图。在矩形中，我们分别实现了默认的矩形背景，四角相同的圆角矩形背景，四角不同的圆角矩形背景，实线边框的矩形背景，虚线边框的矩形背景，椭圆背景，圆形背景，及直线背景。