Cax

Небольшая программа, небольшая игра и универсальный веб-движок рендеринга Canvas.

• Гитхаб →GitHub.com/internal Inflation/wipe…
• Комплексная ДЕМО | спортивная демонстрация
• Мини-программа DEMO находится на рассмотрении, так что следите за обновлениями
• Мини-игра DEMO находится на рассмотрении, так что следите за обновлениями

характеристика

• Учитесь один раз, пишите где угодно (мини-программы, мини-игры, Интернет для ПК, мобильный Интернет)
• Поддерживает рендеринг апплетов, мини-игр и веб-браузера.
• Мини-программы, мини-игры и Интернет имеют один и тот же простой и легкий API.
• Высокопроизводительная архитектура рендеринга
• Сверхлегкий размер кода
• Слабосвязанная архитектура рендеринга
• Поддержка управления элементами Canvas
• Поддержка системы событий элемента Canvas
• Полная по Тьюрингу система группового вложения
• Встроенный подростковый атлетизм
• Встроенный текст, растровые изображения, кадры последовательности, объекты рисования и различные объекты векторного рисования.

---

• Одноминутное использование стартового апплета cax
• Использование одной минуты вступительной игры
• Начало работы с Webcax за одну минуту
• встроенные объекты
  • Group
  • Bitmap
  • Sprite
  • Text
  • Graphics
  • Shape
    • Rect
    • Circel
    • Ellipse
  • Element
    • Button
• Атрибуты
  • Transform
  • Alpha
  • CompositeOperation
  • Cursor
• мероприятие
  • событие апплета
  • веб-мероприятие
• спортивный
• пользовательский объект
  • Пользовательская форма
  • пользовательский элемент
• License

Одноминутное использование стартового апплета cax

на GitHubСкачать пользовательские компоненты cax, а затем апплет вводит пользовательский компонент cax:

└── cax
    ├── cax.js
    ├── cax.json  
    ├── cax.wxml  
    ├── cax.wxss
    └── index.js

Объявите зависимости на странице или компоненте:

{
  "usingComponents": {
    "cax":"../cax/cax"
  }
}

Введите тег cax в wxml:

<cax id="myCanvas"></cax>

Логика рендеринга в js:

import cax from '../cax/index'

Page({
  onLoad: function () {
    //比 web 里使用 cax 多传递 this，this 代表 Page 或 Component 的实例
    const stage = new cax.Stage(200, 200, 'myCanvas', this)
    const rect = new cax.Rect(100, 100, {
      fillStyle: 'black'
    })
    
    rect.originX = 50
    rect.originY = 50
    rect.x = 100
    rect.y = 100
    rect.rotation = 30

    rect.on('tap', () => {
      console.log('tap')
    })

    stage.add(rect)
    stage.update()
  }
})

Эффект следующий:

В дополнение к событию касания вы также можете привязать к прямоугольнику другие события касания:

rect.on('touchstart', () => {
  console.log('touchstart')
})

rect.on('touchmove', () => {
  console.log('touchmove')
})

rect.on('touchend', () => {
  console.log('touchend')
})

Использование одной минуты вступительной игры

на GitHubСкачать пример мини-игры cax, структура каталогов выглядит следующим образом:

const stage = new cax.Stage()

В отличие от мини-программ и Интернета, мини-играм не нужно передавать какие-либо параметры для создания сцены.

Начало работы с Webcax за одну минуту

Получите его через npm или CDN:

npm i cax

• UN PK Geng.com/shoeshine@latest/…
• UN PK Geng.com/shoeshine@latest/…

import cax from 'cax'

const stage = new cax.Stage(200, 200, '#renderTo')
const rect = new cax.Rect(100, 100, {
  fillStyle: 'black'
})

stage.add(rect)
stage.update()

За исключением того, что конструктор Stage является четвертым параметром апплета.this, и другие обычаи одинаковы.

встроенные объекты

Group

Для группировки группа также может вкладывать группы, свойства родительского контейнера будут накладываться на дочерние свойства, такие как:

