Skip to content

🦄 利用本库绘制出贝塞尔曲线魔炫背景。Customize view:Draw the magic dazzle background with Bézier.

License

Notifications You must be signed in to change notification settings

OCNYang/ContourView

Folders and files

NameName
Last commit message
Last commit date

Latest commit

577af95 · Feb 21, 2023

History

19 Commits
Sep 25, 2018
Sep 25, 2018
Sep 25, 2018
Sep 25, 2018
Aug 24, 2017
Aug 28, 2017
Feb 21, 2023
Sep 25, 2018
Aug 24, 2017
Aug 24, 2017
Aug 24, 2017
Aug 24, 2017

Repository files navigation

ContourView 轮廓背景控件

Version Code

新控件发布,欢迎大家 Star

GitHub issues  GitHub forks  GitHub stars

ContourView

在闲逛一个图片社区时看到这张图片,个人对炫酷的东西比较敏感(视觉肤浅),本来想下载一下这个 App 看一下实际效果,可是没找到。心有不甘,于是分析了一下,感觉实现起来不会太难,自己也花点时间实现了效果,发布了一个库。

你在这里能够知道的:

具体相关

效果图

轮廓样式(contour_style) 效果(这里只是轮廓的样式,默认效果都是白色,这里显示的颜色是自己设置的)
Sand(默认) sand
Clouds clouds
Beach beach
Ripples ripples
Shell shell
自定义(根据自己需要设置轮廓坐标) 自定义

属性设置

(xml)属性名称 说明 值类型
contour_style 内置轮廓样式 Beach,Ripples,Clouds,Sand,Shell
smoothness 轮廓弯曲系数(没有必要的情况下,不建议设置) Float类型 范围:0--1,建议范围:0.15--0.3,默认:0.25
shader_mode 轮廓内颜色的填充方式 RadialGradient,SweepGradient,LinearGradient,不设置默认纯色填充
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个锚点。
方法参数 说明
setPoints(int... pts) 单个轮廓,int[]{锚点1.x,锚点1.y,锚点2.x,锚点2.y......锚点n.x,锚点y}
setPoints(Point[]... pointsArr) 单个轮廓 android.graphics.Point
setPoints(Point... points) 多个轮廓
setPoints(int[]... ptsArr) 多个轮廓

Shader 自定义轮廓绘制方式

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

使用步骤

Step1. 添加依赖

Gradle

dependencies{
    compile 'com.ocnyang:contourview:1.0.1'
}

Maven

<dependency>
  <groupId>com.ocnyang</groupId>
  <artifactId>contourview</artifactId>
  <version>1.0.1</version>
  <type>pom</type>
</dependency>

或者引用本地 lib

implementation project(':contourview')
//或者下面方式
//compile project(':contourview')

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

<com.ocnyang.contourview.ContourView
    android:layout_width="match_parent"
    android: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"/>

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

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);
}

版本历史

  • v1.0.1 新增支持 3 个锚点坐标绘制轮廓;

About

🦄 利用本库绘制出贝塞尔曲线魔炫背景。Customize view:Draw the magic dazzle background with Bézier.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages