Commit caa5a92f authored by Chen Jiping's avatar Chen Jiping

perf:完成开发

parent 8a51c964
...@@ -128,5 +128,8 @@ ...@@ -128,5 +128,8 @@
} }
} }
}, },
"defaultProject": "ng-template-generator" "defaultProject": "ng-template-generator",
} "cli": {
"analytics": "f20c6511-f4ed-4db3-8182-6a41eadc5db4"
}
}
\ No newline at end of file
export class Obj{
/**音频材料 */
audioUrl: String;
/**图片材料 */
picUrl:String;
val : String;
}
\ No newline at end of file
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
</div> </div>
<div nz-row nzType="flex" nzAlign="middle"> <div nz-row nzType="flex" nzAlign="middle">
<!--
<div nz-col nzSpan="5" nzOffset="1"> <div nz-col nzSpan="5" nzOffset="1">
<h5> add background: </h5> <h5> add background: </h5>
...@@ -18,7 +19,18 @@ ...@@ -18,7 +19,18 @@
</app-upload-image-with-preview> </app-upload-image-with-preview>
</div> </div>
</div> </div>
-->
<div nz-col nzSpan="3" nzOffset="1">
<h5> 音频材料: </h5>
<div style="width: 100%; margin-top: 5px;">
<app-audio-recorder
[audioUrl]="exercises?.audio_url"
(audioUploaded)="onItemAudioUploadSuccess($event, exercises)"
></app-audio-recorder>
</div>
</div>
<div nz-col nzSpan="5" nzOffset="1" class="img-box" <div nz-col nzSpan="5" nzOffset="1" class="img-box"
*ngFor="let it of hotZoneArr; let i = index"> *ngFor="let it of hotZoneArr; let i = index">
...@@ -68,7 +80,7 @@ ...@@ -68,7 +80,7 @@
<div class="bg-box"> <div class="bg-box">
<button nz-button nzType="dashed" (click)="addBtnClick()" <button nz-button nzType="dashed" (click)="addBtnClick()"
class="add-btn"> class="add-btn" [disabled]="hotZoneArr.length == 1 ? true : false">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i> <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
<!--Add Image--> <!--Add Image-->
Add hot zone Add hot zone
......
...@@ -103,6 +103,17 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -103,6 +103,17 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.init(); this.init();
} }
_exercises = null;
get exercises(){
return this._exercises;
}
@Input()
set exercises(v){
this._exercises = v;
}
onResize(event) { onResize(event) {
this.winResizeEventStream.next(); this.winResizeEventStream.next();
} }
...@@ -129,7 +140,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -129,7 +140,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onBackgroundUploadSuccess(e) { onBackgroundUploadSuccess(e) {
console.log('e: ', e); console.log('e: ', e);
this.bgItem.url = e.url; this.bgItem.picUrl = e.url;
this.refreshBackground(); this.refreshBackground();
} }
...@@ -151,9 +162,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -151,9 +162,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
const bg = this.bg; const bg = this.bg;
if (this.bgItem.url) { if (this.bgItem.picUrl) {
bg.load(this.bgItem.url).then(() => { bg.load(this.bgItem.picUrl).then(() => {
const rate1 = this.canvasWidth / bg.width; const rate1 = this.canvasWidth / bg.width;
const rate2 = this.canvasHeight / bg.height; const rate2 = this.canvasHeight / bg.height;
...@@ -382,6 +393,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -382,6 +393,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
initItem() { initItem() {
const refreshBg = () => {
setInterval(() => {
this.refreshBackground();
}, 1000);
}
if (!this.bgItem) { if (!this.bgItem) {
this.bgItem = {}; this.bgItem = {};
} else { } else {
...@@ -401,6 +418,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -401,6 +418,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.initHotZoneArr(); this.initHotZoneArr();
} }
refreshBg();
}); });
} }
...@@ -894,7 +912,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -894,7 +912,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
console.log('hotZoneItemArr: ', hotZoneItemArr); console.log('hotZoneItemArr: ', hotZoneItemArr);
this.save.emit({bgItem, hotZoneItemArr}); let exercises = this._exercises;
if(!exercises){
exercises = {};
}
this.save.emit({bgItem, hotZoneItemArr, exercises});
} }
private updatePos() { private updatePos() {
......
<div class="model-content"> <div class="model-content">
<div nz-row>
<div nz-col [nzSpan]="20" nzOffset="2">
<div nz-form>
<div id='title-anchor'>
<nz-divider nzText="基本信息" nzOrientation="left"></nz-divider>
</div>
<nz-form-item>
<nz-form-label [nzSpan]="3">背景图片</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.bgItem.picUrl"
(imageUploaded)="onImageUploadSuccess($event,item.bgItem, 'picUrl')">
</app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
</div>
</div>
</div>
<div nz-row>
<div id='listen-anchor' nz-col [nzSpan]="20" nzOffset="2">
<nz-divider nzText="练习题" nzOrientation="left"></nz-divider>
</div>
<div nz-col [nzSpan]="20" nzOffset="2" class='border'>
<div *ngFor="let data of item.exercisesArr;let i = index">
<div class='border-lite'>内容:{{i+1}}
<button style="margin: 10px;" nz-button nzType="danger" (click)="delExercisesItem(i)">
<span>删除</span>
</button>
</div>
<app-custom-hot-zone [bgItem]="item.bgItem" [hotZoneItemArr]="data.hotZoneItemArr" [isHasRect]="false"
[exercises]="data" [defaultItemType]="'text'" (save)="saveData($event, i)"></app-custom-hot-zone>
</div>
</div>
<hr>
<div id='listen-anchor' nz-col [nzSpan]="20" nzOffset="2">
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="exercises">操作</nz-form-label>
<nz-form-control [nzSpan]="6">
<button nz-button nzType="dashed" class="add-btn" id="add-btn" (click)="addExercisesItem()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-form-control>
</nz-form-item>
</div>
<div style="position: absolute; left: 200px; top: 100px; width: 800px;"> </div>
\ No newline at end of file
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
<app-upload-image-with-preview
[picUrl]="item.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')"
></app-upload-image-with-preview>
<app-audio-recorder
[audioUrl]="item.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
></app-audio-recorder>
<app-custom-hot-zone></app-custom-hot-zone>
<app-upload-video></app-upload-video>
<app-lesson-title-config></app-lesson-title-config>
</div>
</div>
\ No newline at end of file
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core'; import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core';
import { NzMessageService } from "ng-zorro-antd";
@Component({ @Component({
selector: 'app-form', selector: 'app-form',
...@@ -10,12 +10,14 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -10,12 +10,14 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用 // 储存数据用
saveKey = "test_0011"; saveKey = "LST-04-01";
// 储存对象 // 储存对象
item; item;
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) {
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef, private message: NzMessageService) {
} }
...@@ -24,8 +26,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -24,8 +26,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item = {}; this.item = {};
this.item.bgItem = {};
this.item.exercisesArr = [];
// 获取存储的数据 // 获取存储的数据
(<any> window).courseware.getData((data) => { (<any>window).courseware.getData((data) => {
if (data) { if (data) {
this.item = data; this.item = data;
...@@ -50,6 +56,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -50,6 +56,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() { init() {
console.log('this.item: ', this.item);
} }
...@@ -58,19 +65,19 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -58,19 +65,19 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存图片数据 * 储存图片数据
* @param e * @param e
*/ */
onImageUploadSuccess(e, key) { onImageUploadSuccess(e, item, key) {
this.item[key] = e.url; item[key] = e.url;
this.save(); this.save();
} }
/** /**
* 储存音频数据 * 储存音频数据
* @param e * @param e
*/ */
onAudioUploadSuccess(e, key) { onAudioUploadSuccess(e, item, key) {
this.item[key] = e.url; item[key] = e.url;
this.save(); this.save();
} }
...@@ -80,7 +87,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -80,7 +87,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存数据 * 储存数据
*/ */
save() { save() {
(<any> window).courseware.setData(this.item, null, this.saveKey); (<any>window).courseware.setData(this.item, null, this.saveKey);
this.refresh(); this.refresh();
} }
...@@ -93,5 +100,45 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -93,5 +100,45 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1); }, 1);
} }
/**
* 添加练习
*/
addExercisesItem() {
let exercises = {};
this.item.exercisesArr.push(exercises);
this.save();
}
delExercisesItem(index) {
if (index !== -1) {
this.item.exercisesArr.splice(index, 1);
this.save();
}
}
saveData(e, i ) {
console.log(' in saveData e: ', e);
const { bgItem, hotZoneItemArr, exercises } = e;
this.item.exercisesArr[i].hotZoneItemArr = hotZoneItemArr;
this.item.exercisesArr[i].audio_url = exercises.audio_url;
this.item.bgItem = bgItem;
this.save();
this.message.create(
'success',
'保存成功'
);
}
} }
/**
*
* @param audio 音频
* @param now true-重新开始播放,flase-继续播放
* @param callback
*/
export function playAudio(audio, now = false, callback = null) {
if (audio) {
if (now) {
audio.pause();
audio.currentTime = 0;
}
if (callback) {
audio.onended = () => {
callback();
};
}
audio.play();
}
}
/**
* 暂停播放音频
* @param audio 音频
* @param reset 暂停是否重置:true-是,false-否
* @param callback
*/
export function pauseAudio(audio, reset = false, callback = null) {
if (audio) {
if (reset) {
audio.currentTime = 0;
}
audio.pause();
if (callback) {
callback();
}
}
}
\ No newline at end of file
import { playAudio } from './AudioUtil';
import { MySprite, ShapeRect, tweenChange } from './Unit';
export class Celebrate{
bg: ShapeRect;
images;
audioObj;
bigStar :MySprite;
smallStar : MySprite;
pic : MySprite;
init(images, audioObj){
this.images = images;
this.audioObj = audioObj;
const bg = new ShapeRect();
this.bg = bg;
bg.alpha = 0;
this.initPic();
}
initPic(){
const pic = new MySprite();
pic.init(this.images.get('bg_aswsome'), 0.5, 0.5);
pic.x = pic.width / 2;
pic.y = pic.height / 2;
this.bg.addChild(pic);
this.pic = pic;
this.bg.setSize(pic.width, pic.height);
;
const bigStar = new MySprite();
this.bigStar = bigStar
bigStar.init(this.images.get('icon_star2'), 0.5, 0.5);
bigStar.x = 49 + bigStar.width / 2;
bigStar.y = 94 + bigStar.height / 2;
this.bg.addChild(bigStar);
const smallStar = new MySprite();
this.smallStar = smallStar;
smallStar.init(this.images.get('icon_star1'));
smallStar.x = 474 + smallStar.width / 2;
smallStar.y = 143 + smallStar.height / 2;
this.bg.addChild(smallStar);
}
show(mapscale = 1, callback = null){
let tempScale = 1;
this.pic.setScaleXY(0);
this.smallStar.setScaleXY(0);
this.bigStar.setScaleXY(0);
playAudio(this.audioObj['celebrate'], true);
tweenChange(this.pic, {scaleX : tempScale, scaleY : tempScale}, 0.5, ()=>{
tweenChange(this.smallStar, {scaleX : tempScale * 1.3, scaleY : tempScale * 1.3}, 0.3, ()=>{
tweenChange(this.smallStar, {scaleX : tempScale, scaleY : tempScale}, 0.3)
});
tweenChange(this.bigStar, {scaleX : tempScale * 1.3, scaleY : tempScale * 1.3}, 0.3, ()=>{
tweenChange(this.bigStar, {scaleX : tempScale, scaleY : tempScale}, 0.3, callback)
});
})
}
}
\ No newline at end of file
import {
MySprite,
moveItem,
removeItemFromArr,
rotateItem
} from './Unit';
export class Petal {
renderArr = [];
images;
ctx;
playing = true;
tempRenderArr = [];
constructor(renderArr, images, ctx) {
this.renderArr = renderArr;
this.images = images;
this.ctx = ctx;
this.tempRenderArr = [];
}
stop(callback = null) {
this.playing = false;
const checkFinish = () => {
if (this.tempRenderArr.length == 0) {
if (callback) {
callback();
}
}
else {
setTimeout(() => {
checkFinish();
}, 100);
}
}
checkFinish();
}
/**
* 显示结束花瓣
* @param rect {x,y,width, height} 花瓣显示位置及大小
* @param mapScale
* @param timeout 花瓣显示间隔
* @param kinds 花瓣种类,即花瓣图片样式数组个数
*/
showPetal(rect, mapScale: number, timeout: number, kinds = 9) {
if (!this.playing) {
return;
}
const petal = this.getPetal(rect, mapScale, kinds);
this.renderArr.push(petal);
this.tempRenderArr.push(petal);
let toY = rect.y + rect.height;
moveItem(petal, petal.x, toY + petal.height * petal.scaleY, petal['time'], () => {
removeItemFromArr(this.renderArr, petal);
removeItemFromArr(this.tempRenderArr, petal);
});
rotateItem(petal, petal['tr'], petal['time']);
setTimeout(() => {
this.showPetal(rect, mapScale, timeout);
}, timeout);
}
/**
* 得到花瓣
* @param rect
* @param mapScale
* @param kinds
*/
private getPetal(rect, mapScale, kinds) {
const petal = new MySprite(this.ctx);
const id = Math.ceil(Math.random() * kinds);
petal.init(this.images.get('petal_' + id));
const randomS = (Math.random() * 0.4 + 0.6) * mapScale;
petal.setScaleXY(randomS);
const randomR = Math.random() * 360;
petal.rotation = randomR;
const randomX = rect.x + Math.random() * rect.width;
petal.x = randomX;
petal.y = rect.y - petal.height / 2 * petal.scaleY;
const randomT = 0.5 + Math.random() * 2;
petal['time'] = randomT;
let randomTR = 360 * Math.random(); // - 180;
if (Math.random() < 0.5) { randomTR *= -1; }
petal['tr'] = randomTR;
return petal;
}
}
\ No newline at end of file
...@@ -17,3 +17,8 @@ ...@@ -17,3 +17,8 @@
src: url("../../assets/font/BRLNSDB.TTF") ; src: url("../../assets/font/BRLNSDB.TTF") ;
} }
@font-face
{
font-family: 'MMTextBook-Bold';
src: url("../../assets/font/MMTextBook-Bold.otf") ;
}
\ No newline at end of file
This diff is collapsed.
const res = [ const res = [
// ['bg', "assets/play/bg.jpg"],
['btn_left', "assets/play/btn_left.png"], ['bg_1', "assets/play/bg_1.png"],
['btn_right', "assets/play/btn_right.png"], ['bg_2', "assets/play/bg_2.png"],
// ['text_bg', "assets/play/text_bg.png"], ['bg_3', "assets/play/bg_3.png"],
['bg_4', "assets/play/bg_4.png"],
['bg_5', "assets/play/bg_5.png"],
['bg_6', "assets/play/bg_6.png"],
['bg_7', "assets/play/bg_7.png"],
['bg_8', "assets/play/bg_8.png"],
['bg_9', "assets/play/bg_9.png"],
['bg_10', "assets/play/bg_10.png"],
['bg_11', "assets/play/bg_11.png"],
['bg_12', "assets/play/bg_12.png"],
['bg_13', "assets/play/bg_13.png"],
['bg_14', "assets/play/bg_14.png"],
['bg_15', "assets/play/bg_15.png"],
['petal_1', "assets/play/petal_1.png"],
['petal_2', "assets/play/petal_2.png"],
['petal_3', "assets/play/petal_3.png"],
['petal_4', "assets/play/petal_4.png"],
['petal_5', "assets/play/petal_5.png"],
['petal_6', "assets/play/petal_6.png"],
['petal_7', "assets/play/petal_7.png"],
['petal_8', "assets/play/petal_8.png"],
['icon_star1', "assets/play/icon_star1.png"],
['icon_star2', "assets/play/icon_star2.png"],
['bg_aswsome', "assets/play/bg_aswsome.png"],
['bg_jing', "assets/play/bg_jing.png"],
['bg_wrong', "assets/play/bg_wrong.png"],
['bg_zi', "assets/play/bg_zi.png"],
['icon_tiao', "assets/play/icon_tiao.png"],
]; ];
...@@ -12,7 +41,10 @@ const res = [ ...@@ -12,7 +41,10 @@ const res = [
const resAudio = [ const resAudio = [
['click', "assets/play/music/click.mp3"], ['click', "assets/play/music/click.mp3"],
['celebrate', "assets/play/music/celebrate.mp3"],
['right', "assets/play/music/right.mp3"],
['find', "assets/play/music/find.mp3"],
['wrong', "assets/play/music/wrong.mp3"],
]; ];
export {res, resAudio}; export {res, resAudio};
This diff is collapsed.
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