README.md · OSCHINA-MIRROR/prostory-AndroidZdog

AndroidZdog

Портирование Zdog (Round, flat, designer-friendly псевдо-3D движок для canvas) на Android с kotlin

Содержание

Начало работы
- Gradle
- Maven
Что умеет?
Использование
- Сравнение с Zdog
- Отображение фигур в ImageView

Начало работы

Gradle

Шаг 1. Добавьте репозиторий JitPack в свой файл сборки

Добавьте его в корневой файл build.gradle в конце репозиториев:

    allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }

Шаг 2. Добавьте зависимость

    dependencies {
            implementation 'com.github.prostory:AndroidZdog:v1.0.0'
    }

Maven

Шаг 1. Добавьте репозиторий JitPack в свой файл сборки

    <repositories>
        <repository>
            <id>jitpack.io</id>
            <url>https://jitpack.io</url>
        </repository>
    </repositories>

Шаг 2. Добавьте зависимость

    <dependency>
        <groupId>com.github.prostory</groupId>
        <artifactId>AndroidZdog</artifactId>
        <version>v1.0.0</version>
    </dependency>

Что умеет?

Простые фигуры и анимация

Простые фигуры	Расширенные функции	Динамические иконки

Более сложные графики и анимации

День	Ночь	Вращение

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

Сравнение с Zdog

Линия

Для Zdog:

// line
new Zdog.Shape({
  addTo: illo,
  path: [
    { x: -40 }, // start at 1st point
    { x:  40 }, // line to 2nd point
  ],
  stroke: 20,
  color: '#636',
});

// z-shape
new Zdog.Shape({
  addTo: illo,
  path: [
    { x: -32, y: -40 }, // start at top left
    { x:  32, y: -40 }, // line to top right
    { x: -32, y:  40 }, // line to bottom left
    { x:  32, y:  40 }, // line to bottom right
  ],
  closed: false,
  stroke: 20,
  color: '#636',
});

// 3D shape
new Zdog.Shape({
  addTo: illo,
  path: [
    { x: -32, y: -40, z:  40 },
    { x:  32, y: -40 },
    { x:  32, y:  40, z:  40 },
    { x:  32, y:  40, z: -40 },
  ],
  closed: false,
  stroke: 20,
  color: '#636',
});

Для AndroidZdog:

// line
shape {
    addTo = illo
    path(
        move(x = -40f), // start at 1st point
        line(x = 40f)   // line to 2nd point
    )
    stroke = 20f
    color = "#636"
}

// z-shape
shape {
    addTo = illo
    path(
        move(x = -32f, y = -40f), // start at top left
        line(x = 32f, y = -40f),  // line to top right
        line(x = -32f, y = 40f),  // line to bottom left
        line(x = 32f, y = 40f)    // line to bottom right
    )
    closed = false
    stroke = 20f
    color = "#636"
}

