sprite wxapp
v1.0.0
Это апплетная версия spritejs для WeChat. В настоящее время она поддерживает большинство функций spritejs v 2.0. Подробную информацию см. в справочном документе.
Свойства спрайта обновляются автоматически (пакетно) и перерисовываются.
Используйте rpx в качестве единицы измерения по умолчанию.
Поддержка анимации API веб-анимации
Поддержка механизма событий
После версии v1.10.0 мини-версия программы поддерживает установку NPM.
npm install @spritejs/wxapp --save
Затем создайте пакет NPM в апплете WeChat.
После установки и сборки самый простой способ использовать SpriteJS — через встроенный компонент сцены.
Зарегистрируйте компонент в мини-конфигурации программы app.json:
"usingComponents": {"s-scene": "@spritejs/wxapp/scene"
}Затем добавьте компонент на страницу, которую хотите использовать:
<просмотр> <s-scene id="container"layers="bglayer,fglayer"bindSceneCreated="onSceneCreated" ></s-сцена> </просмотр>
Параметр Layers указывает, сколько слоев нужно создать, и их идентификаторы. Значение по умолчанию.
BindSceneCreated — это событие обратного вызова после создания Сцены, а созданные слои возвращаются в методе события:
const { Sprite } = require('@spritejs/wxapp');Page({
onSceneCreated({detail: Layers}) {const {bglayer, fglayer} = Layers;const s = новый Sprite({size: [100, 100], pos: [300, 300], bgcolor: 'красный',}); fglayer.append(s);const s2 = новый Sprite({ size: [300, 300], pos: [200, 200], bgcolor: 'blue',});bglayer.append(s2);s.on('touchstart', () => { s.attr('bgcolor', 'green');}) ;s.on('touchmove', () => { s.attr('bgcolor', 'yellow');});s.on('touchend', () => { s.attr('bgcolor', 'красный');});
},});Если вы не хотите использовать компоненты, вы также можете создать холст самостоятельно, а затем построить сцену.
<view class="scene-layout" id="container" catchtouchmove="noop">
<block wx:for="{{layers}}" wx:key="{{item}}">
<canvas Canvas-id="{{item}}" Disable-scroll="true"></canvas>
</блок>
</просмотр> const spritejs = require('@spritejs/wxapp');Page({
данные: {layers: ['fglayer'], eventOffset: [0, 0],
},
onTouchStart(event) {// Отправляем событие touchstart this.scene.layer('fglayer').dispatchEvent(event, this.data.eventOffset);
},
onReady: function() {// Поскольку макет сцены прокси-события может быть смещен относительно окна, это смещение необходимо передать // для правильного позиционирования координат события const query = wx.createSelectorQuery();query .select( '.scene-layout').boundingClientRect().exec(([rect]) => { if(rect) {this.setData({ eventOffset: [rect.left, rect.top],}); }});const Scene = new spritejs.Scene();this.scene = Scene;const Layer = Scene.layer('fGlayer');// Предварительная загрузка ресурсов Scene.preload([ ' ../../assets/img/birds.png', require('../../assets/img/birds.json.js')]);constbird = new spritejs.Sprite('bird1.png');bird.attr({ якорь: [0.5, 0.5], pos: [100, 200],});//Добавляем событие ontouchbird.on('touchstart', evt = > { console.log(evt)});// Анимация текстур let i = 0; setInterval(() => {bird.textures = [`bird${i++%3+1}.png`];}, 100);//Добавить текст const text = new spritejs.Label('Hellon World!');text.attr({ //anchor: [ 0,5, 0,5], шрифт: '44px Arial', граница: [2, 'красный'],}); const posFrom = [0, 0]; const posTo = [100, 0]; // Воспроизводим анимацию сдвига text.animate([ {pos: posFrom}, {pos: posTo},], { period: 2000} // Добавляем два спрайта в Layerlayer.append (bird, текст);
},})Обратите внимание : когда вы вызываете его самостоятельно, вам необходимо установить атрибут Canvas-id в соответствии с идентификатором созданного слоя при создании холста.
В отличие от веб-версии/узловой версии, конструктор сцены мини-версии программы может передавать только ширину и высоту, а единица измерения — rpx. rpx — это уникальный модуль для мини-программ WeChat. Подробное описание можно найти в документации.
const info = wx.getSystemInfoSync();const Scene = new Scene(750, 1433 // Единица измерения — rpx);
При использовании через загрузку компонента такие события, как touchstart, touchend, touchmove, tap, longpress и т. д., автоматически передаются сценой, поэтому вы можете добавить соответствующую функцию обработки событий в элемент спрайта, чтобы запускать событие в обычном режиме.
Если вы создаете сцену самостоятельно, вам необходимо вручную проксировать событие самостоятельно:
<!--index.wxml--><view class="scene-layout" id="container">
<block wx:for="{{layers}}" wx:key="{{item}}">
<canvas Canvas-id="{{item}}"bindtouchstart="touched"></canvas>
</блок>
</просмотр> const spritejs = require('@spritejs/wxapp')Page({
данные: {layers: ['fglayer'], eventOffset: [0, 0],
},
коснулся: function(event) {this.scene.layer('fglayer').delegateEvent(event, this.data.eventOffset);
},
onReady: function() {// Поскольку макет сцены прокси-события может быть смещен относительно окна, это смещение необходимо передать // для правильного позиционирования координат события const query = wx.createSelectorQuery();query .select( '.scene-layout').boundingClientRect().exec(([rect]) => { if(rect) {this.setData({ eventOffset: [rect.left, rect.top],}); }});const Scene = new spritejs.Scene();this.scene = Scene;const Layer = Scene.layer('fGlayer');// Если используется в пользовательском компоненте, Pass второй параметр — ссылка на экземпляр компонента. // const Layer = Scene.layer('fGlayer', this)
... },})WeChat не поддерживает динамическое создание элементов, поэтому холст необходимо сначала создать в шаблоне и присвоить соответствующему идентификатору холста.
В настоящее время он не поддерживает загрузку удаленных URL-адресов и поддерживает только локальные графические материалы. Кроме того, веб-версия Sprite или узла может предварительно загружать изображения и получать ширину и высоту изображения, поэтому спрайт может адаптироваться к ширине и высоте по умолчанию. , в то время как версия апплета WeChat не использует пакет текстур для упаковки изображений, в противном случае невозможно получить ширину и высоту по умолчанию, и перед отображением объекта спрайта необходимо указать ширину и высоту.
Также обратите внимание, что когда Scene.preload предварительно загружает ресурсы кадров, загрузка FrameData из файла JSON не поддерживается. Это должен быть объект js. Вы можете сохранить данные кадра как js, а затем потребовать его в приложении.
Кроме того, функции поворота и обрезки пакета текстур в настоящее время не поддерживаются.
// Scene.preload версии апплета WeChat является синхронным Scene.preload(['../../assets/img/birds.png', require('../../assets/img/birds.json .js' )])const sprite1 = новый Sprite('bird1.png') sprite1.attr({
pos: [0, 0],})// Изображения, загруженные из кадров, имеют размеры по умолчанию и могут отображаться обычным образом Scene.layer().append(sprite1)const sprite2 = new Sprite('../../assets/img /rambda.png')sprite2.attr({
поз: [50, 50],
size: [100, 100], // Для изображений без рамок необходимо указать ширину и высоту}) Scene.layer().append(sprite2) В папку app мы поместили пример мини-игры «Десять капель воды».
Для отладки кода примера вы можете запустить компиляцию веб-пакета.
запуск НПМ
Затем используйте инструменты разработчика WeChat для отладки кода.
WeChat не поддерживает динамическое создание элементов Dom и не совместим с d3. В настоящее время функции d3 пока не поддерживаются (в будущем планируется адаптировать через shim).
Контекст WeChat не поддерживает фильтры, поэтому фильтры не имеют никакого эффекта.
Холст WeChat не поддерживает градиенты (linearGradients и createRadialGradient). Если вы используете атрибут градиента в attr, произойдет ошибка.
Холст WeChat не поддерживает динамическое создание контекста, поэтому оптимизацию кэширования использовать нельзя.
Поскольку существует проблема с отсечением симулятора WeChat, область отсечения элемента спрайта может быть неправильной под симулятором.
У globalAlpha холста WeChat есть только метод установки и нет метода получения. Поэтому, когда мини-программа устанавливает атрибут непрозрачности, его нельзя каскадировать. Непрозрачность дочернего элемента перезапишет значение непрозрачности родительского контейнера.
