Commit 5f34dae4 authored by Chen Jiping's avatar Chen Jiping

feat:增加背景图片

parent b09336cf
......@@ -109,6 +109,75 @@
</nz-form-item>
</div>
</div>
<div nz-row>
<div nz-col [nzSpan]="20" nzOffset="2">
<nz-card nzTitle="背景图片" [nzExtra]="bgTemplate">
<div *ngIf="item.skin == 'A'">
<nz-form-item>
<nz-form-label [nzSpan]="2">左上</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinA.lt_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item.skinA, 'lt_pic_url')">
</app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2">中上</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinA.mt_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item.skinA, 'mt_pic_url')">
</app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2">右上</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinA.rt_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item.skinA, 'rt_pic_url')">
</app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2">左中</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinA.lm_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item.skinA, 'lm_pic_url')">
</app-upload-image-with-preview>
</nz-form-control>
<div nz-col nzSpan="8"></div>
<nz-form-label [nzSpan]="2">右中</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinA.rm_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item.skinA, 'rm_pic_url')">
</app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2">左下</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinA.lb_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item.skinA, 'lb_pic_url')">
</app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2">中下</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinA.mb_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item.skinA, 'mb_pic_url')">
</app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2">右下</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinA.rb_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item.skinA, 'rb_pic_url')">
</app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
</div>
</nz-card>
<ng-template #bgTemplate>
<button style="margin: 10px;" nz-button nzType="danger" (click)="clearBg()">
<span>清空</span>
</button>
</ng-template>
</div>
</div>
<div nz-row>
<div *ngFor="let zone of item.zoneArr; let i = index" style="padding: 0.5vw;">
<div nz-col [nzSpan]="20" nzOffset="2">
......
......@@ -26,6 +26,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item = {};
this.item.skinA = {};
this.item.skin = 'A';
this.item.title = getDefaultTile();
this.item.letterArr = [];
......@@ -73,6 +77,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item.letterArr = [];
}
if(!this.item.skin){
this.item.skin = 'A';
}
if (!this.item.skinA) {
this.item.skinA = {};
}
if (!this.item.zoneArr) {
this.item.zoneArr = [];
}
......@@ -202,6 +214,15 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
}
clearBg() {
if (this.item.skin === 'A') {
this.item.skinA = {};
}
this.save();
}
/**
* 储存数据
......
......@@ -441,6 +441,13 @@ export class PlayComponent implements OnInit, OnDestroy {
this.rawImages.set(url, url);
}
addUrlToImage(url, key) {
if (!key) {
key = url;
}
this.rawImages.set(key, url);
}
......@@ -470,6 +477,14 @@ export class PlayComponent implements OnInit, OnDestroy {
this.data.letterArr = [];
}
if(!this.data.skin){
this.data.skin = 'A';
}
if (!this.data.skinA) {
this.data.skinA = {};
}
if (!this.data.zoneArr) {
this.data.zoneArr = [];
}
......@@ -512,6 +527,43 @@ export class PlayComponent implements OnInit, OnDestroy {
*/
initImg() {
const loadBg = (skin, skinType) => {
if (skin.lt_pic_url) {
this.addUrlToImage(skin.lt_pic_url, skinType + "_" + skin.lt_pic_url);
}
if (skin.lm_pic_url) {
this.addUrlToImage(skin.lm_pic_url, skinType + "_" + skin.lm_pic_url);
}
if (skin.lb_pic_url) {
this.addUrlToImage(skin.lb_pic_url, skinType + "_" + skin.lb_pic_url);
}
if (skin.mt_pic_url) {
this.addUrlToImage(skin.mt_pic_url, skinType + "_" + skin.mt_pic_url);
}
if (skin.mb_pic_url) {
this.addUrlToImage(skin.mb_pic_url, skinType + "_" + skin.mb_pic_url);
}
if (skin.rt_pic_url) {
this.addUrlToImage(skin.rt_pic_url, skinType + "_" + skin.rt_pic_url);
}
if (skin.rm_pic_url) {
this.addUrlToImage(skin.rm_pic_url, skinType + "_" + skin.rm_pic_url);
}
if (skin.rb_pic_url) {
this.addUrlToImage(skin.rb_pic_url, skinType + "_" + skin.rb_pic_url);
}
}
if (this.data.skinA) {
loadBg(this.data.skinA, 'A');
}
}
......@@ -604,6 +656,7 @@ export class PlayComponent implements OnInit, OnDestroy {
*/
initView() {
this.initBg();
this.initTitle();
......@@ -614,6 +667,89 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initExercises();
}
initBg() {
const getPic = (key, anchorX: number = 0.5, anchorY: number = 0.5) => {
const pic = new MySprite();
pic.init(this.images.get(key), anchorX, anchorY);
pic.setScaleXY(this.mapScale);
this.renderArr.push(pic);
return pic;
}
const initBg = (skin, skinType) => {
//左上
if (skin.lt_pic_url) {
const pic = getPic(skinType + '_' + skin.lt_pic_url, 0, 0);
pic.x = 0;
pic.y = 0;
}
//左中
if (skin.lm_pic_url) {
const pic = getPic(skinType + '_' + skin.lm_pic_url, 0);
pic.x = 0;
pic.y = (this.canvasHeight - pic.getBoundingBox().height) / 2;
}
//左下
if (skin.lb_pic_url) {
const pic = getPic(skinType + '_' + skin.lb_pic_url, 0, 1);
pic.x = 0;
pic.y = this.canvasHeight;
}
//中上
if (skin.mt_pic_url) {
const pic = getPic(skinType + '_' + skin.mt_pic_url, 0.5, 0);
pic.x = this.canvasWidth / 2;
pic.y = 0;
}
//中下
if (skin.mb_pic_url) {
const pic = getPic(skinType + '_' + skin.mb_pic_url, 0.5, 1);
pic.x = this.canvasWidth / 2;
pic.y = this.canvasHeight;
}
//右上
if (skin.rt_pic_url) {
const pic = getPic(skinType + '_' + skin.rt_pic_url, 1, 0);
pic.x = this.canvasWidth;
pic.y = 0;
}
//右中
if (skin.rm_pic_url) {
const pic = getPic(skinType + '_' + skin.rm_pic_url, 1, 0.5);
pic.x = this.canvasWidth;
pic.y = this.canvasHeight / 2;
}
//右下
if (skin.rb_pic_url) {
const pic = getPic(skinType + '_' + skin.rb_pic_url, 1, 1);
pic.x = this.canvasWidth;
pic.y = this.canvasHeight;
}
}
if (this.data.skin === 'A') {
if (this.data.skinA) {
initBg(this.data.skinA, 'A');
}
}
else {
if (this.data.skinB) {
initBg(this.data.skinB, 'B');
}
}
}
initBottomPart() {
const listening = new Listening(this.audioObj['listenAudio'], this.images);
......
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