Commit 3be0e888 authored by 范雪寒's avatar 范雪寒

feat: ScrollView

parent 6d1968c0
......@@ -128,5 +128,8 @@
}
}
},
"defaultProject": "ng-template-generator"
}
"defaultProject": "ng-template-generator",
"cli": {
"analytics": false
}
}
\ No newline at end of file
......@@ -324,6 +324,12 @@
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
"dev": true
},
"uuid": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
"dev": true
}
}
},
......@@ -1563,6 +1569,11 @@
"integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==",
"dev": true
},
"@types/uuid": {
"version": "8.3.1",
"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.1.tgz",
"integrity": "sha512-Y2mHTRAbqfFkpjldbkHGY8JIzRN6XqYRliG8/24FcHm2D2PwW24fl5xMRTVGdrb7iMrwCaIEbLWerGIkXuFWVg=="
},
"@types/webpack-sources": {
"version": "0.1.8",
"resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.8.tgz",
......@@ -9791,6 +9802,12 @@
"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
"integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
"dev": true
},
"uuid": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
"dev": true
}
}
},
......@@ -10558,6 +10575,14 @@
"requires": {
"faye-websocket": "^0.10.0",
"uuid": "^3.0.1"
},
"dependencies": {
"uuid": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
"dev": true
}
}
},
"sockjs-client": {
......@@ -11811,6 +11836,12 @@
"requires": {
"ms": "^2.1.1"
}
},
"uuid": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
"dev": true
}
}
},
......@@ -12038,10 +12069,9 @@
"dev": true
},
"uuid": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
"dev": true
"version": "8.3.2",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
},
"validate-npm-package-license": {
"version": "3.0.4",
......@@ -12662,6 +12692,14 @@
"requires": {
"ansi-colors": "^3.0.0",
"uuid": "^3.3.2"
},
"dependencies": {
"uuid": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
"dev": true
}
}
},
"webpack-merge": {
......
......@@ -25,12 +25,14 @@
"@fortawesome/free-regular-svg-icons": "^5.12.1",
"@fortawesome/free-solid-svg-icons": "^5.12.1",
"@tweenjs/tween.js": "~18.5.0",
"@types/uuid": "^8.3.1",
"ali-oss": "^6.5.1",
"compressing": "^1.5.0",
"ng-zorro-antd": "^8.5.2",
"rxjs": "~6.5.4",
"spark-md5": "^3.0.0",
"tslib": "^1.10.0",
"uuid": "^8.3.2",
"zone.js": "~0.10.2"
},
"devDependencies": {
......
import { v4 as uuidv4 } from 'uuid';
import TWEEN from '@tweenjs/tween.js';
interface AirWindow extends Window {
interface AirWindow extends Window {
air: any;
curCtx: any;
}
......@@ -188,7 +188,7 @@ export class MySprite extends Sprite {
if (this.children.length <= 0) { return; }
for (const child of this.children) {
for (const child of this.children) {
if (child === this) {
if (this.visible) {
this.drawSelf();
......@@ -243,14 +243,14 @@ export class MySprite extends Sprite {
if (this.children[i]) {
if (this.children[i] !== this) {
this.children.splice(i, 1);
i --;
i--;
}
}
}
}
_changeChildAlpha(alpha) {
for (const child of this.children) {
for (const child of this.children) {
if (child !== this) {
child.alpha = alpha;
}
......@@ -331,7 +331,7 @@ export class MySprite extends Sprite {
}
return {px, py, sx, sy};
return { px, py, sx, sy };
};
......@@ -348,7 +348,7 @@ export class MySprite extends Sprite {
// const width = this.width * Math.abs(this.scaleX);
// const height = this.height * Math.abs(this.scaleY);
return {x, y, width, height};
return { x, y, width, height };
}
}
......@@ -378,10 +378,10 @@ export class ColorSpr extends MySprite {
const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
for ( let i = 0; i < c.height; i++) {
for ( let j = 0; j < c.width; j++) {
for (let i = 0; i < c.height; i++) {
for (let j = 0; j < c.width; j++) {
const x = (i * 4) * c.width + ( j * 4 );
const x = (i * 4) * c.width + (j * 4);
const r = c.data[x];
const g = c.data[x + 1];
const b = c.data[x + 2];
......@@ -424,10 +424,10 @@ export class GrayscaleSpr extends MySprite {
const rect = this.getBoundingBox();
const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
for ( let i = 0; i < c.height; i++) {
for ( let j = 0; j < c.width; j++) {
for (let i = 0; i < c.height; i++) {
for (let j = 0; j < c.width; j++) {
const x = (i * 4) * c.width + ( j * 4 );
const x = (i * 4) * c.width + (j * 4);
const r = c.data[x];
const g = c.data[x + 1];
const b = c.data[x + 2];
......@@ -484,7 +484,7 @@ export class BitMapLabel extends MySprite {
this.height = h;
let offX = -totalW / 2;
for (const label of labelArr) {
for (const label of labelArr) {
label.x = offX;
offX += label.width;
}
......@@ -656,7 +656,7 @@ export class RichTextOld extends Label {
for (const word of words) {
const re = new RegExp(word, 'g');
newText = newText.replace( re, `#${word}#`);
newText = newText.replace(re, `#${word}#`);
// newText = newText.replace(word, `#${word}#`);
}
......@@ -758,7 +758,7 @@ export class RichTextOld extends Label {
export class RichText extends Label {
disH = 30;
disH = 30;
constructor(ctx?: any) {
super(ctx);
......@@ -794,7 +794,7 @@ export class RichText extends Label {
for (const c of chr) {
for (const c of chr) {
if (this.ctx.measureText(temp).width < w && this.ctx.measureText(temp + (c)).width <= w) {
temp += ' ' + c;
} else {
......@@ -814,16 +814,16 @@ export class RichText extends Label {
if (this._outlineFlag) {
this.ctx.lineWidth = this._outLineWidth;
this.ctx.strokeStyle = this._outLineColor;
for (let b = 0 ; b < row.length; b++) {
this.ctx.strokeText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20
for (let b = 0; b < row.length; b++) {
this.ctx.strokeText(row[b], x, y + (b + 1) * disH); // 每行字体y坐标间隔20
}
// this.ctx.strokeText(this.text, 0, 0);
}
// this.ctx.fillStyle = '#ff7600';
for (let b = 0 ; b < row.length; b++) {
this.ctx.fillText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20
for (let b = 0; b < row.length; b++) {
this.ctx.fillText(row[b], x, y + (b + 1) * disH); // 每行字体y坐标间隔20
}
}
......@@ -1089,7 +1089,7 @@ export class MyAnimation extends MySprite {
}
showAllFrame() {
for (const frame of this.frameArr ) {
for (const frame of this.frameArr) {
frame.alpha = 1;
}
}
......@@ -1119,7 +1119,7 @@ export class MyAnimation extends MySprite {
this.frameArr[this.frameIndex].visible = false;
}
this.frameIndex ++;
this.frameIndex++;
if (this.frameIndex >= this.frameArr.length) {
if (this.loop) {
this.frameIndex = 0;
......@@ -1127,7 +1127,7 @@ export class MyAnimation extends MySprite {
this.restartFlag = false;
this.frameIndex = 0;
} else {
this.frameIndex -- ;
this.frameIndex--;
this.playEnd();
return;
}
......@@ -1188,7 +1188,7 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul
tween.easing(easing);
}
if (update) {
tween.onUpdate( (a, b) => {
tween.onUpdate((a, b) => {
update(a, b);
});
}
......@@ -1220,7 +1220,7 @@ export function rotateItem(item, rotation, time = 0.8, callBack = null, easing =
export function scaleItem(item, scale, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item).to({ scaleX: scale, scaleY: scale}, time * 1000);
const tween = new TWEEN.Tween(item).to({ scaleX: scale, scaleY: scale }, time * 1000);
if (callBack) {
tween.onComplete(() => {
......@@ -1238,7 +1238,7 @@ export function scaleItem(item, scale, time = 0.8, callBack = null, easing = nul
export function moveItem(item, x, y, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item).to({ x, y}, time * 1000);
const tween = new TWEEN.Tween(item).to({ x, y }, time * 1000);
if (callBack) {
tween.onComplete(() => {
......@@ -1281,7 +1281,7 @@ export function hideItem(item, time = 0.8, callBack = null, easing = null) {
}
const tween = new TWEEN.Tween(item)
.to({alpha: 0}, time * 1000)
.to({ alpha: 0 }, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => {
if (callBack) {
......@@ -1308,7 +1308,7 @@ export function showItem(item, time = 0.8, callBack = null, easing = null) {
item.visible = true;
const tween = new TWEEN.Tween(item)
.to({alpha: 1}, time * 1000)
.to({ alpha: 1 }, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => {
if (callBack) {
......@@ -1328,7 +1328,7 @@ export function alphaItem(item, alpha, time = 0.8, callBack = null, easing = nul
const tween = new TWEEN.Tween(item)
.to({alpha}, time * 1000)
.to({ alpha }, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => {
if (callBack) {
......@@ -1348,7 +1348,7 @@ export function showStar(item, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item)
.to({alpha: 1, scale: 1}, time * 1000)
.to({ alpha: 1, scale: 1 }, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => {
if (callBack) {
......@@ -1368,7 +1368,7 @@ export function randomSortByArr(arr) {
const newArr = [];
const tmpArr = arr.concat();
while (tmpArr.length > 0) {
const randomIndex = Math.floor( tmpArr.length * Math.random() );
const randomIndex = Math.floor(tmpArr.length * Math.random());
newArr.push(tmpArr[randomIndex]);
tmpArr.splice(randomIndex, 1);
}
......@@ -1392,7 +1392,7 @@ export function getPosByAngle(angle, len) {
const x = Math.sin(radian) * len;
const y = Math.cos(radian) * len;
return {x, y};
return { x, y };
}
......@@ -1448,12 +1448,12 @@ export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer =
const r = getPosDistance(item.x, item.y, x0, y0);
let a = getAngleByPos(item.x, item.y, x0, y0);
a += 90;
const obj = {r, a};
const obj = { r, a };
item._circleAngle = a;
const targetA = a + addR;
const tween = new TWEEN.Tween(item).to({_circleAngle: targetA}, time * 1000);
const tween = new TWEEN.Tween(item).to({ _circleAngle: targetA }, time * 1000);
if (callBack) {
tween.onComplete(() => {
......@@ -1464,7 +1464,7 @@ export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer =
tween.easing(easing);
}
tween.onUpdate( (item, progress) => {
tween.onUpdate((item, progress) => {
// console.log(item._circleAngle);
const r = obj.r;
......@@ -1487,7 +1487,7 @@ export function getPosDistance(sx, sy, ex, ey) {
const _x = ex - sx;
const _y = ey - sy;
const len = Math.sqrt( Math.pow(_x, 2) + Math.pow(_y, 2) );
const len = Math.sqrt(Math.pow(_x, 2) + Math.pow(_y, 2));
return len;
}
......@@ -1518,8 +1518,9 @@ export function formatTime(fmt, date) {
};
if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); }
for (const k in o) {
if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1)
? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1)
? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
}
}
return fmt;
......@@ -1552,8 +1553,8 @@ export function jelly(item, time = 0.7) {
return;
}
const data = arr[index];
const t = tweenChange(item, {scaleX: data[0], scaleY: data[1]}, data[2], () => {
index ++;
const t = tweenChange(item, { scaleX: data[0], scaleY: data[1] }, data[2], () => {
index++;
run();
}, TWEEN.Easing.Sinusoidal.InOut);
item.jellyTween = t;
......@@ -1576,7 +1577,7 @@ export function jelly(item, time = 0.7) {
export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen = 80, showTime = 0.4) {
for (let i = 0; i < num; i ++) {
for (let i = 0; i < num; i++) {
const particle = new MySprite();
particle.init(img);
......@@ -1672,5 +1673,44 @@ export function shake(item, time = 0.5, callback = null, rate = 1) {
}
export class ScrollView extends MySprite {
content: MySprite;
contentCanvas: any;
contentContext: any;
constructor(ctx = null) {
super(ctx);
}
init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) {
super.init(imgObj, anchorX, anchorY);
this.content = new MySprite();
this.content.init(imgObj, 0, 0);
let contentCanvas = document.createElement("canvas");
contentCanvas.id = uuidv4();
this.contentCanvas = contentCanvas;
const contentContext = contentCanvas.getContext("2d");
this.contentContext = contentContext;
let scrollViewDiv = document.getElementById("scroll_view_div");
scrollViewDiv.appendChild(contentCanvas);
}
addContent(sprite: Sprite) {
this.content.addChild(sprite);
sprite.ctx = this.contentContext;
}
drawSelf() {
const contentRect = this.content.getBoundingBox();
const rect = this.getBoundingBox();
const imgData = this.contentContext.getImageData(contentRect.x, contentRect.y, rect.width, rect.height);
this.ctx.putImageData(imgData, this._offX, this._offY);
}
}
// --------------- custom class --------------------
<div class="game-container" #wrap>
<canvas id="canvas" #canvas></canvas>
</div>
<div id="scroll_view_div">
</div>
......@@ -2,7 +2,7 @@ import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener
import {
Label,
MySprite, tweenChange,
MySprite, ScrollView, tweenChange,
} from './Unit';
import {res, resAudio} from './resources';
......@@ -330,7 +330,7 @@ export class PlayComponent implements OnInit, OnDestroy {
return new Promise((resolve, reject) => {
const audio = new Audio();
audio.oncanplay = (a) => {
resolve();
resolve(null);
};
audio.onerror = () => {
reject();
......@@ -424,9 +424,6 @@ export class PlayComponent implements OnInit, OnDestroy {
// ======================================================编写区域==========================================================================
/**
* 添加默认数据 便于无数据时的展示
*/
......@@ -438,38 +435,30 @@ export class PlayComponent implements OnInit, OnDestroy {
}
}
/**
* 添加预加载图片
*/
initImg() {
this.addUrlToImages(this.data.pic_url);
this.addUrlToImages(this.data.pic_url_2);
}
/**
* 添加预加载音频
*/
initAudio() {
// 音频资源
this.addUrlToAudioObj(this.data.audio_url);
this.addUrlToAudioObj(this.data.audio_url_2);
// 音效
this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3);
}
/**
* 初始化数据
*/
initData() {
const sx = this.canvasWidth / this.canvasBaseW;
const sy = this.canvasHeight / this.canvasBaseH;
const s = Math.min(sx, sy);
......@@ -478,11 +467,7 @@ export class PlayComponent implements OnInit, OnDestroy {
// this.mapScale = sx;
// this.mapScale = sy;
this.renderArr = [];
}
......@@ -491,160 +476,25 @@ export class PlayComponent implements OnInit, OnDestroy {
* 初始化试图
*/
initView() {
const scrollView = new ScrollView();
scrollView.init(this.images.get('white'));
scrollView.scaleX = (400 / scrollView.width);
scrollView.scaleY = (300 / scrollView.height);
this.renderArr.push(scrollView);
this.initPic();
this.initBottomPart();
}
initBottomPart() {
const btnLeft = new MySprite();
btnLeft.init(this.images.get('btn_left'));
btnLeft.x = this.canvasWidth - 150 * this.mapScale;
btnLeft.y = this.canvasHeight - 100 * this.mapScale;
btnLeft.setScaleXY(this.mapScale);
this.renderArr.push(btnLeft);
this.btnLeft = btnLeft;
const btnRight = new MySprite();
btnRight.init(this.images.get('btn_right'));
btnRight.x = this.canvasWidth - 50 * this.mapScale;
btnRight.y = this.canvasHeight - 100 * this.mapScale;
btnRight.setScaleXY(this.mapScale);
this.renderArr.push(btnRight);
this.btnRight = btnRight;
}
initPic() {
const maxW = this.canvasWidth * 0.7;
const pic1 = new MySprite();
pic1.init(this.images.get(this.data.pic_url));
pic1.x = this.canvasWidth / 2;
pic1.y = this.canvasHeight / 2;
pic1.setScaleXY(maxW / pic1.width);
this.renderArr.push(pic1);
this.pic1 = pic1;
const label1 = new Label();
label1.text = this.data.text;
label1.textAlign = 'center';
label1.fontSize = 50;
label1.fontName = 'BRLNSDB';
label1.fontColor = '#ffffff';
pic1.addChild(label1);
const pic2 = new MySprite();
pic2.init(this.images.get(this.data.pic_url_2));
pic2.x = this.canvasWidth / 2 + this.canvasWidth;
pic2.y = this.canvasHeight / 2;
pic2.setScaleXY(maxW / pic2.width);
this.renderArr.push(pic2);
this.pic2 = pic2;
this.curPic = pic1;
}
btnLeftClicked() {
this.lastPage();
}
btnRightClicked() {
this.nextPage();
}
lastPage() {
if (this.curPic == this.pic1) {
return;
}
this.canTouch = false;
const moveLen = this.canvasWidth;
tweenChange(this.pic1, {x: this.pic1.x + moveLen}, 1);
tweenChange(this.pic2, {x: this.pic2.x + moveLen}, 1, () => {
this.canTouch = true;
this.curPic = this.pic1;
});
}
nextPage() {
if (this.curPic == this.pic2) {
return;
}
this.canTouch = false;
const moveLen = this.canvasWidth;
tweenChange(this.pic1, {x: this.pic1.x - moveLen}, 1);
tweenChange(this.pic2, {x: this.pic2.x - moveLen}, 1, () => {
this.canTouch = true;
this.curPic = this.pic2;
});
}
pic1Clicked() {
this.playAudio(this.data.audio_url);
}
pic2Clicked() {
this.playAudio(this.data.audio_url_2);
}
mapDown(event) {
if (!this.canTouch) {
return;
}
if ( this.checkClickTarget(this.btnLeft) ) {
this.btnLeftClicked();
return;
}
if ( this.checkClickTarget(this.btnRight) ) {
this.btnRightClicked();
return;
}
if ( this.checkClickTarget(this.pic1) ) {
this.pic1Clicked();
return;
}
if ( this.checkClickTarget(this.pic2) ) {
this.pic2Clicked();
return;
}
// if ( this.checkClickTarget(this.btnLeft) ) {
// this.btnLeftClicked();
// return;
// }
}
mapMove(event) {
......
const res = [
// ['bg', "assets/play/bg.jpg"],
['btn_left', "assets/play/btn_left.png"],
['btn_right', "assets/play/btn_right.png"],
// ['text_bg', "assets/play/text_bg.png"],
['opacity', "assets/play/opacity.png"],
['white', "assets/play/white.jpg"],
];
const resAudio = [
['click', "assets/play/music/click.mp3"],
// ['click', "assets/play/music/click.mp3"],
];
export {res, resAudio};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment