Commit c76ad82f authored by Chen Jiping's avatar Chen Jiping

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

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