Commit 40281eec authored by 李维's avatar 李维

dev commit

parent 13070a82
<div class="model-content"> <div class="model-content">
<div class="card-config"> <div class="card-config">
<div class="card-item clearfix" style="padding: 0.5vw; width: 100%;" >
<div class="card-item-content border" >
<div class="card-item-content">
<div class="title" >
题目素材
</div>
<div class="section" >
<div class="section-content">
<div style="display: flex; margin-bottom: 10px;">
<div style="float: left; text-align: right; margin-right: 10px; margin-left: 10px;">
<span>显示选项</span><span> :</span>
</div>
<div style="float: left; width: 300px;">
<nz-radio-group [(ngModel)]="contentObj.question.type" (ngModelChange)="handleQuestionTypeChange()" >
<label nz-radio [nzValue]="'Text'" >文字</label>
<label nz-radio [nzValue]="'Image'" >图片</label>
<label nz-radio [nzValue]="'LongAudio'">长音频</label>
</nz-radio-group>
</div>
<div style="float: left; width: 300px;">
<div *ngIf="contentObj.question.type=='Image'">
<app-upload-image-with-preview style="width: 100%;" [picUrl]="contentObj.question.image_url" (imageUploaded)="onImageUploadSuccessByItem($event, contentObj.question, 'image_url')"></app-upload-image-with-preview>
</div>
<div *ngIf="contentObj.question.type=='Text'">
<textarea type="text" nz-input placeholder="" [(ngModel)]="contentObj.question.text" (blur)="saveItem()" ></textarea>
</div>
<div *ngIf="contentObj.question.type=='LongAudio'">
<app-audio-recorder [audioUrl]="contentObj.question.longAudio_url" (audioUploaded)="onAudioUploadSuccessByItem($event, contentObj.question, 'longAudio_url')" ></app-audio-recorder>
</div>
</div>
</div>
</div>
</div>
<div class="section" >
<div class="section-content">
<div style="display: flex; margin-bottom: 10px;">
<div style="float: left; text-align: right; margin-right: 10px; margin-left: 10px;">
<span>卡片类型</span><span> :</span>
</div>
<div style="float: left; width: 300px;">
<nz-radio-group [(ngModel)]="contentObj.answerType" (ngModelChange)="saveItem()" >
<label nz-radio [nzValue]="'Text'">文字</label>
<label nz-radio [nzDisabled]="contentObj.question.type != 'LongAudio'" [nzValue]="'Image'">图片</label>
</nz-radio-group>
</div>
<div style="float: left; width: 300px;"> </div>
</div>
</div>
</div>
<div class="section" >
<div class="section-content">
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1; text-align: right; margin-right: 10px;">
<span>短音频</span><span> :</span>
</div>
<div style="flex:3">
<app-audio-recorder [audioUrl]="contentObj.question.shortAudio_url" (audioUploaded)="onAudioUploadSuccessByItem($event, contentObj.question, 'shortAudio_url')" ></app-audio-recorder>
</div>
<div style="flex:8"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngFor="let item of contentObj.dataArray; let i = index" class="card-item" style="padding: 0.5vw; " > <div *ngFor="let item of contentObj.dataArray; let i = index" class="card-item" style="padding: 0.5vw; " >
<div class="card-item-content border"> <div class="card-item-content border">
<div class="card-item-content"> <div class="card-item-content">
...@@ -9,7 +86,7 @@ ...@@ -9,7 +86,7 @@
<div class="section" > <div class="section" >
<div class="section-content"> <div class="section-content">
<div style="flex:1"> <div *ngIf="contentObj.answerType=='Text'" style="flex:1">
<div style="display: flex; margin-bottom: 10px;"> <div style="display: flex; margin-bottom: 10px;">
<div style="flex:1"> <div style="flex:1">
文字 文字
...@@ -20,7 +97,7 @@ ...@@ -20,7 +97,7 @@
</div> </div>
</div> </div>
<div style="flex:1" > <div *ngIf="contentObj.answerType=='Image'" style="flex:1" >
<div style="display: flex; "> <div style="display: flex; ">
<div style="flex:1"> <div style="flex:1">
图片 图片
......
...@@ -53,3 +53,9 @@ ...@@ -53,3 +53,9 @@
} }
} }
} }
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
\ No newline at end of file
...@@ -11,7 +11,7 @@ import defauleFormData from '../../assets/play/default/formData/defaultData.js' ...@@ -11,7 +11,7 @@ import defauleFormData from '../../assets/play/default/formData/defaultData.js'
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
_item: any; _item: any;
KEY = 'DataKey_PU08'; KEY = 'DataKey_PU01';
checkOptionsOne = [] checkOptionsOne = []
set item(item) { set item(item) {
...@@ -23,9 +23,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -23,9 +23,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
contentObj = { contentObj = {
"version": "1.0", "version": "1.0",
key: "DataKey_PU01", key: "DataKey_PU01",
dataArray: [ question: {
{ text: "", image_url: "" } type: "Image"
] },
answerType: "Text",
dataArray: []
} }
@Output() @Output()
...@@ -34,6 +36,28 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -34,6 +36,28 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
handleQuestionTypeChange(){
if(this.contentObj.question.type != 'LongAudio'){
this.contentObj.answerType='Text'
}
this.saveItem()
}
ngOnInit() { ngOnInit() {
this.item = {}; this.item = {};
this.item.contentObj = {}; this.item.contentObj = {};
...@@ -113,7 +137,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -113,7 +137,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
onImageUploadSuccessByItem(e, item, key) { onImageUploadSuccessByItem(e, item, key) {
item[key].image_url = e.url item[key] = e.url
this.save(); this.save();
} }
......
...@@ -14,6 +14,7 @@ import { ...@@ -14,6 +14,7 @@ import {
ShapeCircle, ShapeCircle,
MyAnimation MyAnimation
} from "./Unit"; } from "./Unit";
import { matchesElement } from '@angular/animations/browser/src/render/shared';
export class Cartoon { export class Cartoon {
...@@ -410,7 +411,7 @@ export class Cartoon { ...@@ -410,7 +411,7 @@ export class Cartoon {
createAnimation(imageKey, length, runTime, endCallback?, order?:boolean) { createAnimation(imageKey, length, runTime, endCallback?, order?:boolean) {
let element = new MyAnimation() let element = new MyAnimation()
element.id = "ANI-" + imageKey element.id = "ANI-" + imageKey + "-" + Math.floor(Math.random()*10000)
if(order){ if(order){
for (let index = length; index > 0; index--) { for (let index = length; index > 0; index--) {
element.addFrameByImg(this.images.get(`${imageKey} (${index})`)) element.addFrameByImg(this.images.get(`${imageKey} (${index})`))
......
...@@ -31,7 +31,8 @@ import { ...@@ -31,7 +31,8 @@ import {
waterWave, waterWave,
jelly, jelly,
getAngleByPos, getAngleByPos,
getPosDistance getPosDistance,
shake
} from "./Unit"; } from "./Unit";
import { localImages, localAudios } from "./resources"; import { localImages, localAudios } from "./resources";
...@@ -52,7 +53,8 @@ const zIndexMap = { ...@@ -52,7 +53,8 @@ const zIndexMap = {
questionKuang: 50, questionKuang: 50,
imageContainer: 20, imageContainer: 20,
shortAudio: 60, shortAudio: 60,
progressBar: 55 progressBar: 55,
animation:200
} }
@Component({ @Component({
...@@ -123,7 +125,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -123,7 +125,8 @@ export class PlayComponent implements OnInit, OnDestroy {
m_answerCard_All = [] m_answerCard_All = []
m_questionCard_All = [] m_questionCard_All = []
m_enableCardMove = false; m_enableCardMove = false;
m_currentSelectedCardID = null m_currentSelectedCardID = null;
m_startGame = true
// ------------------------------------ // ------------------------------------
...@@ -165,12 +168,21 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -165,12 +168,21 @@ export class PlayComponent implements OnInit, OnDestroy {
this.g_formData.dataArray.forEach(element => { this.g_formData.dataArray.forEach(element => {
array.push(element.image_url) array.push(element.image_url)
}); });
if(this.g_formData.question.image_url){
array.push(this.g_formData.question.image_url)
}
return array return array
} }
// 映射预加载音频[网路]资源 返回包含音频路径的数组 // 映射预加载音频[网路]资源 返回包含音频路径的数组
mapToAduioArray(contentObj){ mapToAduioArray(contentObj){
let array = [] let array = []
if(this.g_formData.question.longAudio_url){
array.push(this.g_formData.question.longAudio_url)
}
if(this.g_formData.question.shortAudio_url){
array.push(this.g_formData.question.shortAudio_url)
}
return array return array
} }
...@@ -207,6 +219,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -207,6 +219,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.m_enableCardMove = false; this.m_enableCardMove = false;
this.m_answerCard_All = [] this.m_answerCard_All = []
this.m_questionCard_All = [] this.m_questionCard_All = []
this.m_startGame = true;
} }
startGame(){ startGame(){
...@@ -219,7 +232,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -219,7 +232,9 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
endGame(){ endGame(){
alert("End")
this.showEndPatal()
this.m_startGame = false;
} }
initBackground(){ initBackground(){
...@@ -270,16 +285,18 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -270,16 +285,18 @@ export class PlayComponent implements OnInit, OnDestroy {
this.g_formData.dataArray.forEach((element, index) => { this.g_formData.dataArray.forEach((element, index) => {
this.m_questionCard_All.push(this.createQuestionCardText(index, element)) this.m_questionCard_All.push(this.createQuestionCardText(index, element))
}); });
this.m_questionCard_All = this.randomArray_shuffle(this.m_questionCard_All)
this.alignCenter(this.m_questionCard_All, 20*this.g_mapScale, true) this.alignCenter(this.m_questionCard_All, 20*this.g_mapScale, true)
} }
createQuestionCardText(index, text){ createQuestionCardText(index, text){
let element = this.g_cartoon.createCartoonElementLabel("questioncard-text-"+index, " " + text + " ","BRLNSDB", "#FFFFFF", 60 * this.g_mapScale, 0, this.g_cartoon.getOrigin().y + 720 * this.g_mapScale - 250 * this.g_mapScale) let element = this.g_cartoon.createCartoonElementLabel("questioncard-text-"+index, " " + text + " ","BRLNSDB", "#FFFFFF", 65 * this.g_mapScale, 0, this.g_cartoon.getOrigin().y + 720 * this.g_mapScale - 250 * this.g_mapScale)
let imageBD = element.ref.getBoundingBox() let imageBD = element.ref.getBoundingBox()
let cardHeight = 127 let cardHeight = 127
element.index = index;
// 边框 // 边框
let borderLeft = this.g_cartoon.createCartoonElementImageFunc("questioncard-text-border-left-"+index, "image_border_left", (w, h)=>{ let borderLeft = this.g_cartoon.createCartoonElementImageFunc("questioncard-text-border-left-"+index, "image_border_left", (w, h)=>{
return{ return{
...@@ -360,10 +377,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -360,10 +377,10 @@ export class PlayComponent implements OnInit, OnDestroy {
}) })
element.ref.addChild(borderRight_H.ref) element.ref.addChild(borderRight_H.ref)
let text_copy = this.g_cartoon.createCartoonElementLabel("questioncard-text-"+index+"-copy", text,"BRLNSDB", "#d94158", 60 * this.g_mapScale, 0, 0) element.text_copy = this.g_cartoon.createCartoonElementLabel("questioncard-text-"+index+"-copy", text,"BRLNSDB", "#d94158", 65 * this.g_mapScale, 0, 0)
let text_copy_shadow = this.g_cartoon.createCartoonElementLabel("questioncard-text-"+index+"-copy", text,"BRLNSDB", "#fdf0cd", 60 * this.g_mapScale, 0, 5) element.text_copy_shadow = this.g_cartoon.createCartoonElementLabel("questioncard-text-"+index+"-copy", text,"BRLNSDB", "#fdf0cd", 65 * this.g_mapScale, 0, 5)
element.ref.addChild(text_copy_shadow.ref) element.ref.addChild(element.text_copy_shadow.ref)
element.ref.addChild(text_copy.ref) element.ref.addChild(element.text_copy.ref)
border_H.ref.visible = false; border_H.ref.visible = false;
borderRight_H.ref.visible = false; borderRight_H.ref.visible = false;
...@@ -453,6 +470,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -453,6 +470,7 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
}) })
let imageBD = element.ref.getBoundingBox() let imageBD = element.ref.getBoundingBox()
element.index = index;
// 边框 // 边框
let border = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-"+index, "image_center", (w, h)=>{ let border = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-"+index, "image_center", (w, h)=>{
...@@ -494,7 +512,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -494,7 +512,6 @@ export class PlayComponent implements OnInit, OnDestroy {
}) })
element.ref.addChild(borderRight.ref) element.ref.addChild(borderRight.ref)
// 高亮边框 // 高亮边框
let border_H = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-h-"+index, "border_center", (w, h)=>{ let border_H = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-h-"+index, "border_center", (w, h)=>{
return{ return{
...@@ -601,11 +618,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -601,11 +618,9 @@ export class PlayComponent implements OnInit, OnDestroy {
// 答案卡片 文字 // 答案卡片 文字
initAnsterCard_Text(){ initAnsterCard_Text(){
this.m_answerCard_All.push(this.createAnswerCardText(0, {})) this.g_formData.dataArray.forEach((element, index) => {
this.m_answerCard_All.push(this.createAnswerCardText(1, {})) this.m_answerCard_All.push(this.createAnswerCardText(index, element))
this.m_answerCard_All.push(this.createAnswerCardText(2, {})) });
this.m_answerCard_All.push(this.createAnswerCardText(3, {}))
this.alignCenter(this.m_answerCard_All, 10*this.g_mapScale, true) this.alignCenter(this.m_answerCard_All, 10*this.g_mapScale, true)
} }
...@@ -621,24 +636,71 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -621,24 +636,71 @@ export class PlayComponent implements OnInit, OnDestroy {
y: this.g_cartoon.getOrigin().y + 720 * this.g_mapScale - 110 * this.g_mapScale y: this.g_cartoon.getOrigin().y + 720 * this.g_mapScale - 110 * this.g_mapScale
} }
}) })
element.index = index;
element.shake = (callback?)=>{
rotateItem(element.ref, 10, 0.1, ()=>{
rotateItem(element.ref, -10, 0.2, ()=>{
rotateItem(element.ref, 10, 0.2, ()=>{
rotateItem(element.ref, 0, 0.1, ()=>{
callback && callback()
})
})
})
})
}
element.star = (callback?)=>{
element.starAni = this.g_cartoon.createAnimation("icon_star", 5, 300, ()=>{
element.starAni.visible = false;
this.deleteElementInRender(element.starAni.id)
callback && callback()
})
element.starAni.setScaleXY(1)
element.starAni.x = element.ref.x
element.starAni.y = element.ref.y
this.render(element.starAni, zIndexMap.animation)
element.starAni.play()
}
this.subscribeMapUpEvent(element.id, ()=>{ this.subscribeMapUpEvent(element.id, ()=>{
if(this.m_currentSelectedCardID && this.m_enableCardMove){ if(this.m_currentSelectedCardID && this.m_enableCardMove){
let selectedCard = this.g_cartoon.getCartoonElement(this.m_currentSelectedCardID) let selectedCard = this.g_cartoon.getCartoonElement(this.m_currentSelectedCardID)
if(selectedCard.index == element.index){
selectedCard.ref.x = element.ref.x selectedCard.ref.x = element.ref.x
selectedCard.ref.y = element.ref.y selectedCard.ref.y = element.ref.y
selectedCard.release({x:element.ref.x, y:element.ref.y - 10 * this.g_mapScale}, ()=>{ selectedCard.release({x:element.ref.x, y:element.ref.y - 10 * this.g_mapScale}, ()=>{
let spacing = 0
if(this.g_formData.answerType=="Image"){ if(this.g_formData.answerType=="Image"){
this.alignCenter(this.m_answerCard_All, 30*this.g_mapScale, true) spacing = 20*this.g_mapScale
}else{ }else{
this.alignCenter(this.m_answerCard_All, 20*this.g_mapScale, true) spacing = 20*this.g_mapScale
}
this.alignCenter(this.m_answerCard_All, spacing, true, ()=>{
element.star(()=>{
let end = true
this.m_answerCard_All.forEach(item=>{
if(item.id.indexOf("answercard")!=-1){
end = false
}
})
if(end){
this.endGame()
} }
}) })
})
})
selectedCard.disable = true; selectedCard.disable = true;
selectedCard.text_copy.ref.fontColor = "#608dec"
let index = this.m_answerCard_All.indexOf(element) let index = this.m_answerCard_All.indexOf(element)
this.m_answerCard_All.splice(index, 1, selectedCard) this.m_answerCard_All.splice(index, 1, selectedCard)
this.deleteElementInRender(element.id) this.deleteElementInRender(element.id)
this.topOfRenderArray(this.g_cartoon.getCartoonElement("background-main-xia").ref) this.topOfRenderArray(this.g_cartoon.getCartoonElement("background-main-xia").ref)
}else{
selectedCard.release()
this.disableMoveAsstant();
element.shake()
}
} }
this.g_enableMapUp = true; this.g_enableMapUp = true;
return true return true
...@@ -650,11 +712,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -650,11 +712,9 @@ export class PlayComponent implements OnInit, OnDestroy {
// 答案卡片 图片 // 答案卡片 图片
initAnsterCard_Image(){ initAnsterCard_Image(){
this.m_answerCard_All.push(this.createAnswerCardImage(0, {})) this.g_formData.dataArray.forEach((element, index) => {
this.m_answerCard_All.push(this.createAnswerCardImage(1, {})) this.m_answerCard_All.push(this.createAnswerCardImage(index, element))
this.m_answerCard_All.push(this.createAnswerCardImage(2, {})) });
this.m_answerCard_All.push(this.createAnswerCardImage(3, {}))
this.alignCenter(this.m_answerCard_All, 20*this.g_mapScale, true) this.alignCenter(this.m_answerCard_All, 20*this.g_mapScale, true)
} }
...@@ -670,24 +730,70 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -670,24 +730,70 @@ export class PlayComponent implements OnInit, OnDestroy {
y: this.g_cartoon.getOrigin().y + 720 * this.g_mapScale - 140 * this.g_mapScale y: this.g_cartoon.getOrigin().y + 720 * this.g_mapScale - 140 * this.g_mapScale
} }
}) })
element.index = index;
element.shake = (callback?)=>{
rotateItem(element.ref, 10, 0.1, ()=>{
rotateItem(element.ref, -10, 0.2, ()=>{
rotateItem(element.ref, 10, 0.2, ()=>{
rotateItem(element.ref, 0, 0.1, ()=>{
callback && callback()
})
})
})
})
}
element.star = (callback?)=>{
element.starAni = this.g_cartoon.createAnimation("icon_star", 5, 300, ()=>{
element.starAni.visible = false;
this.deleteElementInRender(element.starAni.id)
callback && callback()
})
element.starAni.setScaleXY(1)
element.starAni.x = element.ref.x
element.starAni.y = element.ref.y
this.render(element.starAni, zIndexMap.animation)
element.starAni.play()
}
this.subscribeMapUpEvent(element.id, ()=>{ this.subscribeMapUpEvent(element.id, ()=>{
if(this.m_currentSelectedCardID && this.m_enableCardMove){ if(this.m_currentSelectedCardID && this.m_enableCardMove){
let selectedCard = this.g_cartoon.getCartoonElement(this.m_currentSelectedCardID) let selectedCard = this.g_cartoon.getCartoonElement(this.m_currentSelectedCardID)
if(selectedCard.index == element.index){
selectedCard.ref.x = element.ref.x selectedCard.ref.x = element.ref.x
selectedCard.ref.y = element.ref.y selectedCard.ref.y = element.ref.y
selectedCard.release({x:element.ref.x, y:element.ref.y - 6 * this.g_mapScale}, ()=>{ selectedCard.release({x:element.ref.x, y:element.ref.y - 6 * this.g_mapScale}, ()=>{
let spacing = 0
if(this.g_formData.answerType=="Image"){ if(this.g_formData.answerType=="Image"){
this.alignCenter(this.m_answerCard_All, 30*this.g_mapScale, true) spacing = 20*this.g_mapScale
}else{ }else{
this.alignCenter(this.m_answerCard_All, 20*this.g_mapScale, true) spacing = 20*this.g_mapScale
}
this.alignCenter(this.m_answerCard_All, spacing, true, ()=>{
element.star(()=>{
let end = true
this.m_answerCard_All.forEach(item=>{
if(item.id.indexOf("answercard")!=-1){
end = false
}
})
if(end){
this.endGame()
} }
}) })
})
})
selectedCard.disable = true; selectedCard.disable = true;
let index = this.m_answerCard_All.indexOf(element) let index = this.m_answerCard_All.indexOf(element)
this.m_answerCard_All.splice(index, 1, selectedCard) this.m_answerCard_All.splice(index, 1, selectedCard)
this.deleteElementInRender(element.id) this.deleteElementInRender(element.id)
this.topOfRenderArray(this.g_cartoon.getCartoonElement("background-main-xia").ref) this.topOfRenderArray(this.g_cartoon.getCartoonElement("background-main-xia").ref)
}else{
selectedCard.release()
this.disableMoveAsstant();
element.shake()
}
} }
this.g_enableMapUp = true; this.g_enableMapUp = true;
return true return true
...@@ -698,7 +804,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -698,7 +804,7 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
initQuestionBackground(){ initQuestionBackground(){
if(this.g_formData.question.type=="Audio"){ if(this.g_formData.question.type=="LongAudio"){
let element = this.g_cartoon.createCartoonElementImageFunc("question-audio-bg", "bg_kuang2", (w, h)=>{ let element = this.g_cartoon.createCartoonElementImageFunc("question-audio-bg", "bg_kuang2", (w, h)=>{
return{ return{
sx: this.g_cartoon.getCartoonElement("background-main").ref.scaleX, sx: this.g_cartoon.getCartoonElement("background-main").ref.scaleX,
...@@ -731,7 +837,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -731,7 +837,7 @@ export class PlayComponent implements OnInit, OnDestroy {
initQuestion(){ initQuestion(){
let audio = this.initAudioPlayer() let audio = this.initAudioPlayer()
if(this.g_formData.question.type == "Audio"){ if(this.g_formData.question.type == "LongAudio" && this.g_formData.question.longAudio_url != "" ){
// 进度条 // 进度条
let progressBar = this.g_cartoon.createCartoonElementImageFunc("audio-plyer-progress", "bg_tiaodi", (w, h)=>{ let progressBar = this.g_cartoon.createCartoonElementImageFunc("audio-plyer-progress", "bg_tiaodi", (w, h)=>{
return { return {
...@@ -818,7 +924,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -818,7 +924,6 @@ export class PlayComponent implements OnInit, OnDestroy {
audioPlay.pauseIcon.ref.visible = false audioPlay.pauseIcon.ref.visible = false
audioPlay.audio.pause() audioPlay.audio.pause()
audioPlay.isPlaying = !audioPlay.isPlaying audioPlay.isPlaying = !audioPlay.isPlaying
slider.ref.x = -(476/2) slider.ref.x = -(476/2)
coverColor.width = 0; coverColor.width = 0;
progressBar.currentTimeString.ref.text = "00:00" progressBar.currentTimeString.ref.text = "00:00"
...@@ -890,7 +995,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -890,7 +995,7 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
}) })
let image = this.g_cartoon.createImage("lego-building", (w, h)=>{ let image = this.g_cartoon.createImage(this.g_formData.question.image_url, (w, h)=>{
let sx = 590 / w let sx = 590 / w
let sy = 360 / h let sy = 360 / h
let s = Math.min(sx, sy) let s = Math.min(sx, sy)
...@@ -908,11 +1013,11 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -908,11 +1013,11 @@ export class PlayComponent implements OnInit, OnDestroy {
this.render(element.ref, zIndexMap.imageContainer) this.render(element.ref, zIndexMap.imageContainer)
} }
} }
initAudioPlayer(){ initAudioPlayer(){
if( (this.g_formData.question.type == "LongAudio" && this.g_formData.question.longAudio_url != "" ) || this.g_formData.question.shortAudio_url != ""){
let audioType = "L"
let element = this.g_cartoon.createCartoonElementImageFunc("bg-short-audio", "bg_laba", (w, h)=>{ let element = this.g_cartoon.createCartoonElementImageFunc("bg-short-audio", "bg_laba", (w, h)=>{
return{ return{
sx: 474 * this.g_mapScale / w, sx: 474 * this.g_mapScale / w,
...@@ -921,10 +1026,11 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -921,10 +1026,11 @@ export class PlayComponent implements OnInit, OnDestroy {
}, (w, h)=>{ }, (w, h)=>{
let x = 0; let x = 0;
let y = 0 let y = 0
if(this.g_formData.question.type == "Audio"){ if(this.g_formData.question.type == "LongAudio"){
x = -235 x = -235
y = -45 y = -45
}else{ }else{
audioType = "S"
x = 20 x = 20
} }
return{ return{
...@@ -932,7 +1038,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -932,7 +1038,7 @@ export class PlayComponent implements OnInit, OnDestroy {
y: this.g_cartoon.getOrigin().y + (220 + y) * this.g_mapScale y: this.g_cartoon.getOrigin().y + (220 + y) * this.g_mapScale
} }
}) })
element.audioType = audioType
element.playIcon = this.g_cartoon.createCartoonElementImageFunc("btn-audio-play", "btn_videooff", (w, h)=>{ element.playIcon = this.g_cartoon.createCartoonElementImageFunc("btn-audio-play", "btn_videooff", (w, h)=>{
return{ return{
sx: 91 / w, sx: 91 / w,
...@@ -960,9 +1066,16 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -960,9 +1066,16 @@ export class PlayComponent implements OnInit, OnDestroy {
element.ref.addChild(element.playIcon.ref) element.ref.addChild(element.playIcon.ref)
element.ref.addChild(element.pauseIcon.ref) element.ref.addChild(element.pauseIcon.ref)
element.audio = this.g_cartoon.audio.get("default_audio")
if(this.g_formData.question.type == "LongAudio"){
element.audio = this.g_cartoon.audio.get(this.g_formData.question.longAudio_url)
}else{
element.audio = this.g_cartoon.audio.get(this.g_formData.question.shortAudio_url)
}
element.isPlaying = false element.isPlaying = false
this.subscribeMapDownEvent(element.playIcon.id, ()=>{ this.subscribeMapDownEvent(element.playIcon.id, ()=>{
if(element.audioType=="L"){
if(element.isPlaying){ if(element.isPlaying){
element.playIcon.ref.visible = true element.playIcon.ref.visible = true
element.pauseIcon.ref.visible = false element.pauseIcon.ref.visible = false
...@@ -975,11 +1088,31 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -975,11 +1088,31 @@ export class PlayComponent implements OnInit, OnDestroy {
element.isPlaying = !element.isPlaying element.isPlaying = !element.isPlaying
} }
this.g_enableMapDown = true; this.g_enableMapDown = true;
}else{
element.playIcon.ref.visible = false
element.starAni = this.g_cartoon.createAnimation("btn_laba", 3, 500)
element.starAni.loop = true;
element.starAni.setScaleXY(this.g_mapScale)
element.starAni.x = element.ref.x -140 * this.g_mapScale
element.starAni.y = element.ref.y -80 * this.g_mapScale
this.render(element.starAni, zIndexMap.animation)
element.starAni.play()
this.g_cartoon.playAudio(this.g_formData.question.shortAudio_url, false, ()=>{
element.starAni.visible = false;
this.deleteElementInRender(element.starAni.id)
element.playIcon.ref.visible = true
this.g_enableMapDown = true;
})
}
}) })
this.render(element.ref, zIndexMap.shortAudio) this.render(element.ref, zIndexMap.shortAudio)
console.log(element.audio)
return element.audio return element.audio
}else{
return null
}
} }
...@@ -1623,6 +1756,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1623,6 +1756,8 @@ export class PlayComponent implements OnInit, OnDestroy {
this.m_renderObject.forEach(item=>{ this.m_renderObject.forEach(item=>{
this.m_renderArr.push(item.element) this.m_renderArr.push(item.element)
}) })
}else{
console.warn("Can not found element id:" + id)
} }
} }
...@@ -1679,24 +1814,29 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1679,24 +1814,29 @@ export class PlayComponent implements OnInit, OnDestroy {
alignCenter(elementArray, spacing, withAni?, callback?){ alignCenter(elementArray, spacing, withAni?, callback?){
let totlaWidth = 0 let totlaWidth = 0
let length = elementArray.length
elementArray.forEach(element => { elementArray.forEach(element => {
let bd = element.ref.getBoundingBox() let bd = element.ref.getBoundingBox()
totlaWidth += bd.width totlaWidth += bd.width
}); });
totlaWidth += (elementArray.length-1) * spacing totlaWidth += (elementArray.length-1) * spacing
let laseX = this.g_canvasWidth / 2 - totlaWidth/2; let laseX = this.g_canvasWidth / 2 - totlaWidth/2;
elementArray.forEach(element => { elementArray.forEach((element, index) => {
let bd = element.ref.getBoundingBox() let bd = element.ref.getBoundingBox()
if(withAni){ if(withAni){
tweenChange(element.ref, {x: laseX + bd.width / 2}, 0.2, ()=>{ tweenChange(element.ref, {x: laseX + bd.width / 2}, 0.2, ()=>{
this.g_cartoon.saveSize(element.id) this.g_cartoon.saveSize(element.id)
if(length == (index+1)){
callback && callback() callback && callback()
}
}) })
}else{ }else{
element.ref.x = laseX + bd.width / 2 element.ref.x = laseX + bd.width / 2
this.g_cartoon.saveSize(element.id) this.g_cartoon.saveSize(element.id)
if(length == (index+1)){
callback && callback() callback && callback()
} }
}
laseX = (laseX + bd.width + spacing) laseX = (laseX + bd.width + spacing)
}); });
......
...@@ -5,5 +5,5 @@ export default { ...@@ -5,5 +5,5 @@ export default {
type: "Image" type: "Image"
}, },
answerType: "Text", answerType: "Text",
dataArray: ["This is for test", "Apple", "Building", "Lovely Puppy"] dataArray: ["One", "Two", "Three", "Four"]
} }
\ No newline at end of file
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