// 3D shape
shape {
    addTo = illo
    path(
        move(x = -32f, y = -40f, z

Примечание: В результате перевода могут быть неточности или ошибки. edge

```
stroke: false,
color: '#C25',
backface: '#EA0',

}); ```

For AndroidZdog

```kotlin
val demo = hemisphere {
    addTo = illo
    diameter = 120f
    // fill enabled by default
    // disable stroke for crisp edge
    stroke = 0f // zero for no stroke
    color = "#C25"
    backface = "#EA0"
}
```

Shapes

Изображение отсутствует.

Cone

Для Zdog

```javascript
let partyHat = new Zdog.Cone({
  addTo: illo,
  diameter: 70,
  length: 90,
  stroke: false,
  color: '#636',
  backface: '#C25',
});
```

Для AndroidZdog

```kotlin
val partyHat = cone {
    addTo = illo
    diameter = 70f
    length = 90f
    stroke = 0f // zero for no stroke
    color = "#636"
    backface = "#C25"
}
```

Shapes

Изображение отсутствует.

Цилиндр

Для Zdog

```javascript
let can = new Zdog.Cylinder({
  addTo: illo,
  diameter: 80,
  length: 120,
  stroke: false,
  color: '#C25',
  frontFace: '#EA0',
  backface: '#636',
});
```

Для AndroidZdog

```kotlin
val can = cylinder {
    addTo = illo
    diameter = 80f
    length = 120f
    stroke = 0f // zero for no stroke
    color = "#C25"
    frontFace = "#EA0"
    backface = "#636"
}
```

Shapes

Изображение отсутствует.

Коробка

Для Zdog

```javascript
let box = new Zdog.Box({
  addTo: illo,
  width: 120,
  height: 100,
  depth: 80,
  stroke: false,
  color: '#C25', // default face color
  leftFace: '#EA0',
  rightFace: '#E62',
  topFace: '#ED0',
  bottomFace: '#636',
});
```

Для AndroidZdog

```kotlin
val box = box {
    addTo = illo
    width = 120f
    height = 100f
    depth = 80f
    stroke = 0f
    color = "#C25" // default face color
    leftFace = "#EA0"
    rightFace = "#E62"
    topFace = "#ED0"
    bottomFace = "#636"
}
```

Shapes

Изображение отсутствует.

Z-fighting

Для Zdog

```javascript
const distance = 40;

let dot = new Zdog.Shape({
  addTo: illo,
  translate: { y: -distance },
  stroke: 80,
  color: '#636',
});
dot.copy({
  translate: { x: -distance },
  color: '#EA0',
});
dot.copy({
  translate: { z: distance },
  color: '#C25',
});
dot.copy({
  translate: { x: distance },
  color: '#E62',
});
dot.copy({
  translate: { z: -distance },
  color: '#C25',
});
dot.copy({
  translate: { y: distance },
});
```

Для AndroidZdog

```kotlin
val distance = 40f

val dot = shape {
    addTo = illo
    translate(y = -distance)
    stroke = 80f
    color = "#636"
}
dot.copy {
    translate(x = -distance)
    color = "#EA0"
}
dot.copy {
    translate(z = distance)
    color = "#C25"
}
dot.copy {
    translate(x = distance)
    color = "#E62"
}
dot.copy {
    translate(z = -distance)
    color = "#C25"
}
dot.copy {
    translate(y = distance)
}
```

Shapes

Изображение отсутствует.

Отображение фигур в ImageView

Отображать фигуры в ImageView очень просто. Нужно создать фигуры, добавить их в ZdogDrawable и вызвать метод setImageDrawable объекта ImageView для отображения ZdogDrawable.

// Attach shapes to ZdogDrawable and set animations
val drawable = ZdogDrawable().apply { 
    // Create a shape 
    shape {
        addTo = illo // add to ZdogDrawable
        path(
            move(x = -32f, y = -40f),
            line(x = 32f, y = -40f),
            line(x = -32f, y = 40f),
            line(x = 32f, y = 40f)
        )
        closed = false
        stroke = 20f
        color = "#636"
    }
    // Set animations, rotate the Illustration
    play(illo.rotateTo(y =

В запросе присутствуют фрагменты кода на языке Kotlin, JavaScript и языке программирования Zdog, которые не были переведены. ```
// Применить анимацию к ZdogDrawable и присоединить его к ImageView
imageView.setImageDrawable(drawable)

// Запустить анимацию
drawable.start()

Финальный эффект отображения:

z shape

Расширенные возможности

Мы также можем использовать мощные функции Android Canvas для достижения интересных эффектов, которые невозможно реализовать в Zdog. Здесь я расширяю следующие функции. Комбинируя эти функции, вы можете достичь множества интересных эффектов.

Segment

Позволяет отображать только часть изображения.

ZdogDrawable().apply {
    illo.alpha(0f) // Установить фон прозрачным
    val line = shape { // Создать фигуру
        addTo = illo // Добавить в drawable
        path(
            move(x = -32f, y = -40f),
            line(x = 32f, y = -40f),
            line(x = -32f, y = 40f),
            line(x = 32f, y = 40f)
        )
        closed = false
        stroke = 20f
        color = "#636"
        updateSegment(0f, 0f) // Установить сегмент 0
    }

    play(line.animate {
        onReset {
            line.updateSegment(0f, 1f) // Установить сегменты 0-1, когда анимация заканчивается
        }

        update {
            line.updateSegment(0f, it) // Обновить сегмент по доле
        }
    }.duration(1500).interpolator(FastOutSlowInInterpolator()).toReverse())
}

segment

Path Effect

Позволяет отобразить линии с различными эффектами, такими как пунктирные линии.

ZdogDrawable().apply {
    illo.alpha(0f)
    shape { // Точка в (-90, 0, 0)
        addTo = illo
        path(
            move(-90f),
            line(-90f)
        )
        color = "#FD4"
        stroke = 16f
    }

    shape { // Точка в (90, 0, 0)
        addTo = illo
        path(
            move(90f),
            line(90f)
        )
        color = "#FD4"
        stroke = 16f
    }

    shape { // Создать полукруг
        addTo = illo
        path(
            move(-90f, 0f),
            arc(
                vector(-90f, -90f),
                vector(0f, -90f)
            ),
            arc(
                vector(90f, -90f),
                vector(90f, 0f)
            )
        )
        translate { z = -8f }
        color = "#636"
        effect = DashPathEffect(floatArrayOf(20f, 10f), 0f) // Установить эффект пунктирной линии
        stroke = 4f
        closed = false
    }

    illo.rotate { z = -(TAU / 8).toFloat() }
    play(
        illo.rotateBy(z = (TAU / 4).toFloat()).duration(1500)
            .interpolator(OvershootInterpolator()).toReverse()
    )
}

path effect

Gradient

Может заполнять фигуры градиентными цветами.

ZdogDrawable().apply {
    illo.alpha(0f)
    shape {
        addTo = illo
        path(
            move(-90f, 0f),
            arc(
                vector(-90f, 90f),
                vector(0f, 90f)
            ),
            arc(
                vector(90f, 90f),
                vector(90f, 0f)
            )
        )
        // Установить вертикальный линейный градиент от (0, 90) до (0, 0)
        shader = LinearGradient(
            0f, 90f, 0f, 0f,
            "#636".color, Color.TRANSPARENT, Shader.TileMode.CLAMP
        ) 
        fill = true
        stroke = 0f
        closed = false
    }

    illo.rotate { z = (TAU / 8).toFloat() }
    play(
        illo.rotateBy(z = -(TAU / 4).toFloat()).duration(1500)
            .interpolator(OvershootInterpolator()).toReverse()
    )
}

gradient

Shadow

Добавляет тени к фигурам.

ZdogDrawable().apply {
    illo.alpha(0f)
    shape {
        addTo = illo
        path(
            move(-90f, 0f),
            arc(
                vector(-90f, 90f),
                vector(0f, 90f)
            ),
            arc(
                vector(90f, 90f),
                vector(90f, 0f)
            )
        )
        color = "#fff"
        // Установить слой шейдера с радиусом 16
        layer = ShaderLayer(
            16f, 0f, 0f,
            Colors.shader.colour
        )
        stroke = 8f
        closed = false
    }

    illo.rotate { z = (TAU / 8).toFloat() }

OSCHINA-MIRROR/prostory-AndroidZdog

Содержание

Начало работы

Gradle

Maven

Что умеет?

Простые фигуры и анимация

Более сложные графики и анимации

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

Сравнение с Zdog

Отображение фигур в ImageView

Расширенные возможности

Segment

Path Effect

Gradient

Shadow

Опубликовать ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/prostory-AndroidZdog .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

Содержание

Начало работы

Gradle

Maven

Что умеет?

Простые фигуры и анимация

Более сложные графики и анимации

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

Сравнение с Zdog

Отображение фигур в ImageView

Расширенные возможности

Segment

Path Effect

Gradient

Shadow

Опубликовать ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/prostory-AndroidZdog