ContourView

Проект

• Название проекта: ContourView — пользовательский вид с эффектом контура, созданный с использованием Bézier-кривых
• Серия: адаптация и перенос третьих сторон компонентов в openharmony
• Функционал: пользовательский вид с эффектом контура, созданный с использованием Bézier-кривых
• Состояние переноса проекта: основные функции завершены
• Различия при вызове: отсутствуют
• Версия SDK: sdk6
• Версия DevEco Studio: DevEco Studio2.2 Beta1
• Базовая версия: Release 1.0.1

Демонстрация эффекта

Инструкция по установке

1. В файле build.gradle в корневой директории проекта:

allprojects {
    repositories {
        maven {
            url 'https://s01.oss.sonatype.org/content/repositories/releases/'
        }
    }
}

2. В файле build.gradle модуля app:

dependencies {
    implementation('com.gitee.chinasoft_ohos:contourView:1.0.0')
    ......  
}

Проект можно запустить непосредственно в SDK 6 и DevEco Studio 2.2 Beta 1.Если проект не запускается, удалите файлы .gradle, .idea, build, gradlew, 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"/>

Использование в Java

private void initCustomContourView() {
        ContourView contourViewCustom = (ContourView) findComponentById(ResourceTable.Id_contourview_custom);
        int width = getWidth();
        int height = 700;
        int[] ints = {width / 2, 50, (int) (width * 0.75), height / 2, (int) (width * 0.35), 350};
        int[] intArr = new int[]{width / 5, height / 3, width / 4 * 3, height / 2, width / 2, (int) (height * 0.9), width / 5, (int) (height * 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);
}

Атрибуты настройки| (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) атрибуты имеют соответствующие методы установки.

Кроме того, есть ещё несколько атрибутов, которые могут быть установлены динамически.

Координаты контрольных точек контура```java public void setPoints(List<Point[]> pointsList); // List<> представляет количество контуров, Point[] представляет координаты конкретного контура, каждый контур должен иметь хотя бы 4 контрольные точки.

| Метод параметры | Описание |
| ---------------- | -------- |
| setPoints(int... pts) | Для одного контура, int[]{координа_1_x, координа_1_y, координа_2_x, координа_2_y......координа_n_x, координа_n_y} |
| setPoints(Point[]... pointsArr) | Для одного контура |
| setPoints(Point... points) | Для нескольких контуров |
| setPoints(int[]... ptsArr) | Для нескольких контуров |

**Создание шейдеров для кастомизации способа рисования контура**

```java
public void setShader(Shader... shader);
// Shader: передаются пользовательски созданные RadialGradient, SweepGradient, LinearGradient.
// При передаче нескольких Shaders, каждому контуру будет присвоен свой способ рисования, Shader[0] заполняет контур 1, Shader[1] заполняет контур 2...

Шаг 2. Использование в макете и установка соответствующих пользовательских атрибутов

<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"/>

Предпочтительно настраивайте свойства в соответствии с вашими потребностями.

Шаг 3. Если вам требуется создать уникальный контур, вы можете динамически установить следующие параметры в коде:```java /**

• Настройте координаты точки привязки для управления областью отрисовки. */ private void initCustomContourView() { ContourView contourViewCustom = (ContourView) findViewById(R.id.contourview_custom); int width = getWidth(); // Получаем ширину экрана int height = 400; int[] points = {width / 2, 0, width, height / 2, width / 2, height, 0, height / 2}; int[] pointsArray = new int[]{width / 2, height / 4, width / 4 * 3, height / 2, width / 2, height / 4 * 3, width / 4, height / 2}; contourViewCustom.setPoints(points, pointsArray); contourViewCustom.setShaderStartColor(getResources().getColor(R.color.startcolor)); contourViewCustom.setShaderEndColor(getResources().getColor(R.color.endcolor)); contourViewCustom.setShaderMode(ContourView.SHADER_MODE_RADIAL); }

/**

• Управление цветом отрисовки. */ 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); }

### Тестовая информация

Код проверен CodeCheck и CloudTest без ошибок.

Прошёл проверку безопасности на наличие вирусов.

Функционал текущей версии демо практически не отличается от оригинальной компоненты.

### Версионирование

- 0.0.1-SNAPSHOT

### Информация о правах и лицензиях

Лицензия Apache 2.0