Commit b5012225 authored by hw_023_test's avatar hw_023_test

confirm

parent 6968ff34
......@@ -43,6 +43,7 @@
(audioUploaded) = "onAudioUploadSuccessByItem($event,word)"
class="item"
></app-audio-recorder>
<button style="margin-bottom: 10px;" nz-button nzType="danger" (click)="deleteItemWord(it,word)">删除单词和音频</button>
</div>
<button nz-button nzType="primary" class="add-word-btn" (click)="addWord(it)">添加单词</button>
</div>
......
......@@ -65,6 +65,9 @@
margin-right: 10px;
}
}
button{
margin-left: 10px;
}
.add-word-btn{
width: 100%;
}
......
......@@ -18,6 +18,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存对象
_item: any;
KEY = 'test_0011';
wordArr = [];
......@@ -143,6 +144,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
deleteItem(data) {
const index = this.picArr.indexOf(data);
console.log(this.picArr);
console.log(index);
if (index !== -1) {
this.picArr.splice(index, 1);
}
......@@ -151,6 +154,30 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.save();
}
deleteItemWord(picdata,wordData) {
const pindex = this.picArr.indexOf(picdata);
// console.log('data',picdata,index);
const wordList = this.picArr[pindex].wordArr;
// console.log('s',wordList);
const windex = wordList.indexOf(wordData);
console.log('id',windex);
if ( pindex !== -1) {
// const this.picArr[pindex].wordArr[windex].splice(windex,1);
this.picArr[pindex].wordArr.splice(windex,1);
// const pic = this.picArr[pindex].wordArr;
// const word = pic[windex];
// console.log('word',word);
}
// const a = this.item.contentObj
// console.log(this.picArr);
// console.log(index);
// if (index !== -1) {
// this.wordArr.splice(index, 1);
// }
console.log('a');
// this.update.emit(this.item);
this.save();
}
......
......@@ -37,6 +37,8 @@ export class PlayComponent implements OnInit, OnDestroy {
soundID: number;
wordList: any[];
optionRectArrBak: any[];
wordArrBg = [];
wordBgList: any;
@Input()
set data(data) {
......@@ -112,6 +114,7 @@ export class PlayComponent implements OnInit, OnDestroy {
particleLayer;
showPetalFlag;
itemW = 140;
spotW = 70;
itemH = 75;
topRect;
optionRect;
......@@ -531,13 +534,24 @@ export class PlayComponent implements OnInit, OnDestroy {
* 添加默认数据 便于无数据时的展示
*/
initDefaultData() {
let contentObj = this.data.contentObj;
let picArr = this.data.contentObj.picArr;
if (!picArr || picArr.length <= 0) {
if (!picArr || picArr.length == 0) {
picArr = [{
audio_url : 'assets/play/default/audio.mp3',
pic_url: 'assets/play/default/pic.jpg',
wordArr: [
{text: 'one', id: '0'},
{text: 'aaa', id: '1'},
{text: 'three', id: '2'},
],
}];
this.data.contentObj.picArr = picArr;
// this.initBaseBg();
}
console.log('picArr',picArr);
console.log('contentObj', contentObj);
}
/**
......@@ -545,6 +559,7 @@ export class PlayComponent implements OnInit, OnDestroy {
*/
initImg() {
const contentObj = this.data.contentObj;
if (!contentObj) {return;}
if (contentObj) {
const picArr = this.data.contentObj.picArr;
if (picArr) {
......@@ -624,6 +639,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.data.contentObj.picArr = [];
}
this.picArr = this.data.contentObj.picArr;
if (!this.picArr) {return};
this.picArr.forEach(ele => {
for (let i = 0; i < ele.wordArr.length; i++) {
ele.wordArr[i].id = i;
......@@ -636,6 +652,7 @@ export class PlayComponent implements OnInit, OnDestroy {
* 初始化试图
*/
initView() {
this.initBg();
this.initTitle();
this.initCard();
......@@ -646,6 +663,22 @@ export class PlayComponent implements OnInit, OnDestroy {
this.isHideCheck();
this.typeA[0]['isHide'] = false;
this.typeA[0].alpha = 1;
console.log('wordArr',this.wordArr);
console.log('wordArrBg',this.wordArrBg);
}
initBaseBg() {
this.bgArr = [];
const bg = new MySprite();
bg.init(this.images.get('Rectangle@2x'));
bg.x = this.canvasWidth / 2;
bg.y = this.canvasHeight / 2;
const sx = this.canvasWidth / bg.width;
const sy = this.canvasHeight / bg.height;
const s = Math.max(sx, sy);
bg.setScaleXY(1);
this.renderArr.push(bg);
}
/**
......@@ -673,6 +706,17 @@ export class PlayComponent implements OnInit, OnDestroy {
}
initTitle() {
// test
const bgRect = new ShapeRect();
bgRect.setSize(57, 65);
bgRect.fillColor = '#FFF';
const asx = this.canvasWidth / this.canvasBaseW;
const asy = this.canvasHeight / this.canvasBaseH;
bgRect.setScaleXY(asx);
bgRect.x = 65 * asx;
this.renderArr.push(bgRect);
const titleBox = new ShapeRect();
titleBox.init();
titleBox.fillColor = '#ffffff';
......@@ -680,23 +724,34 @@ export class PlayComponent implements OnInit, OnDestroy {
this.renderArr.push(titleBox);
titleBox.alpha = 0;
const panel = new MySprite();
panel.init(this.images.get('Rectangle_3@2x'));
panel.setScaleXY(this.mapScale * .5);
panel.x = 80 * this.mapScale;
panel.y = 30 * this.mapScale;
const panel = new ShapeRect();
panel.fillColor = '#AB5B22';
panel.setSize(57, 65);
panel.setScaleXY(asx);
// panel.init(this.images.get('Rectangle_3@2x'));
// panel.setScaleXY(this.mapScale * .5);
panel.x = 65 * asx;
panel.y = 0;
this.renderArr.push(panel);
titleBox.addChild(panel);
const richText1 = new Label();
const richText1 = new RichText();
richText1.disH = 15;
richText1.text = 'C';
richText1.x = panel.width / 2 - 24;
richText1.y = -25;
// richText1.width = panel.width;
richText1.fontName = 'BRLNSDB';
richText1.textAlign = 'center';
richText1.fontSize = 90 * this.mapScale;
richText1.fontColor = '#ffffff';
richText1.fontWeight = 300 * this.mapScale;
// rit
// richText1.textAlign = 'center';
// richText1.fontSize = 40;
richText1.fontColor = '#F7CB47';
// richText1.x = 35 * asx;
// richText1.fontWeight = 300 * this.mapScale;
panel.addChild(richText1);
const richText2 = new Label();
const sx = this.canvasWidth / richText2.width;
const sy = this.canvasHeight / richText2.height;
......@@ -705,97 +760,140 @@ export class PlayComponent implements OnInit, OnDestroy {
richText2.setScaleXY(s);
richText2.text = this.data.contentObj.question_text;
richText2.fontName = 'BRLNSDB';
richText2.fontSize = 40 * this.mapScale;
richText2.fontSize = 50 * this.mapScale;
richText2.fontColor = '#000000';
richText2.fontWeight = 300;
richText2.textAlign = 'left';
richText2.x = 130 * this.mapScale;
richText2.x = 150 * this.mapScale;
richText2.y = 30 * this.mapScale;
this.renderArr.push(richText2);
this.question = titleBox;
titleBox.addChild(richText2);
// titleBox.addChild(richText2);
}
initCard() {
this.createCard();
}
createCard() {
const topH = 60 * this.mapScale;
const bottomH = 220 * this.mapScale;
const maxH = this.canvasHeight - topH - bottomH;
const maxW = this.canvasWidth * 0.9;
const card = new MySprite(this.ctx);
card.setScaleXY(this.mapScale);
card.anchorY = 1;
let targetY = this.canvasHeight - bottomH;
if (this.canvasHeight - bottomH > card.height * card.scaleY) {
targetY = card.height * card.scaleY;
}
card.x = this.canvasWidth / 2;
card.y = this.canvasHeight / 2 - 100 * this.mapScale;
card.setScaleXY(.5 * this.mapScale);
this.addPic(card);
this.renderArr.push(card);
}
addPic(card) {
this.typeA = [];
for (let i = 0; i < this.picArr.length; i++) {
const topH = 60 * this.mapScale;
const bottomH = 250 * this.mapScale;
const maxH = this.canvasHeight - topH - bottomH;
const maxW = this.canvasWidth * 0.9;
const curData = this.picArr[i];
const pic = new MySprite(this.ctx);
pic.init(this.images.get(curData.pic_url));
pic['type'] = 'A';
pic['isHide'] = true;
this.typeA.push(pic);
card.addChild(pic);
}
}
const panel = new MySprite();
panel.init(this.images.get(curData.pic_url));
// panel.setScaleXY(this.mapScale);
// panel.anchorY = 1;
let targetY = this.canvasHeight - bottomH;
if (this.canvasHeight - bottomH > panel.height * panel.scaleY) {
targetY = panel.height * panel.scaleY;
}
const edge = 20 * this.mapScale;
const sx = (maxW - edge * 2) / panel.width;
const sy = (maxH - edge * 2) / panel.height;
const s = Math.min(sx, sy);
panel.setScaleXY(s);
const qBg = new ShapeRect();
qBg.init();
qBg.fillColor = '#ffffff';
qBg.setSize((panel.width) * panel.scaleX + edge * 2, (panel.height) * panel.scaleY + edge * 2);
qBg.x = this.canvasWidth / 2;
qBg.y = topH + qBg.height / 2;
qBg.setShadow(0, 10 * this.mapScale, 12 * this.mapScale, 'rgba(0, 0, 0, 0.4)');
this.renderArr.push(qBg);
qBg.addChild(panel);
qBg.alpha = 0;
// panel.x = this.canvasWidth / 2;
// panel.y = targetY;
// this.renderArr.push(panel);
panel['type'] = 'A';
panel['isHide'] = true;
this.typeA.push(panel);
}
// this.createCard();
}
// createCard() {
// const topH = 380 * this.mapScale;
// const bottomH = 220 * this.mapScale;
// const maxH = this.canvasHeight - topH - bottomH;
// const maxW = this.canvasWidth * 0.9;
// const card = new ShapeRect(this.ctx);
// let targetY = this.canvasHeight - bottomH;
// if (this.canvasHeight - bottomH > card.height * card.scaleY) {
// targetY = card.height * card.scaleY;
// }
// card.x = this.canvasWidth / 2;
// card.y = this.canvasHeight / 2;
// card.color = "#FFF";
// this.addPic(card);
// this.renderArr.push(card);
// }
// addPic(card) {
// this.typeA = [];
// for (let i = 0; i < this.picArr.length; i++) {
// const curData = this.picArr[i];
// const pic = new MySprite(this.ctx);
// pic.init(this.images.get(curData.pic_url));
// console.log('hight',pic.height);
// pic['type'] = 'A';
// pic['isHide'] = true;
// this.typeA.push(pic);
// card.addChild(pic);
// }
// }
initSpot() {
this.spotList = [];
const picArr = this.data.contentObj.picArr;
if (!picArr) { return; }
const arr = this.picArr;
let itemW = this.itemW;
let spotW = this.spotW + 7;
let disW = 10;
let totalW = 0;
let stotalW = 0;
if (arr.length <= 8) {
totalW = (itemW + disW) * this.picArr.length;
// totalW = itemW * arr.length + disW * (arr.length - 1);
stotalW = spotW * arr.length + disW * (arr.length - 1);
} else {
totalW = (itemW + disW) * 8;
itemW = totalW / this.picArr.length / 15 * 14;
// totalW = (itemW + disW) * 8;
stotalW = (spotW + disW) * 8;
spotW = stotalW / this.wordList.length / 15 * 14;
}
disW = itemW / 14;
totalW *= this.mapScale;
itemW *= this.mapScale;
disW = spotW / 14;
stotalW *= this.mapScale;
spotW *= this.mapScale;
disW *= this.mapScale;
const itemH = itemW / this.itemW * this.itemH;
const offX = this.canvasWidth / 2 - totalW / 2 + (itemW + disW) / 2;
// const itemH = itemW / this.itemW * this.itemH;
const offX = this.canvasWidth / 2 - stotalW / 2 + (spotW + disW) / 2;
const disH = 100 * this.mapScale;
const offY = this.canvasHeight - (disH) * 3 + itemH / 2;
// const offY = this.canvasHeight - (disH) * 2 + itemH / 2;
this.disW = disW;
const bottomH = 220 * this.mapScale;
let targetY = this.canvasHeight - bottomH;
for (let i = 0; i < picArr.length; i++) {
const baseX = offX + i * (spotW + disW);
const spot = new ShapeCircle(this.ctx);
if (this.canvasHeight - bottomH > spot.height * spot.scaleY) {
targetY = spot.height * spot.scaleY;
}
spot.init();
spot.setScaleXY(this.mapScale * 0.6);
spot.x = offX + i * (itemW + disW);
spot.y = offY;
spot.x = baseX;
// spot.y = offY + 45 * this.mapScale;
spot.y = this.canvasHeight - 230 * this.mapScale;
spot['isChange'] = false;
spot.fillColor = '#832F27';
spot.setRadius(40);
this.renderArr.push(spot);
this.space += 120;
// this.space += 120;
const richText3 = new Label();
richText3.text = (i + 1).toString();
......@@ -870,11 +968,16 @@ export class PlayComponent implements OnInit, OnDestroy {
for ( let i = 0; i < this.picArr.length; i++ ) {
this.wordArr.push(this.picArr[i].wordArr);
this.wordArrBg.push(this.picArr[i].wordArr);
}
for (let j = 0; j < this.wordArr.length; j++) {
this.wordList = randomSortByArr(this.wordArr[j]);
this.wordBgList = this.wordArrBg[j];
const arr = this.wordList;
const arrBg = this.wordBgList;
console.log('arr', arr);
console.log('arrBg', arrBg);
let itemW = this.itemW + 7;
let disW = 10;
let totalW = 0;
......@@ -900,13 +1003,14 @@ export class PlayComponent implements OnInit, OnDestroy {
for (let k = 0; k < arr.length; k++) {
const baseX = offX + k * (itemW + disW);
const data = arr[k];
const dataBg = arrBg[k];
const optionRect = new ShapeRect();
optionRect.init();
optionRect.fillColor = '#ffffff';
optionRect.setSize(itemW, itemH);
optionRect.setShadow(0, 5, 10);
optionRect.x = baseX;
optionRect.y = this.canvasHeight - 45 * this.mapScale;
optionRect.y = this.canvasHeight - 55 * this.mapScale;
optionRect['id'] = data.id;
optionRect['data'] = data;
optionRect['baseX'] = optionRect.x;
......@@ -921,9 +1025,10 @@ export class PlayComponent implements OnInit, OnDestroy {
optionRect.setSize(itemW, itemH);
optionBg.setScaleXY(this.mapScale * .5);
optionBg.x = optionRect.x;
optionBg.y = this.canvasHeight - 130 * this.mapScale;
optionBg.y = this.canvasHeight - 150 * this.mapScale;
optionBg['id'] = k;
optionBg['num'] = j;
optionBg['data'] = dataBg;
this.renderArr.push(optionBg);
const label = new Label();
......@@ -959,6 +1064,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.typeC.push(optionBg);
}
}
}
getArr(num) {
......@@ -1091,6 +1197,7 @@ export class PlayComponent implements OnInit, OnDestroy {
soundBegin(i) {
const curData = this.picArr[i];
if (!curData.audio_url) { return; }
const audioLink = curData.audio_url;
this.audioPlayer.src = audioLink;
this.audioPlayer.load();
......@@ -1118,8 +1225,8 @@ export class PlayComponent implements OnInit, OnDestroy {
const soundClose = new MySprite();
soundClose.init(this.images.get('Sound_Close_Btn@2x'));
soundClose.x = this.canvasWidth - 70 * this.mapScale;
soundClose.y = this.canvasHeight - 40 * this.mapScale;
soundClose.setScaleXY(this.mapScale * .6);
soundClose.y = this.canvasHeight - 50 * this.mapScale;
soundClose.setScaleXY(this.mapScale * .5);
this.renderArr.push(soundClose);
this.soundClose = soundClose;
......@@ -1128,7 +1235,7 @@ export class PlayComponent implements OnInit, OnDestroy {
soundOpen.setScaleXY(this.mapScale);
soundOpen.x = soundClose.x;
soundOpen.y = soundClose.y;
soundOpen.setScaleXY(this.mapScale * .6);
soundOpen.setScaleXY(this.mapScale * .5);
this.renderArr.push(soundOpen);
this.soundOpen = soundOpen;
soundClose.visible = false;
......@@ -1301,7 +1408,14 @@ export class PlayComponent implements OnInit, OnDestroy {
}
checkOptionTargetRight(optionTarget) {
if (this.curOptionRect.id == optionTarget.id) {
console.log('curOptionRect',this.curOptionRect);
console.log('optionTarget',optionTarget);
console.log('curOptionRect.text',this.curOptionRect.data['text']);
// console.log('optionTarget.text',optionTarget.data['text']);
console.log('curOptionRect.id',this.curOptionRect.id);
console.log('optionTarget.id',optionTarget.id);
// || this.curOptionRect.data['text'] == optionTarget.data['text']
if (this.curOptionRect.id == optionTarget.id || this.curOptionRect.data['text'] == optionTarget.data['text']) {
this.putOption(this.curOptionRect, optionTarget);
} else {
const wrongLink: any = this.rawAudios.get('wrong');
......
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