• X группы равен 100, x растрового изображения в группе равно 200, а x окончательного растрового изображения, отображаемого на сцене, равно 300.
• Альфа группы равна 0,7, альфа растрового изображения в группе — 0,6, а альфа финального растрового изображения, отображаемого на рабочей области, — 0,42.

const group = new cax.Group()
const rect = new cax.Rect(100, 100 {
  fillStyle: 'black'
})
group.add(rect)
stage.add(group)
stage.update()

group имеет обычные методы добавления и удаления для добавления и удаления элементов. Те, которые добавлены первыми, будут отрисованы первыми, а все те, которые добавлены позже, будут наложены на те, которые были добавлены первыми.

Bitmap

const bitmap = new cax.Bitmap(img)
stage.add(bitmap)
stage.update()

Если вы передаете только URL-адрес вместо экземпляра объекта изображения, вам нужно это:

const bitmap = new cax.Bitmap('./wepay.png', ()=>{
  stage.update()
})
stage.add(bitmap)

Здесь следует отметить, что апплет должен быть настроен с файлом загрузки и допустимым доменным именем для нормальной загрузки в образ.

Вы можете установить область отображения обрезки изображения и другие свойства преобразования:

bitmap.rect = [0, 0, 170, 140]
bitmap.x = 200

Sprite

Компонент анимации последовательности кадров может объединять любую область любого изображения в серию анимаций.

const sprite = new cax.Sprite({
    framerate: 7,
    imgs: ['./mario-sheet.png'],
    frames: [
        // x, y, width, height, originX, originY ,imageIndex
        [0, 0, 32, 32],
        [32 * 1, 0, 32, 32],
        [32 * 2, 0, 32, 32],
        [32 * 3, 0, 32, 32],
        [32 * 4, 0, 32, 32],
        [32 * 5, 0, 32, 32],
        [32 * 6, 0, 32, 32],
        [32 * 7, 0, 32, 32],
        [32 * 8, 0, 32, 32],
        [32 * 9, 0, 32, 32],
        [32 * 10, 0, 32, 32],
        [32 * 11, 0, 32, 32],
        [32 * 12, 0, 32, 32],
        [32 * 13, 0, 32, 32],
        [32 * 14, 0, 32, 32]
    ],
    animations: {
        walk: {
            frames: [0, 1]
        },
        happy: {
            frames: [5, 6, 7, 8, 9]
        },
        win: {
            frames: [12]
        }
    },
    playOnce: false,
    currentAnimation: "walk",
    animationEnd: function () {

    }
});

Text

текстовый объект

const text = new cax.Text('Hello World', {
  font: '20px Arial',
  color: '#ff7700',
  baseline: 'top'
})

Graphics

Объект рисования, используемый для рисования графики с использованием основных связанных команд Canvas.

const graphics = new cax.Graphics()
graphics
    .beginPath()
    .arc(0, 0, 10, 0, Math.PI * 2)
    .closePath()
    .fillStyle('#f4862c')
    .fill()
    .strokeStyle('black')
    .stroke()

graphics.x = 100
graphics.y = 200

stage.add(graphics)

Shape

В отличие от графики, фигуры обычно имеют ограниченную ширину и высоту, поэтому их можно кэшировать с помощью холста за пределами экрана. Ниже приведены фигуры.

Rect

const rect = new cax.Rect(200, 100, {
  fillStyle: 'black'
})

Circel

const circel = new cax.Circel(10)

Ellipse

const ellipse = new cax.Ellipse(10)

Примечание. Технически мини-игры и Интернет могут использовать закадровый холст, но мини-программы не могут, поскольку мини-программы не поддерживают динамическое создание закадрового холста.

Element

Элемент представляет собой комбинацию различных элементов, таких как Bitmap, Group, Text, Shape и т. д. смешанных изображений.

Button

const button = new cax.Button({
  width: 100,
  height: 40,
  text: "Click Me!"
})

Атрибуты

Transform

Имя свойства	описывать
x	Горизонтальное смещение
y	вертикальное смещение
scaleX	Горизонтальный зум
scaleY	вертикальное масштабирование
rotation	вращать
skewX	Наклон X
skewY	перекошенный Y
originX	Базовая точка вращения X
originY	Базовая точка вращения Y

Alpha

Имя свойства	описывать
alpha	Прозрачность элементов

