Commit c76ad82f authored by Chen Jiping's avatar Chen Jiping

fix:增加不同皮肤背景图片设置,修复字体显示

parent 483860a2
......@@ -69,54 +69,110 @@
</div>
<div id='listen-anchor'>
<nz-divider nzText="背景图片" nzOrientation="left"></nz-divider>
<nz-form-item>
<button style="margin: 10px;" nz-button nzType="danger" (click)="clearBg()">
<span>清空</span>
</button>
</nz-form-item>
<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, 'lm_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>
<div *ngIf="item.skin == 'B'">
<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.lt_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item, 'lt_pic_url')"></app-upload-image-with-preview>
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinB.lt_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item.skinB, '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.mt_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item, 'mt_pic_url')"></app-upload-image-with-preview>
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinB.mt_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item.skinB, '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.rt_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item, 'rt_pic_url')"></app-upload-image-with-preview>
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinB.rt_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item.skinB, '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.lm_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item, 'lm_pic_url')"></app-upload-image-with-preview>
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinB.lm_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item.skinB, '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.lm_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item, 'lm_pic_url')"></app-upload-image-with-preview>
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinB.rm_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item.skinB, '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.lb_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item, 'lb_pic_url')"></app-upload-image-with-preview>
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinB.lb_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item.skinB, '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.mb_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item, 'mb_pic_url')"></app-upload-image-with-preview>
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinB.mb_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item.skinB, '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.rb_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item, 'rb_pic_url')"></app-upload-image-with-preview>
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinB.rb_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item.skinB, 'rb_pic_url')"></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
</div>
</div>
<div>
<div *ngFor="let data of item.exercisesArr;let j = index" class="card-item" style="padding: 0.5vw;">
<div class="border">
......
......@@ -23,6 +23,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item = {};
this.item.skinA = {};
this.item.skinB = {};
this.item.title = this.getDefaultTile();
this.item.exercisesArr = [];
......@@ -36,6 +40,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item = data;
}
if(!this.item.skinB){
this.item.skinB = {};
}
if(!this.item.skinA){
this.item.skinA = {};
}
console.log('item:', this.item);
this.init();
this.changeDetectorRef.markForCheck();
......@@ -172,5 +184,16 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.save();
}
}
clearBg(){
if(this.item.skin ==='A'){
this.item.skinA = {};
}
else{
this.item.skinB = {};
}
this.save();
}
}
......@@ -44,7 +44,7 @@ export class Title {
part1.textAlign = 'left';
part1.fontSize = 48;
part1.fontName = "BRLNSDB";
part1.fontColor = "#000000";
part1.fontColor = "#ffffff";
part1.refreshSize();
part1.x = titePart1Bg.getBoundingBox().width / 2 - part1.getBoundingBox().width - 13 * mapScaleX;
titePart1Bg.addChild(part1);
......
......@@ -452,7 +452,13 @@ export class PlayComponent implements OnInit, OnDestroy {
this.rawImages.set(url, url);
}
addUrlToImage(url, key){
if(!key){
key = url;
}
this.rawImages.set(key, url);
}
......@@ -511,36 +517,46 @@ export class PlayComponent implements OnInit, OnDestroy {
}
if (this.data.lt_pic_url) {
this.addUrlToImages(this.data.lt_pic_url);
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 (this.data.lm_pic_url) {
this.addUrlToImages(this.data.lm_pic_url);
if (skin.lb_pic_url) {
this.addUrlToImage(skin.lb_pic_url, skinType + "_" + skin.lb_pic_url);
}
if (this.data.lb_pic_url) {
this.addUrlToImages(this.data.lb_pic_url);
if (skin.mt_pic_url) {
this.addUrlToImage(skin.mt_pic_url, skinType + "_" + skin.mt_pic_url);
}
if (this.data.mt_pic_url) {
this.addUrlToImages(this.data.mt_pic_url);
if (skin.mb_pic_url) {
this.addUrlToImage(skin.mb_pic_url, skinType + "_" + skin.mb_pic_url);
}
if (this.data.mb_pic_url) {
this.addUrlToImages(this.data.mb_pic_url);
if (skin.rt_pic_url) {
this.addUrlToImage(skin.rt_pic_url, skinType + "_" + skin.rt_pic_url);
}
if (this.data.rt_pic_url) {
this.addUrlToImages(this.data.rt_pic_url);
if (skin.rm_pic_url) {
this.addUrlToImage(skin.rm_pic_url, skinType + "_" + skin.rm_pic_url);
}
if (this.data.rm_pic_url) {
this.addUrlToImages(this.data.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');
}
if (this.data.rb_pic_url) {
this.addUrlToImages(this.data.rb_pic_url);
if(this.data.skinB){
loadBg(this.data.skinB, 'B');
}
}
......@@ -622,7 +638,7 @@ export class PlayComponent implements OnInit, OnDestroy {
}
initBg() {
console.log(this.images);
const getPic = (key, anchorX: number = 0.5, anchorY: number = 0.5) => {
const pic = new MySprite();
pic.init(this.images.get(key), anchorX, anchorY);
......@@ -630,64 +646,79 @@ export class PlayComponent implements OnInit, OnDestroy {
this.skinRenderArr.push(pic);
return pic;
}
const initBg = (skin, skinType) => {
console.log(skin);
//左上
if (this.data.lt_pic_url) {
const pic = getPic(this.data.lt_pic_url, 0, 0);
if (skin.lt_pic_url) {
const pic = getPic(skinType + '_' + skin.lt_pic_url, 0, 0);
pic.x = 0;
pic.y = 0;
}
//左中
if (this.data.lm_pic_url) {
const pic = getPic(this.data.lm_pic_url, 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 (this.data.lb_pic_url) {
const pic = getPic(this.data.lb_pic_url, 0, 1);
if (skin.lb_pic_url) {
const pic = getPic(skinType + '_' + skin.lb_pic_url, 0, 1);
pic.x = 0;
pic.y = this.canvasHeight;
}
//中上
if (this.data.mt_pic_url) {
const pic = getPic(this.data.lm_pic_url, 0.5, 0);
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 (this.data.mb_pic_url) {
const pic = getPic(this.data.mb_pic_url, 0.5, 1);
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 (this.data.rt_pic_url) {
const pic = getPic(this.data.rt_pic_url, 1, 0);
if (skin.rt_pic_url) {
const pic = getPic(skinType + '_' + skin.rt_pic_url, 1, 0);
pic.x = this.canvasWidth;
pic.y = 0;
}
//右中
if (this.data.rm_pic_url) {
const pic = getPic(this.data.rm_pic_url, 1, 0.5);
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 (this.data.rb_pic_url) {
const pic = getPic(this.data.rb_pic_url, 1, 1);
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