Commit 35300e0c authored by Chen Jiping's avatar Chen Jiping

perf:完成模板开发

parent 00dd4eef
...@@ -186,6 +186,14 @@ ...@@ -186,6 +186,14 @@
</nz-input-number> </nz-input-number>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="{{j}}.audioUrl">序号音频</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder id="{{j}}.audioUrl" [audioUrl]="data.audioUrl"
(audioUploaded)="onAudioUploadSuccess($event, data, 'audioUrl')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="6">图片</nz-form-label> <nz-form-label [nzSpan]="6">图片</nz-form-label>
<nz-form-control [nzSpan]="6"> <nz-form-control [nzSpan]="6">
......
This diff is collapsed.
import { text } from '@fortawesome/fontawesome-svg-core';
import { start } from 'repl';
import { LetterBean } from '../bean/ExercisesBean';
import { Label, Label2, ShapeRectNew, ShapeRect, LineRect, MySprite, Line, LabelText, ShapeCircle } from './Unit';
export class Exercises {
data;
bg: ShapeRectNew;
indexLabel: Label;
indexBg1: MySprite;
images;
index: number;
answered: Boolean = false;
wordBgArr: Array<Word> = [];
shown = false;
init(images, data) {
this.images = images;
this.data = data;
let height = 248;
let width = 470;
const bg = new ShapeRectNew();
bg.alpha = 0;
bg.fillColor = "#000000";
bg.setSize(width, height, 0);
this.bg = bg;
const textBg = new ShapeRect();
textBg.setSize(width, 82);
textBg.alpha = 0;
textBg.x = 0;
textBg.y = bg.height - textBg.height;
bg.addChild(textBg);
const textBgPic = new MySprite();
textBgPic.init(this.images.get('content_bg'));
textBgPic.x = bg.width / 2;
textBgPic.y = textBg.height / 2;
textBg.addChild(textBgPic);
this.initIndex(textBg);
//初始化单词
this.initContent(textBg);
//初始化图片
this.initPic();
this.answered = false;
}
private initIndex(parent: ShapeRect) {
const indexBg1 = new MySprite();
indexBg1.init(this.images.get('index_bg'));
indexBg1.x = 18 + indexBg1.width / 2;
indexBg1.y = parent.getBoundingBox().height / 2 - 4;
parent.addChild(indexBg1);
this.indexBg1 = indexBg1;
const indexLabel = new Label();
indexLabel.fontName = "FUTURAB";
indexLabel.fontSize = 36;
indexLabel.text = '' + this.index;
indexLabel.fontColor = "#567790";
indexLabel.alpha = 0;
indexLabel.refreshSize();
indexLabel.x = 18 + (50 - indexLabel.getBoundingBox().width) / 2;
indexLabel.y = parent.height / 2;
parent.addChild(indexLabel);
this.indexLabel = indexLabel;
}
private initPic() {
const pic = new MySprite();
pic.init(this.images.get(this.data.picUrl));
let w = pic.width;
let h = pic.height;
let scaleX = this.bg.width / w;
let scaleY = 150 / h;
let mapScale = Math.min(scaleX, scaleY);
//如果超过最大,则进行缩小
if (mapScale < 1) {
pic.setScaleXY(mapScale);
}
pic.x = this.bg.width / 2;
pic.y = 150 / 2;
console.log(pic.y);
this.bg.addChild(pic);
}
private initContent(parent: ShapeRect) {
const getLetterLabel = (letter) => {
const label = new Label();
label.fontName = "GOTHIC";
label.fontSize = 32;
label.text = letter.val;
if (letter.isFill == '1') {
label.fontColor = "#c8161e";
}
else {
label.fontColor = "#dcdddd";
}
label.refreshSize();
label.y = parent.height / 2;
return label;
}
const wordLabelArr = [];
let startX = 89;
for (let i = 0; i < this.data.wordArr.length; ++i) {
let word = this.data.wordArr[i];
let tX = startX;
let totalW = 0;
let tH = 0;
const wordObj = new Word();
for (let j = 0; j < word.letterArr.length; ++j) {
let letter = word.letterArr[j]
let label = getLetterLabel(letter);
parent.addChild(label);
let letterObj = new Letter();
letterObj.letter = label;
letterObj.isFill = letter.isFill;
wordObj.letterArr.push(letterObj);
let w = Math.ceil(label.getBoundingBox().width);
tH = Math.ceil(label.getBoundingBox().height);
let dw = 3;
//如果是填空,则增加下划线
if (letter.isFill == '1') {
startX += dw;
label.x = startX;
let underLine = new Line();
underLine.lineColor = "#858585";
underLine.lineWidth = 3;
underLine.y = label.y + label.getBoundingBox().height / 2;
underLine.x = startX;
underLine.setLine(w);
parent.addChild(underLine);
w += dw;
label.alpha = 0;
wordLabelArr.push(label);
}
else {
if (word.letterArr[j - 1] && word.letterArr[j - 1].isFill == '1') {
startX += dw;
}
label.x = startX;
}
startX += w;
totalW += w;
}
//不是末位,增加空格
if (i != this.data.wordArr.length - 1) {
let blank = new LetterBean();
blank.val = " ";
let label = getLetterLabel(blank);
wordLabelArr.push(label);
startX += label.getBoundingBox().width;
}
const wordBg = new ShapeRect();
wordBg.alpha = 0;
wordBg.setSize(totalW, tH);
wordBg.x = tX;
wordBg.y = (parent.height - tH) / 2;
wordObj.bg = wordBg
this.wordBgArr.push(wordObj);
parent.addChild(wordBg);
}
}
checkAnswer(answerIndex) {
if (this.data.answerIndex == answerIndex) {
this.indexLabel.alpha = 1;
this.answered = true;
return true;
}
return false;
}
showWord(index){
let word = this.wordBgArr[index];
if(!word){
return;
}
if(this.shown){
return;
}
for(let i =0; i < word.letterArr.length; ++ i){
word.letterArr[i].letter.alpha = 1;
}
let exsit = false;
for(let i = 0; i < this.wordBgArr.length; ++ i){
let tWord = this.wordBgArr[i];
for(let j =0; j < tWord.letterArr.length; ++ j){
if(tWord.letterArr[j].letter.alpha == 0){
exsit = true;
break;
}
}
//如果存在,则直接跳出
if(exsit){
break;
}
}
if(!exsit){
this.shown = true;
//处理单词显示
for(let i = 0; i < this.wordBgArr.length; ++ i){
let tWord = this.wordBgArr[i];
for(let j =0; j < tWord.letterArr.length; ++ j){
let letter = tWord.letterArr[j];
//修改字体颜色
if(letter.isFill == '0'){
letter.letter.fontColor = '#000000';
}
}
}
}
}
}
export class Word{
bg : ShapeRect;
letterArr : Array<Letter> = [];
}
export class Letter{
letter : Label;
isFill : String = '0';
}
\ No newline at end of file
import { MySprite } from './Unit';
interface AirWindow extends Window {
air: any;
curCtx: any;
}
declare let window: AirWindow;
export class Item {
/**图片集合 */
images;
audioObj;
_scaleX = 1;
_scaleY = 1;
ctx;
_width = 0;
_height = 0;
_x = 0;
_y = 0;
constructor(images, audioObj, scaleX = 1, scaleY = 1, ctx = null) {
this.images = images;
this.audioObj = audioObj;
this._scaleX = scaleX;
this._scaleY = scaleY;
if (!ctx) {
this.ctx = window.curCtx;
} else {
this.ctx = ctx;
}
}
set width(width){
this._width = width * this.scaleX;
}
get width(){
return this._width;
}
set height(height){
this._height = height * this.scaleY;
}
get height(){
return this._height;
}
set scaleX(v) {
this._scaleX = v;
}
get scaleX() {
return this._scaleX;
}
set scaleY(v) {
this._scaleY = v;
}
get scaleY() {
return this._scaleY;
}
set x(x){
this._x = x;
}
get x(){
return this._x;
}
set y(y){
this._y = y;
}
get y(){
return this._y;
}
getPic(picName, anchorX: number = 0.5, anchorY: number = 0.5) {
const pic = new MySprite();
pic.init(this.images.get(picName), anchorX, anchorY);
pic.scaleX = this.scaleX;
pic.scaleY = this.scaleY;
pic.x = 0;
pic.y = 0;
return pic;
}
checkClickTarget(target, mx: number, my: number) {
const rect = target.getBoundingBox();
if (this.checkPointInRect(mx, my, rect)) {
return true;
}
return false;
}
checkPointInRect(x, y, rect) {
if (x >= rect.x && x <= rect.x + rect.width) {
if (y >= rect.y && y <= rect.y + rect.height) {
return true;
}
}
return false;
}
}
\ 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 = "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
This diff is collapsed.
...@@ -17,3 +17,39 @@ ...@@ -17,3 +17,39 @@
src: url("../../assets/font/BRLNSDB.TTF") ; src: url("../../assets/font/BRLNSDB.TTF") ;
} }
@font-face
{
font-family: 'FUTURAB';
src: url("../../assets/font/FUTURAB.TTF") ;
}
@font-face
{
font-family: 'GOTHIC';
src: url("../../assets/font/GOTHIC.TTF") ;
}
@font-face
{
font-family: 'GOTHICB';
src: url("../../assets/font/GOTHICB.TTF") ;
}
@font-face
{
font-family: 'TCB';
src: url("../../assets/font/TCB.TTF") ;
}
@font-face
{
font-family: 'FUTURA';
src: url("../../assets/font/Futura.ttc") ;
}
@font-face
{
font-family: 'FuturaStd';
src: url("../../assets/font/FuturaStd-Medium.otf") ;
}
This diff is collapsed.
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"], ['index_bg', "assets/play/index_bg.png"],
// ['text_bg', "assets/play/text_bg.png"], ['content_bg', "assets/play/content_bg.png"],
]; ];
...@@ -12,7 +11,8 @@ const res = [ ...@@ -12,7 +11,8 @@ const res = [
const resAudio = [ const resAudio = [
['click', "assets/play/music/click.mp3"], ['click', "assets/play/music/click.mp3"],
['right', "assets/play/music/right.mp3"],
['page', "assets/play/music/page.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