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

Add background

parent 80983b9b
......@@ -27,7 +27,7 @@ import { far } from '@fortawesome/free-regular-svg-icons';
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 { ImageChildrenEditorComponent } from './common/image-children-editor/image-children-editor.component';
import {BackgroundUploadComponent} from './common/background-upload/background-upload.component';
registerLocaleData(zh);
......@@ -45,7 +45,7 @@ registerLocaleData(zh);
UploadVideoComponent,
CustomHotZoneComponent,
BackgroundUploadComponent,
CoursewareFolderTableComponent,
CustomHotZone2Component,
// 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 @@
<input nz-input type="text" id="t_val2" [(ngModel)]="saveData.title.t_val2" (blur)="save()">
</nz-form-control>
</nz-form-item>
<!-- <nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="t_audio_url">发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder [audioUrl]="saveData.title.t_audio_url" id="t_audio_url"
......@@ -68,7 +68,7 @@
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<!-- <nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="t_font_size">字体大小</nz-form-label>
<nz-form-control [nzSpan]="6">
<nz-input-number [(ngModel)]="saveData.title.t_font_size" [nzMin]="1" [nzStep]="1" (nzBlur)="save()">
......@@ -324,4 +324,20 @@
</nz-form-item>
</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>
......@@ -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 {
width: 100%;
}
......
......@@ -64,6 +64,12 @@ constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDete
recordingIndex = []
listOfOption = ['1', '2', '3', '4'];
indexAudio = [];
bgImages: Object = { leftTop: "", middleTop: "", rightTop: "", leftMiddle: "", rightMiddle: "", leftBottom: "", middleBottom: "", rightBottom: "" };
backgroundImageChanged(e) {
this.save()
}
onAudioUploadSuccessByItem_new(e, key, item?) {
if(item){
item[key] = e.url;
......@@ -103,6 +109,10 @@ constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDete
this.saveData.indexAudio = []
}
if(!this.saveData.bgImages) {
this.saveData.bgImages = { leftTop: "", middleTop: "", rightTop: "", leftMiddle: "", rightMiddle: "", leftBottom: "", middleBottom: "", rightBottom: "" };
}
if(!this.saveData.recordingIndex) {
this.saveData.recordingIndex = []
}
......@@ -159,6 +169,13 @@ constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDete
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 {
} else {
this.saveData = defaultData.contentObj.data;
}
// console.log('data:' , data);
// console.log('data:' , this.saveData);
// 初始化 各事件监听
this.initListener();
......@@ -653,6 +653,11 @@ export class PlayComponent implements OnInit, OnDestroy {
initImg() {
this.addUrlToImages(this.saveData.pic_url);
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 {
initView() {
this.initPic();
this.initBottomPart();
this.initBackgroundSide()
}
initBottomPart() {
......@@ -827,7 +833,7 @@ export class PlayComponent implements OnInit, OnDestroy {
word_bg_group.x = x;
word_bg_group.y = y;
word_bg_group.fillColor = "#FFFF00"
word_bg_group.alpha = 1;
word_bg_group.alpha = 0;
let startWidth = 80;
//单词
......@@ -1094,8 +1100,8 @@ export class PlayComponent implements OnInit, OnDestroy {
word.wordLoaded = true;
this.stopAllAudio()
this.playAudio("sm-choice-correct", false, ()=>{
this.stopAllAudio()
this.playAudio(this.saveData.wordArr[option["index"]].word_audio_url);
// this.stopAllAudio()
// this.playAudio(this.saveData.wordArr[option["index"]].word_audio_url);
})
} else {
......@@ -1175,10 +1181,10 @@ export class PlayComponent implements OnInit, OnDestroy {
this.underLine[i].forEach(element => {
element.alpha = 0;
});
}
this.stopAllAudio()
this.playAudio(this.saveData.wordArr[i].word_audio_url);
}
}
return ;
}
}
......@@ -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