Commit b5dadd1e authored by Chen Jiping's avatar Chen Jiping

feat:增加配置界面

parent 9f3a2900
......@@ -128,5 +128,8 @@
}
}
},
"defaultProject": "ng-template-generator"
}
"defaultProject": "ng-template-generator",
"cli": {
"analytics": "6538edac-ec62-413b-aeca-1ff86f787ac0"
}
}
\ No newline at end of file
import { Obj } from "./ObjBean";
export class ExercisesBean{
answerIndex;
answer : AnswerBean;
}
export function getDefaultExercises(){
let exercises = new ExercisesBean();
exercises.answer = new AnswerBean();
return exercises;
}
export class LetterBean extends Obj{
backgroud:String;
isFill = '0';
}
export function getDefaultLetter(){
let letter = new LetterBean();
return letter;
}
export class AnswerBean extends Obj{
letterArr = [];
}
\ No newline at end of file
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
This diff is collapsed.
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 { AnswerBean, getDefaultExercises, getDefaultLetter } from '../bean/Exercises';
import { getDefaultTile } from '../bean/TitleBean';
import { NzMessageService } from 'ng-zorro-antd/message'
@Component({
......@@ -10,12 +12,12 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用
saveKey = "test_0011";
saveKey = "YM5-3";
// 储存对象
item;
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) {
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef, private message: NzMessageService) {
}
......@@ -24,8 +26,16 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item = {};
this.item.title = getDefaultTile();
this.item.letterArr = [];
/**练习题区域 */
this.item.zoneArr = [];
// 获取存储的数据
(<any> window).courseware.getData((data) => {
(<any>window).courseware.getData((data) => {
if (data) {
this.item = data;
......@@ -51,36 +61,153 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() {
if (!this.item.backgroudColor) {
this.item.backgroudColor = "#ab82b8";
}
if (!this.item.title) {
this.item.title = getDefaultTile();
}
if (!this.item.letterArr) {
this.item.letterArr = [];
}
if (!this.item.zoneArr) {
this.item.zoneArr = [];
}
for (let i = this.item.zoneArr.length; i < 3; ++i) {
let zone = {
exercisesArr: []
};
this.item.zoneArr.push(zone);
}
for (let i = 0; i < this.item.zoneArr.length; ++i) {
let zone = this.item.zoneArr[i];
if (!zone) {
zone = {
exercisesArr: []
};
this.item.zoneArr[i] = zone;
}
for (let j = 0; j < zone.exercisesArr.length; ++j) {
if (!zone.exercisesArr[j]) {
zone.exercisesArr[j] = getDefaultExercises();
}
if (!zone.exercisesArr[j].answer) {
zone.exercisesArr[j].answer = new AnswerBean();
}
}
}
}
/**
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, key) {
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, item, key) {
this.item[key] = e.url;
this.save();
item[key] = e.url;
this.save();
}
/**
* 储存音频数据
* @param e
*/
onAudioUploadSuccess(e, key) {
onAudioUploadSuccess(e, item, key) {
item[key] = e.url;
this.save();
}
addLetterItem(item) {
let letter = getDefaultLetter();
item.letterArr.push(letter);
item.letterArr = [...item.letterArr];
this.item[key] = e.url;
this.save();
}
delLetter(item, index) {
if (index !== -1) {
item.letterArr.splice(index, 1);
item.letterArr = [...item.letterArr];
this.save();
}
}
addExercisesItem(item) {
let exercises = getDefaultExercises();
item.exercisesArr.push(exercises);
this.save();
}
delExercisesItem(item, index) {
if (index !== -1) {
item.exercisesArr.splice(index, 1);
item.exercisesArr = [...item.exercisesArr];
this.save();
}
}
saveIndex(item) {
console.log(item);
let canSave = true;
for (let i = 0; i < this.item.zoneArr.length; ++i) {
let zone = this.item.zoneArr[i];
for (let j = 0; j < zone.exercisesArr.length; ++j) {
let exercises = zone.exercisesArr[j];
if (item == exercises) {
continue;
}
else if (exercises.answerIndex == item.answerIndex) {
canSave = false;
break;
}
}
}
console.log(canSave);
if (canSave) {
this.save();
}
else {
let id = this.message.error('已经存在相同的顺序号', { nzDuration: 0 }).messageId;
setTimeout(() => {
this.message.remove(id);
}, 2500);
}
}
/**
* 储存数据
*/
save() {
(<any> window).courseware.setData(this.item, null, this.saveKey);
(<any>window).courseware.setData(this.item, null, this.saveKey);
this.refresh();
}
......
/**
*
* @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, MySprite, ShapeCircle, ShapeRect } from "./Unit";
export class Exercises {
data;
images;
indexBgColor;
index: number;
bg: ShapeRect;
answer1: ShapeRect;
answer2: ShapeRect;
scaleX = 1;
scaleY = 1;
answered: Boolean = false;
rightPic: MySprite;
init(images, indexBgColor, data, scaleX = 1, scaleY = 1) {
this.images = images;
this.data = data;
this.scaleX = scaleX;
this.scaleY = scaleY;
this.indexBgColor = indexBgColor;
this.initBg();
this.initIndex();
this.initAnswer();
}
initBg() {
let height = 48 * this.scaleY;
let width = 580 * this.scaleX;
const bg = new ShapeRect();
bg.setSize(width, height);
bg.alpha = 0;
this.bg = bg;
}
initIndex(){
let indexBg = new ShapeCircle();
indexBg.setRadius(23 * this.scaleX);
indexBg.fillColor = this.indexBgColor;
indexBg.x = indexBg.width / 2;
indexBg.y = this.bg.height / 2;
indexBg.alpha = 0.7;
this.bg.addChild(indexBg);
let index = new Label();
index.text = this.index + "";
index.textAlign = 'center';
index.fontSize = 36;
index.fontName = "TCB";
index.fontColor = "#ffffff";
index.setScaleXY(this.scaleX);
index.refreshSize();
index.x = 0;
index.y = 0;
indexBg.addChild(index);
}
initAnswer(){
let startX = 46 * this.scaleX + 7 * this.scaleX;
let answer1 = this.getAnswerView(this.data.answer1);
answer1.x = startX;
this.answer1 = answer1;
let answer2 = this.getAnswerView(this.data.answer2);
answer2.x = startX + 253 * this.scaleX;
this.answer2 = answer2;
const rightPic = new MySprite();
rightPic.init(this.images.get('circle'));
rightPic.setScaleXY(this.scaleX);
rightPic.alpha = 0;
rightPic.y = this.bg.height / 2;
this.rightPic = rightPic;
if(this.data.answerIndex == '1'){
rightPic.x = answer1.x + answer1.width / 2;
}
else if(this.data.answerIndex == '2'){
rightPic.x = answer2.x + answer2.width / 2;
}
this.bg.addChild(rightPic);
}
getAnswerView(answerData){
const getLabelText = (letter) => {
const text = new LabelText();
text.val = letter.val;
if (letter.isFill == '1') {
text.fontColor = "#c8161d";
}
else {
text.fontColor = "#000000";
}
text.underLine = false;
return text;
}
let labelTextArr = [];
for (let i = 0; i < answerData.letterArr.length; ++i) {
var letter = answerData.letterArr[i];
let label = getLabelText(letter);
labelTextArr.push(label);
}
const answer = new Label2();
answer.textArr = labelTextArr;
answer.fontSize = 48;
answer.fontName = "MMB";
answer.setScaleXY(this.scaleX);
answer.refreshSize();
const answerBg = new ShapeRect();
answerBg.alpha = 0;
answerBg.setSize(answer.getBoundingBox().width, answer.getBoundingBox().height);
answerBg.y = (this.bg.height - answerBg.height) / 2;
answer.y = answerBg.height / 2;
answer.x = 0;
answerBg.addChild(answer);
this.bg.addChild(answerBg);
return answerBg;
}
checkAnswer(answerIndex) {
if(this.data.answerIndex == answerIndex){
this.rightPic.alpha = 1;
this.answered = true;
return true;
}
return false;
}
}
\ No newline at end of file
import { Label, ShapeCircle } from "./Unit";
export class Letter{
data;
images;
bgColor;
scaleX = 1;
scaleY = 1;
bg : ShapeCircle;
init(images, data, bgColor, scaleX = 1, scaleY = 1) {
this.images = images;
this.data = data;
this.bgColor = bgColor;
this.scaleX = scaleX;
this.scaleY = scaleY;
this.initBg();
this.initView();
}
initBg(){
let radius = 52 * this.scaleX;
let bg = new ShapeCircle();
bg.setRadius(radius);
bg.fillColor = this.bgColor;
this.bg = bg;
}
initView(){
const letter = new Label();
letter.text = this.data.val;
letter.textAlign = 'center';
letter.fontSize = 64;
letter.fontName = "BRLNSDB";
letter.fontColor = "#ffffff";
letter.setScaleXY(this.scaleX);
letter.refreshSize();
letter.x = 0;
letter.y = 0;
this.bg.addChild(letter);
}
}
\ 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 = null){
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="#567790";
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 = "#ffffff";
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 = "FuturaStd";
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)
}
}
......@@ -709,6 +709,231 @@ export class Label extends MySprite {
}
export class LabelText {
private _val: string;
private _fontColor = "#000000";
private _underLine: boolean = false;
private _visiable = true;
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;
}
}
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;
let tempStartX = startX;
let dW = 0;
if (text.underLine && this.underLineWidth > 0) {
this.ctx.save();
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 {
textArr = [];
......
......@@ -17,3 +17,20 @@
src: url("../../assets/font/BRLNSDB.TTF") ;
}
@font-face
{
font-family: 'FuturaStd';
src: url("../../assets/font/FuturaStd-Medium.otf") ;
}
@font-face
{
font-family: 'TCB';
src: url("../../assets/font/TCB.TTF") ;
}
@font-face
{
font-family: 'MMB';
src: url("../../assets/font/MMTextBook-Bold.otf") ;
}
\ No newline at end of file
This diff is collapsed.
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"],
['play', "assets/play/play.png"],
['stop', "assets/play/stop.png"],
['circle', "assets/play/circle.png"],
];
......@@ -12,7 +10,7 @@ const res = [
const resAudio = [
['click', "assets/play/music/click.mp3"],
['right', "assets/play/music/right.mp3"],
];
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