Обратите внимание, что и у родителя, и у потомка есть набор альфа-каналов, которые будут умножаться и перекрываться.

compositeOperation

Имя свойства	описывать
compositeOperation	Режим наложения, в котором исходное изображение наносится на целевое изображение.

Обратите внимание, что если композитная операция не определена сама по себе, он будет искать и находить ближайший родительский контейнер, который определяет композитную операцию как свою собственную композитную операцию.

Cursor

Имя свойства	описывать
cursor	наведите курсор мыши на фигуру

мероприятие

событие апплета

название события	описывать
tap	Уходите, как только ваш палец коснется
touchstart	Начинается действие касания пальцем
touchmove	Двигаться после касания пальцем
touchend	Действие касания пальца заканчивается
drag	тянуть

веб-мероприятие

название события	описывать
click	Запускается, когда происходит щелчок по элементу
mousedown	Запускается при нажатии кнопки мыши на элементе
mousemove	Срабатывает при наведении указателя мыши на элемент
mouseup	Уволен, когда кнопка мыши выпущена на элементе
mouseover	Запускается, когда указатель мыши перемещается по элементу
mouseout	Запускается, когда указатель мыши выходит за пределы элемента
tap	Уходите, как только ваш палец коснется
touchstart	Начинается действие касания пальцем
touchmove	Двигаться после касания пальцем
touchend	Действие касания пальца заканчивается
drag	тянуть

спортивный

cax имеет встроенную возможность записи эффектов движения конкатенированным образом:

cax.To.get(bitmap)
    .to()
    .y(240, 2000, cax.easing.elasticInOut)
    .rotation(240, 2000, cax.easing.elasticInOut)
    .end(function () {
        console.log(" task one has completed!")
    })
    .wait(500)
    .to()
    .rotation(0, 1400, cax.easing.elasticInOut)
    .end(function () {
        console.log(" task two has completed!")
    })
    .wait(500)
    .to()
    .scaleX(1, 1400, cax.easing.elasticInOut)
    .scaleY(1, 1400, cax.easing.elasticInOut)
    .end(function () {
        console.log(" task three has completed!")
    })
    .start()

Конечно, вы также можете поддерживать перемещение любого атрибута через метод set, например:

.set('y', 240, 2000, cax.easing.elasticInOut)

Эквивалентно

.y(240, 2000, cax.easing.elasticInOut)

демонстрационный адрес

пользовательский объект

Пользовательская форма

Пользовательская форма, унаследованная от cax.Shape:

class Sector extends cax.Shape {
  constructor (r, from, to, option) {
    super()

    this.option = option || {}
    this.r = r
    this.from = from
    this.to = to
  }

  draw () {
    this.beginPath()
      .moveTo(0, 0)
      .arc(0, 0, this.r, this.from, this.to)
      .closePath()
      .fillStyle(this.option.fillStyle)
      .fill()
      .strokeStyle(this.option.strokeStyle)
      .lineWidth(this.option.lineWidth)
      .stroke()
  }
}

Использование фигур:

const sector = new Sector(10, 0, Math.PI/6, {
  fillStyle: 'red'
  lineWidth: 2
})
stage.add(sector)
stage.update()

пользовательский элемент

Пользовательский элемент наследуется от cax.Group:

class Button extends cax.Group {
  constructor (option) {
    super()
    this.width = option.width
    this.roundedRect = new  cax.RoundedRect(option.width, option.height, option.r)
    this.text = new cax.Text(option.text, {
      font: option.font,
      color: option.color
    })

    this.text.x = option.width / 2 - this.text.getWidth() / 2 * this.text.scaleX
    this.text.y = option.height / 2 - 10 + 5 * this.text.scaleY
    this.add(this.roundedRect, this.text)
  }
}

export default Button

использовать:

const button = new cax.Button({
  width: 100,
  height: 40,
  text: "Click Me!"
})

В целом рекомендуется использовать наследование от Group для немного сложной сборки, удобной для расширения и управления собственными внутренними компонентами. Посмотреть демо можно в мини-игреИгрок, Пуля, Враг, ФонВсе они унаследованы от Group.

License

MIT