Commit 988b1d92 authored by 李维's avatar 李维

Add background

parent 80983b9b
...@@ -27,7 +27,7 @@ import { far } from '@fortawesome/free-regular-svg-icons'; ...@@ -27,7 +27,7 @@ import { far } from '@fortawesome/free-regular-svg-icons';
import { CoursewareFolderTableComponent } from './common/courseware-folder-table/courseware-folder-table.component'; import { CoursewareFolderTableComponent } from './common/courseware-folder-table/courseware-folder-table.component';
import { CustomHotZone2Component } from './common/custom-hot-zone-2/custom-hot-zone-2.component'; import { CustomHotZone2Component } from './common/custom-hot-zone-2/custom-hot-zone-2.component';
// import { ImageChildrenEditorComponent } from './common/image-children-editor/image-children-editor.component'; // import { ImageChildrenEditorComponent } from './common/image-children-editor/image-children-editor.component';
import {BackgroundUploadComponent} from './common/background-upload/background-upload.component';
registerLocaleData(zh); registerLocaleData(zh);
...@@ -45,7 +45,7 @@ registerLocaleData(zh); ...@@ -45,7 +45,7 @@ registerLocaleData(zh);
UploadVideoComponent, UploadVideoComponent,
CustomHotZoneComponent, CustomHotZoneComponent,
BackgroundUploadComponent,
CoursewareFolderTableComponent, CoursewareFolderTableComponent,
CustomHotZone2Component, CustomHotZone2Component,
// ImageChildrenEditorComponent, // ImageChildrenEditorComponent,
......
<div class="content-border">
<nz-form-item>
<div nz-col nzSpan="22"></div>
<div nz-col nzSpan="2">
<button nz-button nzType="danger" (click)="cleanAll()">清空背景</button>
</div>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="1" >左上</nz-form-label>
<nz-form-control [nzSpan]="7">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.leftTop"
(imageUploaded)="onImageUploadSuccess($event, items, 'leftTop')"></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="1" >中上</nz-form-label>
<nz-form-control [nzSpan]="7">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.middleTop"
(imageUploaded)="onImageUploadSuccess($event, items, 'middleTop')"></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="1" >右上</nz-form-label>
<nz-form-control [nzSpan]="7">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.rightTop"
(imageUploaded)="onImageUploadSuccess($event, items, 'rightTop')"></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="1" >左中</nz-form-label>
<nz-form-control [nzSpan]="7">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.leftMiddle"
(imageUploaded)="onImageUploadSuccess($event, items, 'leftMiddle')"></app-upload-image-with-preview>
</nz-form-control>
<div nz-col nzSpan="8"></div>
<nz-form-label [nzSpan]="1" >右中</nz-form-label>
<nz-form-control [nzSpan]="7">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.rightMiddle"
(imageUploaded)="onImageUploadSuccess($event, items, 'rightMiddle')"></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="1" >左下</nz-form-label>
<nz-form-control [nzSpan]="7">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.leftBottom"
(imageUploaded)="onImageUploadSuccess($event, items, 'leftBottom')"></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="1" >中下</nz-form-label>
<nz-form-control [nzSpan]="7">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.middleBottom"
(imageUploaded)="onImageUploadSuccess($event, items, 'middleBottom')"></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="1">右下</nz-form-label>
<nz-form-control [nzSpan]="7">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.rightBottom"
(imageUploaded)="onImageUploadSuccess($event, items, 'rightBottom')"></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
</div>
\ No newline at end of file
.content-border {
width: 100%;
height: 100%;
border-radius: 0.5rem;
min-width: 1200px;
border: 2px solid #ddd;
padding: 5px;
}
\ No newline at end of file
import {Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-background-upload',
templateUrl: './background-upload.component.html',
styleUrls: ['./background-upload.component.scss']
})
export class BackgroundUploadComponent {
@Input() items = {"leftTop": '', "middleTop": '', "rightTop": '', "leftMiddle": '', "rightMiddle": '', "leftBottom": '', "middleBottom": '', "rightBottom": ''};
@Output() change = new EventEmitter();
constructor( ) { }
onImageUploadSuccess(e, items, key) {
items[key] = e.url;
this.change.emit(items)
}
cleanAll() {
if(confirm("确定清空所有背景吗?")) {
this.items["leftTop"] = "";
this.items["middleTop"] = "";
this.items["rightTop"] = "";
this.items["leftMiddle"] = "";
this.items["rightMiddle"] = "";
this.items["leftBottom"] = "";
this.items["middleBottom"] = "";
this.items["rightBottom"] = "";
this.change.emit(this.items)
}
}
deletePic(key) {
this.items[key] = ""
this.change.emit(this.items)
}
}
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
<input nz-input type="text" id="t_val2" [(ngModel)]="saveData.title.t_val2" (blur)="save()"> <input nz-input type="text" id="t_val2" [(ngModel)]="saveData.title.t_val2" (blur)="save()">
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<!-- <nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="t_audio_url">发音</nz-form-label> <nz-form-label [nzSpan]="3" nzFor="t_audio_url">发音</nz-form-label>
<nz-form-control [nzSpan]="6"> <nz-form-control [nzSpan]="6">
<app-audio-recorder [audioUrl]="saveData.title.t_audio_url" id="t_audio_url" <app-audio-recorder [audioUrl]="saveData.title.t_audio_url" id="t_audio_url"
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
</app-audio-recorder> </app-audio-recorder>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item> <!-- <nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="t_font_size">字体大小</nz-form-label> <nz-form-label [nzSpan]="3" nzFor="t_font_size">字体大小</nz-form-label>
<nz-form-control [nzSpan]="6"> <nz-form-control [nzSpan]="6">
<nz-input-number [(ngModel)]="saveData.title.t_font_size" [nzMin]="1" [nzStep]="1" (nzBlur)="save()"> <nz-input-number [(ngModel)]="saveData.title.t_font_size" [nzMin]="1" [nzStep]="1" (nzBlur)="save()">
...@@ -324,4 +324,20 @@ ...@@ -324,4 +324,20 @@
</nz-form-item> </nz-form-item>
</div> </div>
</div> </div>
<div class="card-config">
<div class="card-item">
<div class="card-item-content" style="margin-top: 10px;">
<div class="title">背景 设置</div>
<div class="section">
<app-background-upload
[items]="bgImages"
(change)="backgroundImageChanged($event)">
</app-background-upload>
</div>
</div>
</div>
</div>
</div> </div>
...@@ -11,6 +11,52 @@ ...@@ -11,6 +11,52 @@
} }
.card-config {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
flex-direction:column;
.card-item{
flex:1;
margin: 1rem;
.card-item-content{
.title {
font-size: 24px;
width: 100%;
text-align: center;
}
.section{
border-top: 1px solid ;
padding: 10px 0;
.section-title{
font-size: 24px;
width: 100%;
}
.section-content{
display: flex;
margin: 5px 0 10px 0;
}
}
.pic-sound-box {
width: 50%;
display: flex;
flex-direction: column;
}
.add-btn-box {
display: flex;
align-items: center;
justify-content: center;
height: 20vw;
padding: 10px;
padding-top: 5vw;
}
}
}
}
nz-select { nz-select {
width: 100%; width: 100%;
} }
......
...@@ -64,6 +64,12 @@ constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDete ...@@ -64,6 +64,12 @@ constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDete
recordingIndex = [] recordingIndex = []
listOfOption = ['1', '2', '3', '4']; listOfOption = ['1', '2', '3', '4'];
indexAudio = []; indexAudio = [];
bgImages: Object = { leftTop: "", middleTop: "", rightTop: "", leftMiddle: "", rightMiddle: "", leftBottom: "", middleBottom: "", rightBottom: "" };
backgroundImageChanged(e) {
this.save()
}
onAudioUploadSuccessByItem_new(e, key, item?) { onAudioUploadSuccessByItem_new(e, key, item?) {
if(item){ if(item){
item[key] = e.url; item[key] = e.url;
...@@ -103,6 +109,10 @@ constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDete ...@@ -103,6 +109,10 @@ constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDete
this.saveData.indexAudio = [] this.saveData.indexAudio = []
} }
if(!this.saveData.bgImages) {
this.saveData.bgImages = { leftTop: "", middleTop: "", rightTop: "", leftMiddle: "", rightMiddle: "", leftBottom: "", middleBottom: "", rightBottom: "" };
}
if(!this.saveData.recordingIndex) { if(!this.saveData.recordingIndex) {
this.saveData.recordingIndex = [] this.saveData.recordingIndex = []
} }
...@@ -159,6 +169,13 @@ constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDete ...@@ -159,6 +169,13 @@ constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDete
this.indexAudio = ["", "", "", ""] this.indexAudio = ["", "", "", ""]
this.saveData.indexAudio = this.indexAudio this.saveData.indexAudio = this.indexAudio
} }
if(this.saveData.bgImages) {
this.bgImages = this.saveData.bgImages
} else {
this.bgImages = { leftTop: "", middleTop: "", rightTop: "", leftMiddle: "", rightMiddle: "", leftBottom: "", middleBottom: "", rightBottom: "" };
}
} }
......
...@@ -223,7 +223,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -223,7 +223,7 @@ export class PlayComponent implements OnInit, OnDestroy {
} else { } else {
this.saveData = defaultData.contentObj.data; this.saveData = defaultData.contentObj.data;
} }
// console.log('data:' , data); // console.log('data:' , this.saveData);
// 初始化 各事件监听 // 初始化 各事件监听
this.initListener(); this.initListener();
...@@ -653,6 +653,11 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -653,6 +653,11 @@ export class PlayComponent implements OnInit, OnDestroy {
initImg() { initImg() {
this.addUrlToImages(this.saveData.pic_url); this.addUrlToImages(this.saveData.pic_url);
this.addUrlToImages(this.saveData.pic_url_2); this.addUrlToImages(this.saveData.pic_url_2);
for(let key in this.saveData.bgImages) {
if(this.saveData.bgImages[key]) {
this.addUrlToImages(this.saveData.bgImages[key]);
}
}
} }
/** /**
...@@ -725,6 +730,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -725,6 +730,7 @@ export class PlayComponent implements OnInit, OnDestroy {
initView() { initView() {
this.initPic(); this.initPic();
this.initBottomPart(); this.initBottomPart();
this.initBackgroundSide()
} }
initBottomPart() { initBottomPart() {
...@@ -827,7 +833,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -827,7 +833,7 @@ export class PlayComponent implements OnInit, OnDestroy {
word_bg_group.x = x; word_bg_group.x = x;
word_bg_group.y = y; word_bg_group.y = y;
word_bg_group.fillColor = "#FFFF00" word_bg_group.fillColor = "#FFFF00"
word_bg_group.alpha = 1; word_bg_group.alpha = 0;
let startWidth = 80; let startWidth = 80;
//单词 //单词
...@@ -1094,8 +1100,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1094,8 +1100,8 @@ export class PlayComponent implements OnInit, OnDestroy {
word.wordLoaded = true; word.wordLoaded = true;
this.stopAllAudio() this.stopAllAudio()
this.playAudio("sm-choice-correct", false, ()=>{ this.playAudio("sm-choice-correct", false, ()=>{
this.stopAllAudio() // this.stopAllAudio()
this.playAudio(this.saveData.wordArr[option["index"]].word_audio_url); // this.playAudio(this.saveData.wordArr[option["index"]].word_audio_url);
}) })
} else { } else {
...@@ -1175,9 +1181,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1175,9 +1181,9 @@ export class PlayComponent implements OnInit, OnDestroy {
this.underLine[i].forEach(element => { this.underLine[i].forEach(element => {
element.alpha = 0; element.alpha = 0;
}); });
this.stopAllAudio()
this.playAudio(this.saveData.wordArr[i].word_audio_url);
} }
this.stopAllAudio()
this.playAudio(this.saveData.wordArr[i].word_audio_url);
} }
return ; return ;
} }
...@@ -1269,6 +1275,66 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1269,6 +1275,66 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
calcPosition(position, width, height) {
let map = {
leftTop: {x: 0, y: 0},
middleTop: {x: this.canvasWidth / 2, y: 0},
rightTop: {x: this.canvasWidth, y: 0},
leftMiddle: {x: 0, y: this.canvasHeight / 2},
rightMiddle: {x: this.canvasWidth, y: this.canvasHeight / 2},
leftBottom: {x: 0, y: this.canvasHeight},
middleBottom: {x: this.canvasWidth / 2, y: this.canvasHeight},
rightBottom: {x: this.canvasWidth, y: this.canvasHeight}
}
switch(position) {
case "leftTop":
map["leftTop"].x += width * this.mapScale / 2,
map["leftTop"].y += height * this.mapScale / 2;
return map["leftTop"];
case "middleTop":
map["middleTop"].y += height * this.mapScale / 2;
return map["middleTop"];
case "rightTop":
map["rightTop"].x -= width * this.mapScale / 2,
map["rightTop"].y += height * this.mapScale / 2;
return map["rightTop"];
case "leftMiddle":
map["leftMiddle"].x += height * this.mapScale / 2;
return map["leftMiddle"];
case "rightMiddle":
map["rightMiddle"].x -= height * this.mapScale / 2;
return map["rightMiddle"];
case "leftBottom":
map["leftBottom"].x += width * this.mapScale / 2,
map["leftBottom"].y -= height * this.mapScale / 2;
return map["leftBottom"];
case "middleBottom":
map["middleBottom"].y -= height * this.mapScale / 2;
return map["middleBottom"];
case "rightBottom":
map["rightBottom"].x -= width * this.mapScale / 2,
map["rightBottom"].y -= height * this.mapScale / 2;
return map["rightBottom"];
}
}
initBackgroundSide() {
for(let key in this.saveData.bgImages) {
if(!this.saveData.bgImages[key]) {
continue
}
let sp = new MySprite()
sp.init(this.images.get(this.saveData.bgImages[key]))
sp.scaleX = this.mapScale;
sp.scaleY = this.mapScale;
let pos = this.calcPosition(key, sp.width, sp.height);
sp.x = pos.x;
sp.y = pos.y;
this.renderArr.push(sp)
}
}
} }
......
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