Commit 3157ab84 authored by Chen Jiping's avatar Chen Jiping

feat:完成模板开发

parent 9f3a2900
...@@ -128,5 +128,8 @@ ...@@ -128,5 +128,8 @@
} }
} }
}, },
"defaultProject": "ng-template-generator" "defaultProject": "ng-template-generator",
} "cli": {
"analytics": "010aa237-1c79-4dee-8064-f931572380cc"
}
}
\ No newline at end of file
import { Obj } from "./ObjBean";
export class ExercisesBean extends Obj{
//单词数组
wordArr = [];
}
export function getDefaultExercises(){
let exercises = new ExercisesBean();
let word = getDefaultWord();
exercises.wordArr.push(word);
return exercises;
}
export class LetterBean extends Obj{
fontColor = "";
}
export function getDefaultLetter(){
let letter = new LetterBean();
return letter;
}
export class WordBean extends Obj{
letterArr = [];
isFill = '0';
}
export function getDefaultWord(){
let word = new WordBean();
return word;
}
export class Obj{
/**音频材料 */
audioUrl: String;
/**图片材料 */
picUrl:String;
val : String;
}
\ No newline at end of file
import { Obj } from "./ObjBean";
export class TitleBean extends Obj{
part1 : String;
part2: String;
}
export function getDefaultTile(){
let title = new TitleBean();
title.part1 = "C";
title.part2 = "Read and point";
return title;
}
\ No newline at end of file
<div class="model-content"> <div class="model-content">
<div nz-row>
<div nz-col nzOffset='4'>
<h1 nz-title>课程练习内容编辑</h1>
</div>
</div>
<div nz-row>
<div nz-col [nzSpan]="15" nzOffset="3">
<div nz-form>
<div id='title-anchor'>
<nz-divider nzText="课程名称" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="part1">标题1</nz-form-label>
<nz-form-control [nzSpan]="6">
<nz-input-group nzAddOnBefore="Part">
<input type="text" id="part1" nz-input [(ngModel)]="item.title.part1" (blur)="save()">
</nz-input-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="part2">标题2</nz-form-label>
<nz-form-control [nzSpan]="6">
<input nz-input type="text" id="part2" [(ngModel)]="item.title.part2" (blur)="save()">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="audioUrl">发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder [audioUrl]="item.title.audioUrl" id="audioUrl"
(audioUploaded)="onAudioUploadSuccess($event, item.title, 'audioUrl')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
</div>
<div id='listen-anchor'>
<nz-divider nzText="听力材料" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-control [nzSpan]="6" nzOffset="3">
<app-audio-recorder id="item.listenAudioUrl" [audioUrl]="item.listenAudioUrl"
(audioUploaded)="onAudioUploadSuccess($event, item, 'listenAudioUrl')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
</div>
<div>
<nz-divider nzText="练习题皮肤" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-label [nzSpan]="3">练习题皮肤</nz-form-label>
<nz-form-control [nzSpan]="6">
<nz-radio-group [(ngModel)]="item.skin" (ngModelChange)="save()">
<label nz-radio nzValue="A">皮肤A</label>
<label nz-radio nzValue="B">皮肤B</label>
</nz-radio-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control [nzSpan]="6" nzOffset="3">
<div *ngIf="item.skin == 'A'">
<img src="assets/play/skin_a.png" style="width: auto;height: 200px;">
</div>
<div *ngIf="item.skin == 'B'">
<img src="assets/play/skin_b.png" style="width: auto;height: 200px;">
</div>
</nz-form-control>
</nz-form-item>
</div>
</div>
</div>
</div>
<!--练习题-->
<div style="position: absolute; left: 200px; top: 100px; width: 800px;"> <div nz-row>
<div nz-col [nzSpan]="23" nzOffset="1">
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()"> <nz-divider nzText="内容编辑" nzOrientation="left"></nz-divider>
<nz-collapse nzAccordion>
<app-upload-image-with-preview <nz-collapse-panel *ngFor="let data of item.exercisesArr; let i=index" [nzHeader]="'卡片' + (i + 1)"
[picUrl]="item.pic_url" [nzActive]="true" [nzShowArrow]="false">
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')" <nz-form-item>
></app-upload-image-with-preview> <nz-form-label [nzSpan]="2">标题文本</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder <input type="text" nz-input [(ngModel)]="data.val" (blur)="save()">
[audioUrl]="item.audio_url" </nz-form-control>
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')" </nz-form-item>
></app-audio-recorder> <nz-form-item>
<app-custom-hot-zone></app-custom-hot-zone> <nz-form-label [nzSpan]="2">标题音频</nz-form-label>
<app-upload-video></app-upload-video> <nz-form-control [nzSpan]="4">
<app-lesson-title-config></app-lesson-title-config> <app-audio-recorder [audioUrl]="data.audioUrl"
(audioUploaded)="onAudioUploadSuccess($event, data, 'audioUrl')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<div *ngFor="let word of data.wordArr; let j=index" style="padding: 0.5vw;" nz-col [nzXs]='24' [nzSm]='24'
[nzMd]='24' [nzLg]='24'>
<nz-card nzTitle="单词-{{j+1}}" [nzHoverable]="true">
<nz-form-item>
<nz-form-label [nzSpan]="3">文本</nz-form-label>
<nz-form-control [nzSpan]="6">
<input type="text" nz-input [(ngModel)]="word.val" (blur)="saveWord(word)">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3">音频</nz-form-label>
<nz-form-control [nzSpan]="10">
<app-audio-recorder [audioUrl]="word.audioUrl"
(audioUploaded)="onAudioUploadSuccess($event, word, 'audioUrl')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3">是否填空</nz-form-label>
<nz-form-control [nzSpan]="10">
<nz-radio-group [(ngModel)]="word.isFill" (ngModelChange)="save()">
<label nz-radio nzValue="1"></label>
<label nz-radio nzValue="0"></label>
</nz-radio-group>
</nz-form-control>
</nz-form-item>
<nz-divider nzText="点击字母设置变红" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-control [nzSpan]="20">
<div *ngFor="let letter of word.letterArr; let m = index" style="float: left;">
<a [ngStyle]="{'float': 'left','font-size': '42px','font-family': 'GOTHICB','color':letter.fontColor, 'margin-right': '2px'}"
(click)="clickLetter(letter, m)">{{letter.val == ' ' ? '&nbsp;' : letter.val}}</a>
</div>
</nz-form-control>
</nz-form-item>
</nz-card>
</div>
</nz-collapse-panel>
</nz-collapse>
</div>
</div> </div>
</div> </div>
\ No newline at end of file
\ 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 { getDefaultExercises, getDefaultLetter, getDefaultWord } from '../bean/ExercisesBean';
import { getDefaultTile } from '../bean/TitleBean';
...@@ -10,7 +12,7 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -10,7 +12,7 @@ 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 = "YM5-23";
// 储存对象 // 储存对象
item; item;
...@@ -24,6 +26,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -24,6 +26,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item = {}; this.item = {};
this.item.skin = 'A';
this.item.title = getDefaultTile();
this.item.exercisesArr = [];
// 获取存储的数据 // 获取存储的数据
(<any> window).courseware.getData((data) => { (<any> window).courseware.getData((data) => {
...@@ -50,7 +58,38 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -50,7 +58,38 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() { init() {
if (!this.item.title) {
this.item.title = getDefaultTile();
}
if (!this.item.exercisesArr) {
this.item.exercisesArr = [];
}
for (let i = this.item.exercisesArr.length; i < 5; ++i) {
let exercises = getDefaultExercises();
this.item.exercisesArr.push(exercises);
}
for (let i = 0; i < this.item.exercisesArr.length; ++i) {
let exercises = this.item.exercisesArr[i];
if (!exercises.wordArr) {
exercises.wordArr = [];
}
let len = exercises.wordArr.length;
for (let j = len; j < 3; ++j) {
let word = getDefaultWord();
exercises.wordArr.push(word);
}
}
} }
...@@ -58,19 +97,19 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -58,19 +97,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();
} }
...@@ -93,5 +132,44 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -93,5 +132,44 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1); }, 1);
} }
saveWord(item) {
let val = "";
if (!item.letterArr) {
item.letterArr = [];
}
for (let i = 0; i < item.letterArr.length; ++i) {
val += item.letterArr[i].val;
}
//值发生改变,则重新处理数据
if (item.val != val) {
item.letterArr = [];
for (let i = 0; i < item.val.length; ++i) {
let letter = getDefaultLetter();
letter.fontColor = "#363333";
letter.val = item.val.charAt(i);
item.letterArr.push(letter);
}
}
this.save();
}
clickLetter(letter, i) {
if (letter.fontColor == "#363333") {
letter.fontColor = "#c8171e";
}
else {
letter.fontColor = "#363333";
}
this.save();
}
} }
/**
*
* @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 { Label, Label2, LabelText, Line, MySprite, ShapeRect } from "./Unit";
class Eexercises {
images;
scaleX = 1;
scaleY = 1;
bg: ShapeRect;
baseWidth = 380;
baseHeight = 160;
data;
titleBg;
cardBg;
wordArr = [];
title;
titleColor = "#5f1782";
init(data, images, scaleX = 1, scaleY = 1) {
this.data = data;
this.images = images;
this.scaleX = scaleX;
this.scaleY = scaleY;
let w = this.baseWidth * this.scaleX;
let h = this.baseHeight * this.scaleY;
this.initBg(w, h);
this.initPic();
this.initTile();
this.initWord();
}
private initBg(w, h) {
const bg = new ShapeRect();
bg.setSize(w, h);
bg.fillColor = "#f9f2d4";
this.bg = bg;
}
initPic() {
const cardBg = new MySprite();
cardBg.init(this.getImageObj('card'));
cardBg.scaleX = this.scaleX;
cardBg.scaleY = this.scaleY;
cardBg.x = this.bg.width / 2;
cardBg.y = this.bg.height / 2;
this.bg.addChild(cardBg);
this.cardBg = cardBg;
const titleBg = new MySprite();
titleBg.init(this.getImageObj('title'));
titleBg.scaleX = this.scaleX;
titleBg.scaleY = this.scaleY;
titleBg.x = this.bg.width / 2;
titleBg.y = titleBg.getBoundingBox().height / 2 - 2 * this.scaleY;
this.bg.addChild(titleBg);
this.titleBg = titleBg;
}
initTile() {
const title = new Label();
title.text = this.data.val;
title.textAlign = 'center';
title.fontSize = 36;
title.fontName = "ahronbd-1";
title.fontColor = this.titleColor;
title.setScaleXY(this.scaleX);
title.refreshSize();
title.x = this.bg.width / 2;
title.y = this.titleBg.getBoundingBox().height / 2 + 5 * this.scaleY;
this.bg.addChild(title);
this.title = title;
}
initWord() {
let tw = 0;
for (let i = 0; i < this.data.wordArr.length; ++i) {
let word = this.data.wordArr[i];
let text = this.getWord(word);
tw += text.getBoundingBox().width;
}
let dw = 28 * this.scaleX;
tw += (this.data.wordArr.length - 1) * dw;
let x = (this.bg.width - tw) / 2;
for (let i = 0; i < this.wordArr.length; ++i) {
let text = this.wordArr[i];
let box = text.getBoundingBox();
text.x = x + dw * i;
x += box.width;
text.y = this.bg.height - 30 * this.scaleY - box.height / 2;
const textBg = new ShapeRect();
textBg.setSize(box.width, box.height);
textBg.x = text.x;
textBg.y = text.y - box.height / 2;
textBg.alpha = 0;
this.bg.addChild(textBg);
text.textBg = textBg;
if(text.data.isFill == '1'){
let underLine = new Line();
underLine.lineColor = "#949494";
underLine.lineWidth = 3 * this.scaleX;
underLine.y = text.y + box.height / 2;
underLine.x = text.x;
underLine.setLine(box.width);
text.underLine = underLine;
this.bg.addChild(underLine);
text.alpha = 0;
}
this.bg.addChild(text);
}
}
private getWord(val) {
let text = new Label2();
text['data'] = val;
text.fontName = "MMB";
let fontSize = 38;
text.fontSize = fontSize;
let textArr = new Array<LabelText>();
text.textArr = textArr;
for (let i = 0; i < val.letterArr.length; ++i) {
var letter = val.letterArr[i];
let labelText = new LabelText();
labelText.val = letter.val;
labelText.fontColor = letter.fontColor;
textArr.push(labelText);
}
text.scaleX = this.scaleX;
text.scaleY = this.scaleY;
text.refreshSize();
this.wordArr.push(text);
return text;
}
getImageObj(key) {
return this.images.get(key);
}
}
export class EexercisesA extends Eexercises {
getImageObj(key) {
return this.images.get(key + "_a");
}
}
export class EexercisesB extends Eexercises {
getImageObj(key) {
return this.images.get(key + "_b");
}
}
\ No newline at end of file
import {
Label,
MySprite, ShapeRectNew,
ShapeCircle,
tweenChange,
ShapeRect
} from './Unit';
import {
playAudio,
pauseAudio
} from './AudioUtil';
export class Listening {
audio;
images;
bg;
btnPlay;
btnStop;
playing = false;
constructor(audio, images) {
this.audio = audio;
this.images = images;
}
init(scaleX = 1, scaleY = 1) {
const bg = new ShapeRect();
const btnPlay = new MySprite();
btnPlay.init(this.images.get('play'));
btnPlay.scaleX = scaleX;
btnPlay.scaleY = scaleY;
btnPlay.x = btnPlay.getBoundingBox().width / 2
btnPlay.y = btnPlay.getBoundingBox().height / 2
this.btnPlay = btnPlay;
bg.addChild(btnPlay);
const btnStop = new MySprite();
btnStop.init(this.images.get('stop'));
btnStop.x = btnPlay.x;
btnStop.y = btnPlay.y;
btnStop.alpha = 0;
btnStop.scaleX = scaleX;
btnStop.scaleY = scaleY;
this.btnStop = btnStop;
bg.addChild(btnStop);
bg.setSize(btnPlay.getBoundingBox().width, btnPlay.getBoundingBox().height);
bg.alpha = 0;
this.bg = bg;
}
play(callback = null){
console.log('playing:', this.playing);
if(!this.playing){
this.playAudio(callback);
return this.audio;
}
else{
this.pauseAudio(callback);
}
return null;
}
reset(){
this.btnPlay.alpha = 1;
this.btnStop.alpha = 0;
this.playing = false;
}
playAudio(callback = null){
this.btnPlay.alpha = 0;
this.btnStop.alpha = 1;
playAudio(this.audio, false, callback);
this.playing = true;
return this.audio;
}
pauseAudio(callback){
this.btnPlay.alpha = 1;
this.btnStop.alpha = 0;
this.playing = false;
pauseAudio(this.audio, false, callback)
}
}
\ No newline at end of file
import {
Label,
MySprite, ShapeRect,
} from './Unit';
import {
playAudio,
pauseAudio
} from './AudioUtil';
export class Title {
titleBg: ShapeRect;
audio;
images;
titleData;
constructor(titleData, images) {
this.titleData = titleData;
this.images = images;
}
init(mapScaleX = 1, mapScaleY = 1) {
let titleBg = new ShapeRect();
//初始化标题1背景
const titePart1Bg = new ShapeRect();
titePart1Bg.fillColor="#763c92";
let pWidth = 117 * mapScaleX;
let pHeight = 65 * mapScaleY;
titePart1Bg.setSize(pWidth, pHeight);
titePart1Bg.setShadow(4,4,0, 'rgba(0, 0, 0, 0.2)');
titePart1Bg.x = 0;
titleBg.addChild(titePart1Bg);
//标题1内容
const part1 = new Label();
part1.text = this.titleData.part1;
part1.textAlign = 'left';
part1.fontSize = 48;
part1.fontName = "BRLNSDB";
part1.fontColor = "#facf46";
part1.setScaleXY(mapScaleX);
part1.refreshSize();
part1.x = pWidth - part1.getBoundingBox().width - 13 * mapScaleX;
part1.y = 5 * mapScaleY + part1.getBoundingBox().height / 2;
titleBg.addChild(part1);
//标题2内容
const part2 = new Label();
part2.text = this.titleData.part2;
part2.fontSize = 36;
part2.fontName = "FUTURA";
part2.fontColor = "#000000";
part2.setScaleXY(mapScaleX);
part2.refreshSize();
part2.x = titePart1Bg.getBoundingBox().width + 11 * mapScaleX;
part2.y = 16 * mapScaleY + part2.getBoundingBox().height / 2;
let height = Math.max(titePart1Bg.getBoundingBox().height, part2.getBoundingBox().height);
let width = titePart1Bg.getBoundingBox().width + part2.getBoundingBox().width + 11 * mapScaleX;
titePart1Bg.y = (height - pHeight)/2;
titleBg.setSize(width, height);
titleBg.alpha = 0;
titleBg.addChild(part2);
this.titleBg = titleBg;
}
getTitleBg(){
return this.titleBg;
}
setAudio(audio){
this.audio = audio;
}
playAudio(callback = null){
playAudio(this.audio, true, callback);
return this.audio;
}
pasueAudio(callback){
pauseAudio(this.audio, true, callback)
}
}
\ No newline at end of file
/**
* 对item进行从左向右排版
* @param itemArr
* @param col 列
* @param pW 父宽度
* @param pH 父高度
* @param h item的高度
* @param dw 间隔宽度
* @param dh 间隔高度
* @returns
*/
export function typesetting(itemArr = [], col = 1, pW = 1280, pH = 720, h = 70, dw = 20, dh = 20) {
if (!itemArr || itemArr.length == 0 || col == 0) {
return;
}
let len = itemArr.length;
let row = Math.ceil(len / col);
let tH = row * h + (row - 1) * dh;
//计处纵向坐标
let y = (pH - tH) / 2;
for (let i = 0; i < row; ++i) {
let tCol = col;
if ((i + 1) * col > len) {
tCol = len - i * col;
}
let tW = 0;
//计算总宽度
for (let j = 0; j < tCol; ++j) {
tW += itemArr[i * col + j].width;
}
tW += dw * (tCol - 1);
//计算横向开始坐标
let x = (pW - tW) / 2;
let tempX = x;
for (let j = 0; j < tCol; ++j) {
let item = itemArr[i * col + j];
item.x = tempX;
item.y = y+ (h + dh) * i;
tempX += item.width + dw;
}
}
}
\ No newline at end of file
...@@ -709,6 +709,265 @@ export class Label extends MySprite { ...@@ -709,6 +709,265 @@ export class Label extends MySprite {
} }
export class LabelText {
private _val: string;
private _fontColor = "#000000";
private _underLine: boolean = false;
private _visiable = true;
private _fill = false;
private _width = 0;
private _x = 0;
set val(val) {
this._val = val;
}
get val() {
return this._val;
}
set fontColor(fontColor) {
this._fontColor = fontColor;
}
get fontColor() {
return this._fontColor;
}
set underLine(underLine) {
this._underLine = underLine;
}
get underLine() {
return this._underLine;
}
set visiable(visiable){
this._visiable = visiable;
}
get visiable(){
return this._visiable;
}
set fill(file){
this._fill = file;
}
get fill(){
return this._fill;
}
set width(width){
this._width = width;
}
get width(){
return this._width;
}
set x(val){
this._x = val;
}
get x(){
return this._x;
}
}
export class Label2 extends MySprite {
textArr: Array<LabelText> = [];
fontName = 'Verdana';
textAlign = 'left';
fontSize = 40;
fontColor = '#000000';
fontWeight = 900;
_maxWidth;
outline = 0;
outlineColor = '#ffffff';
_outlineFlag = false;
_outLineWidth;
_outLineColor;
underLineWidth: number;
underLineColor = "#000000";
constructor(ctx = null) {
super(ctx);
this.init();
}
refreshSize() {
this.ctx.save();
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
this.ctx.fontWeight = this.fontWeight;
let text = "";
let count = 0;
for (let i = 0; i < this.textArr.length; ++i) {
if(this.textArr[i].underLine){
count ++;
continue;
}
text += this.textArr[i].val;
}
if(count > 0){
this._width = this.ctx.measureText(text).width + 36 * count + 4 * (count - 1);
}
else{
this._width = this.ctx.measureText(text).width;
}
this._height = this.fontSize;
this.refreshAnchorOff();
this.ctx.restore();
}
setMaxSize(w) {
this._maxWidth = w;
this.refreshSize();
if (this.width >= w) {
this.scaleX *= w / this.width;
this.scaleY *= w / this.width;
}
}
show(callBack = null) {
this.visible = true;
if (this.alpha >= 1) {
return;
}
const tween = new TWEEN.Tween(this)
.to({ alpha: 1 }, 800)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => {
if (callBack) {
callBack();
}
})
.start(); // Start the tween immediately.
}
setOutline(width = 5, color = '#ffffff') {
this._outlineFlag = true;
this._outLineWidth = width;
this._outLineColor = color;
}
drawText() {
if (!this.textArr) { return; }
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
this.ctx.fontWeight = this.fontWeight;
var startX = 0;
for (let i = 0; i < this.textArr.length; ++i) {
var text = this.textArr[i];
let width = this.ctx.measureText(text.val).width;
text.width = width;
text.x = startX;
let tempStartX = startX;
let dW = 0;
if (text.underLine && this.underLineWidth > 0) {
this.ctx.save();
this.ctx.beginPath();
this.ctx.lineWidth = this.underLineWidth;
this.ctx.strokeStyle = this.underLineColor;
let lineY = this.fontSize / 2;
this.ctx.moveTo(tempStartX, lineY);
this.ctx.lineTo(tempStartX + 36, lineY);
this.ctx.stroke();
this.ctx.restore();
tempStartX += (36 - width) / 2;
dW = 36 ;
if(this.textArr[i + 1] && this.textArr[i + 1].underLine){
dW += 4 ;
}
}
else{
dW = width;
}
if (this._outlineFlag) {
this.ctx.lineWidth = this._outLineWidth;
this.ctx.strokeStyle = this._outLineColor;
this.ctx.strokeText(text.val, tempStartX, 0);
}
if (this.outline > 0) {
this.ctx.lineWidth = this.outline;
this.ctx.strokeStyle = this.outlineColor;
this.ctx.strokeText(text.val, tempStartX, 0);
}
this.ctx.fillStyle = text.fontColor ? text.fontColor : this.fontColor;
if(text.visiable){
this.ctx.fillText(text.val, tempStartX, 0);
}
startX += dW;
}
}
drawSelf() {
super.drawSelf();
this.drawText();
}
}
export class RichTextOld extends Label { export class RichTextOld extends Label {
textArr = []; textArr = [];
...@@ -1235,7 +1494,35 @@ export class MyAnimation extends MySprite { ...@@ -1235,7 +1494,35 @@ export class MyAnimation extends MySprite {
} }
export class Line extends MySprite{
lineColor = '#ffffff';
lineWidth = 10;
setLine(length){
this.width = length;
}
drawLine() {
this.ctx.save();
this.ctx.beginPath();
this.ctx.lineWidth = this.lineWidth;
this.ctx.strokeStyle = this.lineColor;
this.ctx.moveTo(this._offX, this._offY);
this.ctx.lineTo(this._offX + this.width, this._offY);
this.ctx.stroke();
this.ctx.restore();
}
drawSelf() {
super.drawSelf();
this.drawLine();
}
}
// --------=========== util func =============------------- // --------=========== util func =============-------------
......
const defaultVal = {
"skin":"A",
"title":{
"part1":"C",
"part2":"Read and point",
"audioUrl":"http://staging-teach.cdn.ireadabc.com/919b2c150b41b3306869ebe78ecb70b3.mp3"
},
"exercisesArr":[
{
"wordArr":[
{
"letterArr":[
{
"fontColor":"#363333",
"val":"c"
},
{
"fontColor":"#c8171e",
"val":"a"
},
{
"fontColor":"#363333",
"val":"t"
}
],
"isFill":"0",
"val":"cat"
},
{
"letterArr":[
{
"fontColor":"#363333",
"val":"n"
},
{
"fontColor":"#c8171e",
"val":"a"
},
{
"fontColor":"#363333",
"val":"t"
},
{
"fontColor":"#363333",
"val":"i"
},
{
"fontColor":"#363333",
"val":"o"
},
{
"fontColor":"#363333",
"val":"n"
}
],
"isFill":"0",
"val":"nation",
"audioUrl":"http://staging-teach.cdn.ireadabc.com/a252c069d04f8e04f91b2a1394072f30.mp3"
},
{
"letterArr":[
{
"fontColor":"#363333",
"val":"s"
},
{
"fontColor":"#363333",
"val":"o"
},
{
"fontColor":"#363333",
"val":"f"
},
{
"fontColor":"#c8171e",
"val":"a"
}
],
"isFill":"0",
"val":"sofa"
}
],
"val":"A"
},
{
"wordArr":[
{
"letterArr":[
{
"fontColor":"#363333",
"val":"b"
},
{
"fontColor":"#c8171e",
"val":"e"
},
{
"fontColor":"#363333",
"val":"d"
}
],
"isFill":"0",
"val":"bed"
},
{
"letterArr":[
{
"fontColor":"#c8171e",
"val":"e"
},
{
"fontColor":"#363333",
"val":"m"
},
{
"fontColor":"#363333",
"val":"a"
},
{
"fontColor":"#363333",
"val":"i"
},
{
"fontColor":"#363333",
"val":"l"
}
],
"isFill":"0",
"val":"email"
},
{
"letterArr":[
{
"fontColor":"#363333",
"val":"t"
},
{
"fontColor":"#363333",
"val":"o"
},
{
"fontColor":"#363333",
"val":"i"
},
{
"fontColor":"#363333",
"val":"l"
},
{
"fontColor":"#c8171e",
"val":"e"
},
{
"fontColor":"#363333",
"val":"t"
}
],
"isFill":"0",
"val":"toilet"
}
],
"val":"bed"
},
{
"wordArr":[
{
"letterArr":[
{
"fontColor":"#363333",
"val":"p"
},
{
"fontColor":"#c8171e",
"val":"i"
},
{
"fontColor":"#363333",
"val":"g"
}
],
"isFill":"0",
"val":"pig"
},
{
"letterArr":[
{
"fontColor":"#363333",
"val":"t"
},
{
"fontColor":"#c8171e",
"val":"i"
},
{
"fontColor":"#363333",
"val":"g"
},
{
"fontColor":"#363333",
"val":"e"
},
{
"fontColor":"#363333",
"val":"r"
}
],
"isFill":"0",
"val":"tiger"
},
{
"letterArr":[
{
"fontColor":"#363333",
"val":"b"
},
{
"fontColor":"#363333",
"val":"a"
},
{
"fontColor":"#363333",
"val":"b"
},
{
"fontColor":"#363333",
"val":"y"
}
],
"isFill":"1",
"val":"baby",
"audioUrl":"http://staging-teach.cdn.ireadabc.com/607af37644501e678de6cbafee555948.mp3"
}
],
"val":"a in sofa says"
},
{
"wordArr":[
{
"letterArr":[
],
"isFill":"0"
},
{
"letterArr":[
],
"isFill":"0"
},
{
"letterArr":[
],
"isFill":"0"
}
]
},
{
"wordArr":[
{
"letterArr":[
],
"isFill":"0"
},
{
"letterArr":[
],
"isFill":"0"
},
{
"letterArr":[
],
"isFill":"0"
}
]
}
],
"listenAudioUrl":"http://staging-teach.cdn.ireadabc.com/5b7d8173ec230b0a26bdb5d023b24a3e.mp3"
};
export {defaultVal};
\ No newline at end of file
...@@ -17,3 +17,14 @@ ...@@ -17,3 +17,14 @@
src: url("../../assets/font/BRLNSDB.TTF") ; src: url("../../assets/font/BRLNSDB.TTF") ;
} }
@font-face
{
font-family: 'MMB';
src: url("../../assets/font/MMTextBook-Bold.otf") ;
}
@font-face
{
font-family: 'ahronbd-1';
src: url("../../assets/font/ahronbd-1.ttf") ;
}
\ No newline at end of file
import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core'; import { Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener } from '@angular/core';
import { import {
Label, Label,
MySprite, tweenChange, MySprite, ShapeRect, tweenChange,
} from './Unit'; } from './Unit';
import {res, resAudio} from './resources'; import { res, resAudio } from './resources';
import {Subject} from 'rxjs'; import { Subject } from 'rxjs';
import {debounceTime} from 'rxjs/operators'; import { debounceTime } from 'rxjs/operators';
import TWEEN from '@tweenjs/tween.js'; import TWEEN from '@tweenjs/tween.js';
import { getDefaultTile } from '../bean/TitleBean';
import { getDefaultExercises, getDefaultWord } from '../bean/ExercisesBean';
import { Listening } from './Listening';
import { Title } from './Title';
import { EexercisesA, EexercisesB } from './Exercises';
import { typesetting } from './TypesettingUtil';
import { defaultVal } from './defaultValue.js';
...@@ -22,8 +28,8 @@ import TWEEN from '@tweenjs/tween.js'; ...@@ -22,8 +28,8 @@ import TWEEN from '@tweenjs/tween.js';
}) })
export class PlayComponent implements OnInit, OnDestroy { export class PlayComponent implements OnInit, OnDestroy {
@ViewChild('canvas', {static: true }) canvas: ElementRef; @ViewChild('canvas', { static: true }) canvas: ElementRef;
@ViewChild('wrap', {static: true }) wrap: ElementRef; @ViewChild('wrap', { static: true }) wrap: ElementRef;
// 数据 // 数据
data; data;
...@@ -57,17 +63,19 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -57,17 +63,19 @@ export class PlayComponent implements OnInit, OnDestroy {
canvasLeft; canvasLeft;
canvasTop; canvasTop;
saveKey = 'test_0011'; saveKey = 'YM5-23';
canTouch = true;
/**标题*/
title;
btnLeft; listening;
btnRight;
pic1;
pic2;
canTouch = true; curAudio;
exercisesArr = [];
curPic;
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
...@@ -80,13 +88,16 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -80,13 +88,16 @@ export class PlayComponent implements OnInit, OnDestroy {
this.data = {}; this.data = {};
// 获取数据 // 获取数据
const getData = (<any> window).courseware.getData; const getData = (<any>window).courseware.getData;
getData((data) => { getData((data) => {
if (data && typeof data == 'object') { if (data && typeof data == 'object') {
this.data = data; this.data = data;
} }
// console.log('data:' , data); else{
this.data = defaultVal;
}
//console.log('data:',JSON.stringify(data) );
// 初始化 各事件监听 // 初始化 各事件监听
this.initListener(); this.initListener();
...@@ -285,6 +296,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -285,6 +296,9 @@ export class PlayComponent implements OnInit, OnDestroy {
const audio = this.audioObj[key]; const audio = this.audioObj[key];
if (audio) { if (audio) {
this.pauseAudio(this.curAudio);
if (now) { if (now) {
audio.pause(); audio.pause();
audio.currentTime = 0; audio.currentTime = 0;
...@@ -296,6 +310,20 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -296,6 +310,20 @@ export class PlayComponent implements OnInit, OnDestroy {
}; };
} }
audio.play(); audio.play();
}
return audio;
}
pauseAudio(audio) {
if (audio) {
if (this.listening && audio == this.listening.audio) {
this.listening.pauseAudio();
}
else {
audio.pause();
}
} }
} }
...@@ -341,7 +369,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -341,7 +369,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(a);
}; };
audio.onerror = () => { audio.onerror = () => {
reject(); reject();
...@@ -443,9 +471,37 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -443,9 +471,37 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initDefaultData() { initDefaultData() {
if (!this.data.pic_url) { if (!this.data.title) {
this.data.pic_url = 'assets/play/default/pic.jpg'; this.data.title = getDefaultTile();
this.data.pic_url_2 = 'assets/play/default/pic.jpg'; }
if (!this.data.exercisesArr) {
this.data.exercisesArr = [];
}
for (let i = this.data.exercisesArr.length; i < 5; ++i) {
let exercises = getDefaultExercises();
this.data.exercisesArr.push(exercises);
}
for (let i = 0; i < this.data.exercisesArr.length; ++i) {
let exercises = this.data.exercisesArr[i];
if (!exercises.wordArr) {
exercises.wordArr = [];
}
let len = exercises.wordArr.length;
for (let j = len; j < 3; ++j) {
let word = getDefaultWord();
exercises.wordArr.push(word);
}
} }
} }
...@@ -455,8 +511,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -455,8 +511,7 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initImg() { initImg() {
this.addUrlToImages(this.data.pic_url);
this.addUrlToImages(this.data.pic_url_2);
} }
...@@ -465,12 +520,41 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -465,12 +520,41 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initAudio() { initAudio() {
// 音频资源
this.addUrlToAudioObj(this.data.audio_url);
this.addUrlToAudioObj(this.data.audio_url_2);
// 音效 // 音效
this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3); this.rawAudios.forEach((item, key) => {
// 音效
this.addUrlToAudioObj(key, item);
})
//标题发音
if (this.data.title.audioUrl) {
this.addUrlToAudioObj('titleAudio', this.data.title.audioUrl);
}
//听力材料
if (this.data.listenAudioUrl) {
this.addUrlToAudioObj('listenAudio', this.data.listenAudioUrl);
}
for (let i = 0; i < this.data.exercisesArr.length; ++i) {
let exercises = this.data.exercisesArr[i];
if (exercises.audioUrl) {
this.addUrlToAudioObj(exercises.audioUrl);
}
for (let j = 0; j < exercises.wordArr.length; ++j) {
let word = exercises.wordArr[j];
if (word.audioUrl) {
this.addUrlToAudioObj(word.audioUrl);
}
}
}
} }
...@@ -486,13 +570,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -486,13 +570,10 @@ export class PlayComponent implements OnInit, OnDestroy {
const s = Math.min(sx, sy); const s = Math.min(sx, sy);
this.mapScale = s; this.mapScale = s;
// this.mapScale = sx;
// this.mapScale = sy;
this.renderArr = []; this.renderArr = [];
this.exercisesArr = [];
} }
...@@ -503,159 +584,149 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -503,159 +584,149 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initView() { initView() {
this.initBg();
this.initPic(); this.initTitle();
this.initBottomPart(); this.initBottomPart();
this.initExercises();
} }
initBottomPart() { initBg() {
const btnLeft = new MySprite(); const bg = new ShapeRect();
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); bg.setSize(this.canvasWidth, this.canvasHeight);
bg.x = 0;
bg.y = 0;
bg.fillColor = this.data.skin == 'A' ? '#f7effc' : '#fcf8e9';
this.renderArr.push(btnLeft); this.renderArr.push(bg);
}
this.btnLeft = btnLeft;
initBottomPart() {
if (!this.data.listenAudioUrl) {
return;
}
const btnRight = new MySprite(); const listening = new Listening(this.audioObj['listenAudio'], this.images);
btnRight.init(this.images.get('btn_right')); listening.init(this.mapScale, this.mapScale);
btnRight.x = this.canvasWidth - 50 * this.mapScale;
btnRight.y = this.canvasHeight - 100 * this.mapScale;
btnRight.setScaleXY(this.mapScale);
this.renderArr.push(btnRight); listening.bg.x = this.canvasWidth - listening.bg.width - 10 * this.mapScale;
listening.bg.y = this.canvasHeight - listening.bg.height - 6.5 * this.mapScale;
this.listening = listening;
this.btnRight = btnRight; this.renderArr.push(listening.bg);
} }
initPic() { initTitle() {
const title = new Title(this.data.title, this.images);
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); title.init(this.mapScale, this.mapScale);
this.pic1 = pic1; title.audio = this.audioObj['titleAudio'];
this.title = title;
title.titleBg.y = 0;
title.titleBg.x = 0;
const label1 = new Label(); this.renderArr.push(title.titleBg);
label1.text = this.data.text; }
label1.textAlign = 'center';
label1.fontSize = 50;
label1.fontName = 'BRLNSDB';
label1.fontColor = '#ffffff';
pic1.addChild(label1);
initExercises() {
let h = 0;
let bgArr = [];
for (let i = 0; i < this.data.exercisesArr.length; ++i) {
let data = this.data.exercisesArr[i];
const pic2 = new MySprite(); let exercises;
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); if (this.data.skin === 'A') {
this.pic2 = pic2; exercises = new EexercisesA();
exercises.titleColor = "#5f1782";
}
else {
exercises = new EexercisesB();
exercises.titleColor = "#875f00";
}
this.curPic = pic1; exercises.init(data, this.images, this.mapScale, this.mapScale);
}
h = exercises.bg.height;
btnLeftClicked() { this.exercisesArr.push(exercises);
this.lastPage(); this.renderArr.push(exercises.bg);
}
btnRightClicked() { bgArr.push(exercises.bg);
}
this.nextPage(); //进行排版操作
typesetting(bgArr, 3, this.canvasWidth, this.canvasHeight, h, 14 * this.mapScale, 78 * this.mapScale);
} }
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() { mapDown(event) {
if (this.curPic == this.pic2) { if (!this.canTouch) {
return; return;
} }
this.canTouch = false; if (this.listening && this.checkClickTarget(this.listening.bg)) {
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);
}
let tempAudio = this.curAudio;
if (tempAudio) {
tempAudio.pause();
}
mapDown(event) { this.curAudio = this.listening.play(() => {
this.listening.reset();
});
if (!this.canTouch) {
return; return;
} }
if ( this.checkClickTarget(this.btnLeft) ) { if (this.checkClickTarget(this.title.titleBg)) {
this.btnLeftClicked(); this.pauseAudio(this.curAudio);
let audio = this.title.playAudio();
if (audio) {
this.curAudio = audio;
}
return; return;
} }
if ( this.checkClickTarget(this.btnRight) ) { let clicked = false;
this.btnRightClicked();
return;
}
if ( this.checkClickTarget(this.pic1) ) { let target;
this.pic1Clicked();
return; let callback;
for (let i = 0; i < this.exercisesArr.length; ++i) {
let exer = this.exercisesArr[i];
if (this.checkClickTarget(exer.bg)) {
callback = this.clickExercises.bind(this);
clicked = true;
target = exer;
break;
}
} }
if ( this.checkClickTarget(this.pic2) ) { if (clicked) {
this.pic2Clicked(); callback(target);
return; return;
} }
} }
mapMove(event) { mapMove(event) {
...@@ -687,4 +758,34 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -687,4 +758,34 @@ export class PlayComponent implements OnInit, OnDestroy {
clickExercises(item) {
if (this.checkClickTarget(item.titleBg)) {
this.playAudio(item.data.audioUrl, true);
return;
}
for (let i = 0; i < item.wordArr.length; ++i) {
let word = item.wordArr[i];
if(this.checkClickTarget(word.textBg)){
if(word.data.isFill == '1'){
if(word.alpha == 0){
word.alpha = 1;
word.underLine.alpha = 0;
}
else{
this.playAudio(word.data.audioUrl, true);
}
}
else{
this.playAudio(word.data.audioUrl, true);
}
break;
}
}
}
} }
const res = [ const res = [
// ['bg', "assets/play/bg.jpg"], ['play', "assets/play/play.png"],
['btn_left', "assets/play/btn_left.png"], ['stop', "assets/play/stop.png"],
['btn_right', "assets/play/btn_right.png"], ['card', "assets/play/default/card.png"],
// ['text_bg', "assets/play/text_bg.png"], ['title', "assets/play/default/title.png"],
['title_a', "assets/play/title_a.png"],
['card_a', "assets/play/card_a.png"],
['title_b', "assets/play/title_b.png"],
['card_b', "assets/play/card_b.png"],
]; ];
......
This source diff could not be displayed because it is too large. You can view the blob instead.
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