鸿蒙开源组件——自定义贝塞尔曲线背景

jacksky

发布于 2021-10-21 20:47

947浏览

0收藏

ContourView

项目介绍

项目名称：ContourView自定义 View：用贝塞尔曲线绘制酷炫轮廓背景
所属系列：openharmony的第三方组件适配移植
功能：自定义 View：用贝塞尔曲线绘制酷炫轮廓背景
项目移植状态：主功能完成
调用差异：无
开发版本：sdk6，DevEco Studio2.2 Beta1
基线版本：Release 1.0.1

效果演示

安装教程

1.在项目根目录下的build.gradle文件中，

allprojects {
   repositories {
       maven {
            url 'https://s01.oss.sonatype.org/content/repositories/releases/'
       }
   }
}1.
2.
3.
4.
5.
6.
7.

2.在app模块的build.gradle文件中，

dependencies {
   implementation('com.gitee.chinasoft_ohos:contourView:1.0.0')
   ......  
}1.
2.
3.
4.

在sdk6，DevEco Studio2.2 Beta1下项目可直接运行如无法运行，删除项目.gradle,.idea,build,gradle,build.gradle文件，并依据自己的版本创建新项目，将新项目的对应文件复制到根目录下

使用说明

使用该库非常简单，只需查看提供的示例的源代码。创建视图ContourView

 <com.ocnyang.contourview.ContourView
            ohos:height="match_parent"
            ohos:width="match_parent"
            app:contour_style="Sand"
            app:shader_mode="Radial"
            app:shader_startcolor="$color:startcolor"
            app:shader_endcolor="$color:endcolor"
            app:shader_style="Left_To_Bottom"
            />1.
2.
3.
4.
5.
6.
7.
8.
9.

java 中使用

private void initCustomContourView() {
        ContourView contourViewCustom = (ContourView) findComponentById(ResourceTable.Id_contourview_custom);
        int width = getWidth();
        int hight = 700;
        int[] ints = {width / 2, 50, ((int) (width * 0.75)), hight / 2, ((int) (width * 0.35)), 350};
        int[] intArr = new int[]{width / 5, hight / 3, width / 4 * 3, hight / 2, width / 2, ((int) (hight * 0.9)), width / 5, ((int) (hight * 0.8))};
        contourViewCustom.setPoints(ints, intArr);
        try {
            contourViewCustom.setShaderStartColor(new Color(getResourceManager().getElement(ResourceTable.Color_startcolor).getColor()));
            contourViewCustom.setShaderEndColor(new Color(getResourceManager().getElement(ResourceTable.Color_endcolor).getColor()));
        } catch (Exception e) {
        }
        contourViewCustom.setShaderMode(ContourView.SHADER_MODE_RADIAL);
    }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

属性设置

（xml）属性名称	说明	值类型
contour_style	内置轮廓样式	Beach，Ripples，Clouds，Sand，Shell
smoothness	轮廓弯曲系数（没有必要的情况下，不建议设置）	Float类型范围：0--1，建议范围：0.15--0.3，默认：0.25
shader_mode	轮廓内颜色的填充方式	Radial，Sweep，Linear，不设置默认纯色填充
shader_startcolor	填充起始颜色	color类型，半透明效果，设置类似#90FF0000的值（默认白色，需设置shader_mode 才有效果）
shader_endcolor	填充结束颜色	同上
shader_style	填充起始点及方向的控制	LeftToBottom（左上角到右下角），RightToBottom（右上角到左下角），TopToBottom（上中点到下中点），Center（中点到右下角）
shader_color	填充纯色颜色	color类型，默认白色，不设置shader_mode时，可以通过此属性设置纯色填充颜色

动态属性

以上的（xml）属性都有对应的设置方法。此外，还有一些可以动态设置的属性。

轮廓锚点坐标集

public void setPoints(List<Point[]> pointsList)
//List<> 表示轮廓的个数，Point[] 表示具体某个轮廓的坐标集，每个轮廓至少4个锚点。1.
2.

方法参数	说明
setPoints(int... pts)	单个轮廓，int[]{锚点1.x，锚点1.y，锚点2.x，锚点2.y......锚点n.x，锚点y}
setPoints(Point[]... pointsArr)	单个轮廓
setPoints(Point... points)	多个轮廓
setPoints(int[]... ptsArr)	多个轮廓

Shader 自定义轮廓绘制方式

public void setShader(Shader... shader)
//Shader：传入自己自定义RadialGradient，SweepGradient，LinearGradient。
//当传入多个Shader时,给多个轮廓设置不同的绘制方式，Shader[0]填充轮廓1，Shader[1]填充轮廓2...1.
2.
3.

Step2. 在布局文件中使用，也可以设置相应的自定义属性

<com.ocnyang.contourview.ContourView
    ohos:layout_width="match_parent"
    ohos:layout_height="400dp"
    app:contour_style="Ripples"
    app:shader_endcolor="@color/endcolor"
    app:shader_mode="RadialGradient"
    app:shader_startcolor="@color/startcolor"
    app:shader_style="Center"
    app:smoothness="0.2"/>1.
2.
3.
4.
5.
6.
7.
8.
9.

根据自己的需要来设置属性。

Step3. 如果需要自定义自己独特的轮廓，可以在代码中动态设置以下内容

/**
 * Customize the coordinates of the anchor to control the area to be drawn。
 */
private void initCustomContourView() {
    ContourView contourViewCustom = (ContourView) findViewById(R.id.contourview_custom);
    int width = getWidth();//获取屏幕的宽度
    int hight = 400;
    int[] ints = {width / 2, 0, width, hight / 2, width / 2, hight, 0, hight / 2};
    int[] intArr = new int[]{width / 2, hight / 4, width / 4 * 3, hight / 2, width / 2, hight / 4 * 3, width / 4, hight / 2};
    contourViewCustom.setPoints(ints, intArr);
    contourViewCustom.setShaderStartColor(getResources().getColor(R.color.startcolor));
    contourViewCustom.setShaderEndColor(getResources().getColor(R.color.endcolor));
    contourViewCustom.setShaderMode(ContourView.SHADER_MODE_RADIAL);
}

/**
 * Controls the color of the drawing.
 */
private void initBeachContourView() {
    ContourView contourViewBeach = ((ContourView) findViewById(R.id.contourview_beach));

    RadialGradient radialGradient = new RadialGradient(0, 0,4000,
            getResources().getColor(R.color.startcolor),
            getResources().getColor(R.color.endcolor),
            Shader.TileMode.CLAMP);
    LinearGradient linearGradient = new LinearGradient(0, 0, getWidth(), 400,
            Color.argb(30, 255, 255, 255), Color.argb(90, 255, 255, 255),
            Shader.TileMode.REPEAT);
    contourViewBeach.setShader(radialGradient, linearGradient);
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.