From 429b4c9cb330362885a2075d73717c12540deaed Mon Sep 17 00:00:00 2001 From: fanxuehan <fanxuehan@qq.com> Date: Tue, 15 Jun 2021 11:30:26 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=A0=E9=99=A4=E6=97=A0=E7=94=A8?= =?UTF-8?q?=E7=9A=84=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/form/form.component.ts | 4 - src/app/play/play.component.ts | 234 +-------------------------------- 2 files changed, 7 insertions(+), 231 deletions(-) diff --git a/src/app/form/form.component.ts b/src/app/form/form.component.ts index 3588f09..da117ca 100644 --- a/src/app/form/form.component.ts +++ b/src/app/form/form.component.ts @@ -56,10 +56,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { this.item = data; } - if (!this.item.groupTitle) { - this.item.groupTitle = ['', '', '', '']; - } - this.init(); this.changeDetectorRef.markForCheck(); this.changeDetectorRef.detectChanges(); diff --git a/src/app/play/play.component.ts b/src/app/play/play.component.ts index 722f061..40a1d74 100644 --- a/src/app/play/play.component.ts +++ b/src/app/play/play.component.ts @@ -1,9 +1,6 @@ import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core'; - import { - Label, - MySprite, tweenChange, - + Label, MySprite, tweenChange, } from './Unit'; import {res, resAudio} from './resources'; @@ -12,9 +9,6 @@ import {debounceTime} from 'rxjs/operators'; import TWEEN from '@tweenjs/tween.js'; - - - @Component({ selector: 'app-play', templateUrl: './play.component.html', @@ -57,26 +51,16 @@ export class PlayComponent implements OnInit, OnDestroy { canvasLeft; canvasTop; - saveKey = 'test_0011'; - - - btnLeft; - btnRight; - pic1; - pic2; + saveKey = 'test_001211'; canTouch = true; - curPic; - @HostListener('window:resize', ['$event']) onResize(event) { this.winResizeEventStream.next(); } - ngOnInit() { - this.data = {}; // èŽ·å–æ•°æ® @@ -145,20 +129,13 @@ export class PlayComponent implements OnInit, OnDestroy { this.canvas.nativeElement.width = this.wrap.nativeElement.clientWidth; this.canvas.nativeElement.height = this.wrap.nativeElement.clientHeight; - this.ctx = this.canvas.nativeElement.getContext('2d'); this.canvas.nativeElement.width = this.canvasWidth; this.canvas.nativeElement.height = this.canvasHeight; window['curCtx'] = this.ctx; - window['curImages'] = this.images; } - - - - - updateItem(item) { if (item) { item.update(); @@ -174,12 +151,6 @@ export class PlayComponent implements OnInit, OnDestroy { } } - - - - - - initListener() { this.winResizeEventStream @@ -188,7 +159,6 @@ export class PlayComponent implements OnInit, OnDestroy { this.renderAfterResize(); }); - // --------------------------------------------- const setParentOffset = () => { const rect = this.canvas.nativeElement.getBoundingClientRect(); @@ -212,7 +182,6 @@ export class PlayComponent implements OnInit, OnDestroy { }; // --------------------------------------------- - let firstTouch = true; const touchDownFunc = (e) => { @@ -249,7 +218,6 @@ export class PlayComponent implements OnInit, OnDestroy { this.mapUp(e); }; - const element = this.canvas.nativeElement; const addTouchListener = () => { @@ -280,7 +248,6 @@ export class PlayComponent implements OnInit, OnDestroy { addTouchListener(); } - playAudio(key, now = false, callback = null) { const audio = this.audioObj[key]; @@ -299,8 +266,6 @@ export class PlayComponent implements OnInit, OnDestroy { } } - - loadResources() { const pr = []; this.rawImages.forEach((value, key) => {// é¢„åŠ è½½å›¾ç‰‡ @@ -341,7 +306,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(); @@ -351,17 +316,12 @@ export class PlayComponent implements OnInit, OnDestroy { }); } - renderAfterResize() { this.canvasWidth = this.wrap.nativeElement.clientWidth; this.canvasHeight = this.wrap.nativeElement.clientHeight; this.init(); } - - - - checkClickTarget(target) { const rect = target.getBoundingBox(); @@ -394,10 +354,6 @@ export class PlayComponent implements OnInit, OnDestroy { return false; } - - - - addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null) { const audioObj = this.audioObj; @@ -427,60 +383,42 @@ export class PlayComponent implements OnInit, OnDestroy { this.rawImages.set(url, url); } - - - - - // ======================================================编写区域========================================================================== - - - - /** * æ·»åŠ é»˜è®¤æ•°æ® ä¾¿äºŽæ— æ•°æ®æ—¶çš„展示 */ initDefaultData() { - if (!this.data.pic_url) { this.data.pic_url = 'assets/play/default/pic.jpg'; this.data.pic_url_2 = 'assets/play/default/pic.jpg'; } } - /** * æ·»åŠ é¢„åŠ è½½å›¾ç‰‡ */ 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); @@ -489,173 +427,25 @@ export class PlayComponent implements OnInit, OnDestroy { // this.mapScale = sx; // this.mapScale = sy; - this.renderArr = []; - - - } - - /** * åˆå§‹åŒ–试图 */ initView() { - - 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) { @@ -666,10 +456,7 @@ export class PlayComponent implements OnInit, OnDestroy { } - - update() { - // ---------------------------------------------------------- this.animationId = window.requestAnimationFrame(this.update.bind(this)); // 清除画布内容 @@ -678,13 +465,6 @@ export class PlayComponent implements OnInit, OnDestroy { TWEEN.update(); // ---------------------------------------------------------- - - this.updateArr(this.renderArr); - - } - - - } -- 2.21.0