Commit bd59ce3a authored by 李维's avatar 李维

dev commit

parent 5557a5b8
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
<span>卡片类型</span><span> :</span> <span>卡片类型</span><span> :</span>
</div> </div>
<div style="float: left; width: 300px;"> <div style="float: left; width: 300px;">
<nz-radio-group [(ngModel)]="contentObj.answerType" (ngModelChange)="saveItem()" > <nz-radio-group [(ngModel)]="contentObj.answerType" (ngModelChange)="handleAnswerTypeChange()" >
<label nz-radio [nzValue]="'Text'">文字</label> <label nz-radio [nzValue]="'Text'">文字</label>
<label nz-radio [nzDisabled]="contentObj.question.type != 'LongAudio'" [nzValue]="'Image'">图片</label> <label nz-radio [nzDisabled]="contentObj.question.type != 'LongAudio'" [nzValue]="'Image'">图片</label>
</nz-radio-group> </nz-radio-group>
...@@ -71,12 +71,6 @@ ...@@ -71,12 +71,6 @@
<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">
...@@ -86,25 +80,27 @@ ...@@ -86,25 +80,27 @@
<div class="section" > <div class="section" >
<div class="section-content"> <div class="section-content">
<div *ngIf="contentObj.answerType=='Text'" style="flex:1"> <div [ngSwitch]="contentObj.answerType">
<div style="display: flex; margin-bottom: 10px;"> <div *ngSwitchCase="Text" style="flex:1">
<div style="flex:1"> <div style="display: flex; margin-bottom: 10px;">
文字 <div style="flex:1">
文字
</div>
<div style="flex:5">
<!-- <input type="text" nz-input placeholder="" [(ngModel)]="contentObj.dataArray[i]" (blur)="saveItem()" style="width: 250px;" /> -->
<input type="text" nz-input placeholder="" [(ngModel)]="contentObj.dataArray[i]" (blur)="handleTextChange($event, i)" style="width: 250px;" />
</div>
</div> </div>
<div style="flex:5">
<input type="text" nz-input placeholder="" [(ngModel)]="item.text" (blur)="saveItem()" style="width: 250px;" />
</div>
</div> </div>
</div> <div *ngSwitchCase="Image" style="flex:1">
<div style="display: flex; ">
<div *ngIf="contentObj.answerType=='Image'" style="flex:1" > <div style="flex:1">
<div style="display: flex; "> 图片
<div style="flex:1"> </div>
图片 <div style="flex:5">
<app-upload-image-with-preview style="width: 100%;" [picUrl]="item" (imageUploaded)="onImageUploadSuccessByItem($event, contentObj.dataArray, i)"></app-upload-image-with-preview>
</div>
</div> </div>
<div style="flex:5">
<app-upload-image-with-preview style="width: 100%;" [picUrl]="item.image_url" (imageUploaded)="onImageUploadSuccessByItem($event, contentObj.dataArray, i)"></app-upload-image-with-preview>
</div>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -13,6 +13,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -13,6 +13,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
_item: any; _item: any;
KEY = 'DataKey_PU01'; KEY = 'DataKey_PU01';
checkOptionsOne = [] checkOptionsOne = []
Text = "Text"
Image = "Image"
set item(item) { set item(item) {
this._item = item; this._item = item;
...@@ -24,7 +28,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -24,7 +28,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
"version": "1.0", "version": "1.0",
key: "DataKey_PU01", key: "DataKey_PU01",
question: { question: {
type: "Image" type: "Image",
text: "",
image_url: "",
shortAudio_url: "",
longAudio_url: ""
}, },
answerType: "Text", answerType: "Text",
dataArray: [] dataArray: []
...@@ -45,14 +53,28 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -45,14 +53,28 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
handleQuestionTypeChange(){ handleQuestionTypeChange(){
if(this.contentObj.question.type != 'LongAudio'){ if(this.contentObj.question.type != 'LongAudio'){
this.contentObj.answerType='Text' if(this.contentObj.answerType != "Text"){
this.contentObj.answerType='Text'
let len = this.contentObj.dataArray.length
this.contentObj.dataArray = Array(len).fill("")
}
} }
this.saveItem() this.saveItem()
} }
handleAnswerTypeChange(){
// console.log("Change")
let len = this.contentObj.dataArray.length
this.contentObj.dataArray = Array(len).fill("")
this.saveItem()
}
handleTextChange(e, index){
// console.log(e.target.value, index)
this.contentObj.dataArray[index] = e.target.value
this.saveItem()
this.refresh();
}
...@@ -132,12 +154,13 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -132,12 +154,13 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
addItem(item?, type?) { addItem(item?, type?) {
item.push({ text: "", image_url: "" }) item.push("")
this.saveItem(); this.saveItem();
} }
onImageUploadSuccessByItem(e, item, key) { onImageUploadSuccessByItem(e, item, key) {
item[key] = e.url this.contentObj.dataArray[key] = e.url
this,this.refresh()
this.save(); this.save();
} }
......
...@@ -166,7 +166,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -166,7 +166,7 @@ export class PlayComponent implements OnInit, OnDestroy {
mapToImageArray(contentObj){ mapToImageArray(contentObj){
let array = [] let array = []
this.g_formData.dataArray.forEach(element => { this.g_formData.dataArray.forEach(element => {
array.push(element.image_url) array.push(element)
}); });
if(this.g_formData.question.image_url){ if(this.g_formData.question.image_url){
array.push(this.g_formData.question.image_url) array.push(this.g_formData.question.image_url)
...@@ -216,10 +216,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -216,10 +216,10 @@ export class PlayComponent implements OnInit, OnDestroy {
this.disableMoveAsstant(); this.disableMoveAsstant();
} }
} }
this.m_currentSelectedCardID = null this.m_currentSelectedCardID = null;
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; this.m_startGame = true;
} }
...@@ -243,21 +243,43 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -243,21 +243,43 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
initBackground(){ initBackground(){
let element = this.g_cartoon.createCartoonElementImageFunc("background-main", "bg_bg", (w, h)=>{ let element = this.g_cartoon.createCartoonElementImageFunc("background-main", "bg_face", (w, h)=>{
// let sx = this.g_canvasWidth / w
// let sy = this.g_canvasHeight / h
// let s = Math.min(sx, sy)
// return {
// sx: s,
// sy: s
// }
let sx = this.g_canvasWidth / w let sx = this.g_canvasWidth / w
let sy = this.g_canvasHeight / h let sy = this.g_canvasHeight / h
let s = Math.min(sx, sy) let s = Math.min(sx, sy)
return { return {
sx: s, sx: 1434 * this.g_mapScale / w,
sy: s sy: 1028 * this.g_mapScale / h
} }
}, (w, h)=>{ }, (w, h)=>{
return { return {
x: this.g_canvasWidth / 2, x: this.g_canvasWidth / 2 + 2 * this.g_mapScale,
y: this.g_canvasHeight / 2 y: this.g_canvasHeight / 2 - 56 * this.g_mapScale
} }
}) })
let xia = this.g_cartoon.createCartoonElementImage("background-main-xia", "bg_bottom", 1280 * element.ref.scaleX, 142 * element.ref.scaleY, this.g_canvasWidth / 2, this.g_cartoon.getOrigin().y + (720 - 71) * this.g_mapScale) let xia = this.g_cartoon.createCartoonElementImage("background-main-xia", "bg_bottom", 1280 * element.ref.scaleX, 142 * element.ref.scaleY, this.g_canvasWidth / 2, this.g_cartoon.getOrigin().y + (720 - 71) * this.g_mapScale)
xia.ref.alpha = 0
element.koushui = (callback?)=>{
element.starAni = this.g_cartoon.createAnimation("icon_kou", 4, 200, ()=>{
element.starAni.visible = false;
this.deleteElementInRender(element.starAni.id)
callback && callback()
})
element.starAni.setScaleXY(this.g_mapScale)
element.starAni.x = element.ref.x + 300 * this.g_mapScale
element.starAni.y = element.ref.y + 397 * this.g_mapScale
this.render(element.starAni, zIndexMap.animation)
element.starAni.play()
}
this.subscribeMapUpEvent("background-color", ()=>{ this.subscribeMapUpEvent("background-color", ()=>{
let slider = this.g_cartoon.getCartoonElement("audio-plyer-slider") let slider = this.g_cartoon.getCartoonElement("audio-plyer-slider")
...@@ -454,16 +476,16 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -454,16 +476,16 @@ export class PlayComponent implements OnInit, OnDestroy {
// 问题卡片 图片 // 问题卡片 图片
initQuestionCard_Image(){ initQuestionCard_Image(){
this.m_questionCard_All.push(this.createQuestionCardImage(0, {})) this.g_formData.dataArray.forEach((item, index)=>{
this.m_questionCard_All.push(this.createQuestionCardImage(1, {})) this.m_questionCard_All.push(this.createQuestionCardImage(index, item))
this.m_questionCard_All.push(this.createQuestionCardImage(2, {})) })
this.m_questionCard_All.push(this.createQuestionCardImage(3, {})) 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)
} }
createQuestionCardImage(index, data){ createQuestionCardImage(index, data){
let element = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-"+index, "lego-building", (w, h)=>{ data = data?data:"bg_change3"
let element = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-"+index, data, (w, h)=>{
let s = (155 * this.g_mapScale) / h let s = (155 * this.g_mapScale) / h
return{ return{
sx: s, sx: s,
...@@ -478,89 +500,91 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -478,89 +500,91 @@ export class PlayComponent implements OnInit, OnDestroy {
let imageBD = element.ref.getBoundingBox() let imageBD = element.ref.getBoundingBox()
element.index = index; element.index = index;
// 边框
let border = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-"+index, "image_center", (w, h)=>{ // 高亮边框
let border_H = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-h-"+index, "border_center", (w, h)=>{
return{ return{
sx: (imageBD.width / element.ref.scaleX) / w, sx: (imageBD.width / element.ref.scaleX) / w,
sy: ((imageBD.height + 26 * this.g_mapScale) / element.ref.scaleY) / h sy: ((imageBD.height + 30 * this.g_mapScale) / element.ref.scaleY) / h
} }
}, (w, h)=>{ }, (w, h)=>{
return{ return{
x: 0, x: 0,
y: 13 y: 8
} }
}) })
element.ref.addChild(border.ref) element.ref.addChild(border_H.ref)
let borderLeft = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-left-"+index, "image_border_left", (w, h)=>{ let borderLeft_H = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-h-left-"+index, "border_left", (w, h)=>{
return{ return{
sx: (22 / element.ref.scaleX) / w, sx: (22 / element.ref.scaleX) / w,
sy: ((imageBD.height + 26 * this.g_mapScale) / element.ref.scaleY) / h sy: ((imageBD.height + 30 * this.g_mapScale) / element.ref.scaleY) / h
} }
}, (w, h)=>{ }, (w, h)=>{
return{ return{
x: -(imageBD.width / element.ref.scaleX) / 2 - 5, x: -(imageBD.width / element.ref.scaleX) / 2 - 10,
y: 13 y: 8
} }
}) })
element.ref.addChild(borderLeft.ref) element.ref.addChild(borderLeft_H.ref)
let borderRight = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-right-"+index, "image_border_right", (w, h)=>{ let borderRight_H = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-h-right-"+index, "border_right", (w, h)=>{
return{ return{
sx: (22 / element.ref.scaleX) / w, sx: (22 / element.ref.scaleX) / w,
sy: ((imageBD.height + 26 * this.g_mapScale) / element.ref.scaleY) / h sy: ((imageBD.height + 30 * this.g_mapScale) / element.ref.scaleY) / h
} }
}, (w, h)=>{ }, (w, h)=>{
return{ return{
x: (imageBD.width / element.ref.scaleX) / 2 + 5, x: (imageBD.width / element.ref.scaleX) / 2 + 10,
y: 13 y: 8
} }
}) })
element.ref.addChild(borderRight.ref) element.ref.addChild(borderRight_H.ref)
// 高亮边框 border_H.ref.visible = false;
let border_H = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-h-"+index, "border_center", (w, h)=>{ borderRight_H.ref.visible = false;
borderLeft_H.ref.visible = false;
// 边框
let border = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-"+index, "image_center", (w, h)=>{
return{ return{
sx: (imageBD.width / element.ref.scaleX) / w, sx: (imageBD.width / element.ref.scaleX) / w,
sy: ((imageBD.height + 38 * this.g_mapScale) / element.ref.scaleY) / h sy: ((imageBD.height + 26 * this.g_mapScale) / element.ref.scaleY) / h
} }
}, (w, h)=>{ }, (w, h)=>{
return{ return{
x: 0, x: 0,
y: 0 y: 13
} }
}) })
element.ref.addChild(border_H.ref) element.ref.addChild(border.ref)
let borderLeft_H = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-h-left-"+index, "border_left", (w, h)=>{ let borderLeft = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-left-"+index, "image_border_left", (w, h)=>{
return{ return{
sx: (22 / element.ref.scaleX) / w, sx: (22 / element.ref.scaleX) / w,
sy: ((imageBD.height + 38 * this.g_mapScale) / element.ref.scaleY) / h sy: ((imageBD.height + 26 * this.g_mapScale) / element.ref.scaleY) / h
} }
}, (w, h)=>{ }, (w, h)=>{
return{ return{
x: -(imageBD.width / element.ref.scaleX) / 2 - 20, x: -(imageBD.width / element.ref.scaleX) / 2 - 5,
y: 3 y: 13
} }
}) })
element.ref.addChild(borderLeft_H.ref) element.ref.addChild(borderLeft.ref)
let borderRight_H = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-h-right-"+index, "border_right", (w, h)=>{ let borderRight = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-right-"+index, "image_border_right", (w, h)=>{
return{ return{
sx: (22 / element.ref.scaleX) / w, sx: (22 / element.ref.scaleX) / w,
sy: ((imageBD.height + 38 * this.g_mapScale) / element.ref.scaleY) / h sy: ((imageBD.height + 26 * this.g_mapScale) / element.ref.scaleY) / h
} }
}, (w, h)=>{ }, (w, h)=>{
return{ return{
x: (imageBD.width / element.ref.scaleX) / 2 + 20, x: (imageBD.width / element.ref.scaleX) / 2 + 5,
y: 3 y: 13
} }
}) })
element.ref.addChild(borderRight_H.ref) element.ref.addChild(borderRight.ref)
border_H.ref.visible = false;
borderRight_H.ref.visible = false;
borderLeft_H.ref.visible = false;
element.startPos = { x:element.initX, y:element.initY } element.startPos = { x:element.initX, y:element.initY }
element.backTo = (pos?, callback?)=>{ element.backTo = (pos?, callback?)=>{
...@@ -709,6 +733,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -709,6 +733,7 @@ export class PlayComponent implements OnInit, OnDestroy {
selectedCard.release() selectedCard.release()
this.disableMoveAsstant(); this.disableMoveAsstant();
element.shake(); element.shake();
this.g_cartoon.getCartoonElement("background-main").koushui()
this.g_cartoon.stopAudio("cuowu") this.g_cartoon.stopAudio("cuowu")
this.g_cartoon.playAudio("cuowu") this.g_cartoon.playAudio("cuowu")
} }
...@@ -777,7 +802,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -777,7 +802,7 @@ export class PlayComponent implements OnInit, OnDestroy {
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 let spacing = 0
if(this.g_formData.answerType=="Image"){ if(this.g_formData.answerType=="Image"){
spacing = 20*this.g_mapScale spacing = 30*this.g_mapScale
}else{ }else{
spacing = 20*this.g_mapScale spacing = 20*this.g_mapScale
} }
...@@ -805,7 +830,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -805,7 +830,8 @@ export class PlayComponent implements OnInit, OnDestroy {
}else{ }else{
selectedCard.release() selectedCard.release()
this.disableMoveAsstant(); this.disableMoveAsstant();
element.shake() element.shake();
this.g_cartoon.getCartoonElement("background-main").koushui();
this.g_cartoon.stopAudio("cuowu") this.g_cartoon.stopAudio("cuowu")
this.g_cartoon.playAudio("cuowu") this.g_cartoon.playAudio("cuowu")
} }
...@@ -1010,28 +1036,39 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1010,28 +1036,39 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
}) })
let image = this.g_cartoon.createImage(this.g_formData.question.image_url, (w, h)=>{ if(this.g_formData.question.type == "Text"){
let sx = 590 / w let text = this.g_cartoon.createLabel(this.g_formData.question.text, "MMTextBook-Bold", "#fdd943", 50)
let sy = 360 / h text.maxSingalLineWidth = 720
let s = Math.min(sx, sy) text.textAlign = "left"
return { text.refreshSize()
sx: s, text.x = -330
sy: s text.y = -431 / 2
}
}, (w, h)=>{
return {
x: 0,
y: 0
}
})
element.ref.addChild(image)
element.ref.addChild(text)
}else{
let image = this.g_cartoon.createImage(this.g_formData.question.image_url, (w, h)=>{
let sx = 590 / w
let sy = 360 / h
let s = Math.min(sx, sy)
return {
sx: s,
sy: s
}
}, (w, h)=>{
return {
x: 0,
y: 0
}
})
element.ref.addChild(image)
}
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 != ""){ if( (this.g_formData.question.type == "LongAudio" && this.g_formData.question.longAudio_url ) || this.g_formData.question.shortAudio_url){
let audioType = "L" 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{
......
...@@ -31,6 +31,7 @@ const localImages = { ...@@ -31,6 +31,7 @@ const localImages = {
'bg_bottom': 'assets/play/bg_bottom.png', 'bg_bottom': 'assets/play/bg_bottom.png',
'bg_change': 'assets/play/bg_change_1.png', 'bg_change': 'assets/play/bg_change_1.png',
'bg_change2': 'assets/play/bg_change2-1.png', 'bg_change2': 'assets/play/bg_change2-1.png',
'bg_change3': 'assets/play/bg_change2-2.png',
'bg_kuang1': 'assets/play/bg_kuang1.png', 'bg_kuang1': 'assets/play/bg_kuang1.png',
'bg_kuang2': 'assets/play/bg_kuang2.png', 'bg_kuang2': 'assets/play/bg_kuang2.png',
'bg_laba': 'assets/play/bg_laba.png', 'bg_laba': 'assets/play/bg_laba.png',
...@@ -60,6 +61,9 @@ const localImages = { ...@@ -60,6 +61,9 @@ const localImages = {
'border_right': 'assets/play/border_right.png', 'border_right': 'assets/play/border_right.png',
'border_center': 'assets/play/border_center.png', 'border_center': 'assets/play/border_center.png',
'lego-building': 'assets/play/lego-building.jpg', 'lego-building': 'assets/play/lego-building.jpg',
'bg_face': 'assets/play/bg_face.png',
'btn_laba (1)': 'assets/play/frame/btn_laba (1).png', 'btn_laba (1)': 'assets/play/frame/btn_laba (1).png',
'btn_laba (2)': 'assets/play/frame/btn_laba (2).png', 'btn_laba (2)': 'assets/play/frame/btn_laba (2).png',
......
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