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

feat: ScrollView

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