Commit 9b57d0db authored by 李维's avatar 李维

Buf fix for bg image

parent 2780e884
...@@ -27,6 +27,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy { ...@@ -27,6 +27,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy {
@Input() zoneWidth: number = 960; @Input() zoneWidth: number = 960;
@Input() zoneHeight: number = 155; @Input() zoneHeight: number = 155;
@Input() title: string = "选区"; @Input() title: string = "选区";
@Input() assetsRoot: string = "";
@Input() defaultBGImage: string = ""; @Input() defaultBGImage: string = "";
@Input() defaultItemBG: string = ""; @Input() defaultItemBG: string = "";
@Input() itemWidth: number = 50; @Input() itemWidth: number = 50;
...@@ -88,8 +89,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy { ...@@ -88,8 +89,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy {
this.canvasBaseH = Number(this.zoneHeight); this.canvasBaseH = Number(this.zoneHeight);
if(!this.bgItem.url){ if(!this.bgItem.url){
this.bgItem.url = this.defaultBGImage this.bgItem.url = this.getURL(this.defaultBGImage)
} else {
this.bgItem.url = this.getURL(this.bgItem.url)
} }
this.init(); this.init();
this.initListener(); this.initListener();
this.update(); this.update();
...@@ -112,8 +116,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy { ...@@ -112,8 +116,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy {
this.renderArr.push(this.bg); this.renderArr.push(this.bg);
} }
const bg = this.bg; const bg = this.bg;
if (this.bgItem.url) {
bg.load(this.bgItem.url).then(() => { if (this.getURL(this.bgItem.url)) {
bg.load(this.getURL(this.bgItem.url)).then(() => {
const rate1 = this.canvasWidth / bg.width; const rate1 = this.canvasWidth / bg.width;
const rate2 = this.canvasHeight / bg.height; const rate2 = this.canvasHeight / bg.height;
const rate = Math.min(rate1, rate2); const rate = Math.min(rate1, rate2);
...@@ -160,7 +165,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy { ...@@ -160,7 +165,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy {
let mached = false; let mached = false;
this.hotZoneArr.forEach(element => { this.hotZoneArr.forEach(element => {
if(element.uid == uid) { if(element.uid == uid) {
console.log(uid, element)
element.audio_url = audio_url; element.audio_url = audio_url;
mached = true; mached = true;
} }
...@@ -199,10 +203,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy { ...@@ -199,10 +203,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy {
const itemW = this.itemWidth; const itemW = this.itemWidth;
const itemH = this.itemHeight; const itemH = this.itemHeight;
const item = new HotZoneImageItem(this.ctx); const item = new HotZoneImageItem(this.ctx);
let imageUrl = ""
if (saveData) { if (saveData) {
item.initFont(this.fontSize, this.fontName, this.fontColor) item.initFont(this.fontSize, this.fontName, this.fontColor)
item.init(saveData.media.image_url, saveData.media.text, saveData.media.type, (w, h) => { imageUrl = this.getURL(saveData.media.image_url);
item.init(imageUrl, saveData.media.text, saveData.media.type, (w, h) => {
const saveRect = saveData.rect; const saveRect = saveData.rect;
item.scaleX = (saveData.rect.width / saveData.scale) / w; item.scaleX = (saveData.rect.width / saveData.scale) / w;
item.scaleY = (saveData.rect.height / saveData.scale) / h; item.scaleY = (saveData.rect.height / saveData.scale) / h;
...@@ -210,14 +215,15 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy { ...@@ -210,14 +215,15 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy {
item.y = saveRect.y / saveData.scale + newRect.y item.y = saveRect.y / saveData.scale + newRect.y
}); });
item.uid = saveData.uid item.uid = saveData.uid
item.image_url = saveData.media.image_url item.image_url = imageUrl
item.text = saveData.media.text?saveData.media.text:"" item.text = saveData.media.text?saveData.media.text:""
item.type = saveData.media.type item.type = saveData.media.type
item.audio_url = saveData.media.audio_url?saveData.media.audio_url:"" item.audio_url = saveData.media.audio_url?saveData.media.audio_url:""
} else { } else {
item.uid = uuid.v4() item.uid = uuid.v4()
imageUrl = this.getURL(this.defaultItemBG);
item.initFont(this.fontSize, this.fontName, this.fontColor) item.initFont(this.fontSize, this.fontName, this.fontColor)
item.init(this.defaultItemBG, "", "Text", () => { item.init(imageUrl, "", "Text", () => {
item.x = this.canvasWidth / 2 - this.itemWidth / 2; item.x = this.canvasWidth / 2 - this.itemWidth / 2;
item.y = this.canvasHeight / 2 - 20; item.y = this.canvasHeight / 2 - 20;
}, () => this.autoSave()); }, () => this.autoSave());
...@@ -617,12 +623,16 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy { ...@@ -617,12 +623,16 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy {
autoSave() { autoSave() {
// console.log("Auto save") // console.log("Auto save")
const bgItem = this.bgItem; // const bgItem = JSON.parse(JSON.stringify(this.bgItem));
const bgItem = this.bgItem
if (this.bg) { if (this.bg) {
bgItem['rect'] = this.bg.getBoundingBox(); bgItem['rect'] = this.bg.getBoundingBox();
} else { } else {
bgItem['rect'] = { x: 0, y: 0, width: Math.round(this.canvasWidth * 100) / 100, height: Math.round(this.canvasHeight * 100) / 100 }; bgItem['rect'] = { x: 0, y: 0, width: Math.round(this.canvasWidth * 100) / 100, height: Math.round(this.canvasHeight * 100) / 100 };
} }
if(this.bgItem.url.indexOf("http") == -1) {
bgItem.url = this.defaultBGImage
}
const hotZoneItemArr = []; const hotZoneItemArr = [];
const hotZoneArr = this.hotZoneArr; const hotZoneArr = this.hotZoneArr;
...@@ -640,7 +650,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy { ...@@ -640,7 +650,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy {
hotZoneItem['rect'].y = (Math.round((currentY - bgItem['rect'].y) * 1000) / 1000) * this.scale; hotZoneItem['rect'].y = (Math.round((currentY - bgItem['rect'].y) * 1000) / 1000) * this.scale;
hotZoneItem['rect'].width = (Math.round((hotZoneItem['rect'].width) * 1000) / 1000) * this.scale; hotZoneItem['rect'].width = (Math.round((hotZoneItem['rect'].width) * 1000) / 1000) * this.scale;
hotZoneItem['rect'].height = (Math.round((hotZoneItem['rect'].height) * 1000) / 1000) * this.scale; hotZoneItem['rect'].height = (Math.round((hotZoneItem['rect'].height) * 1000) / 1000) * this.scale;
hotZoneItem['media'].image_url = hotZoneArr[i].image_url if(hotZoneArr[i].image_url.indexOf("http") == -1) {
hotZoneItem['media'].image_url = this.defaultItemBG
} else {
hotZoneItem['media'].image_url = hotZoneArr[i].image_url
}
hotZoneItem['media'].text = hotZoneArr[i].text hotZoneItem['media'].text = hotZoneArr[i].text
hotZoneItem['media'].type = hotZoneArr[i].type hotZoneItem['media'].type = hotZoneArr[i].type
hotZoneItem['media'].audio_url = hotZoneArr[i].audio_url ? hotZoneArr[i].audio_url : "" hotZoneItem['media'].audio_url = hotZoneArr[i].audio_url ? hotZoneArr[i].audio_url : ""
...@@ -650,8 +664,15 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy { ...@@ -650,8 +664,15 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy {
this.hotZoneChanged = false; this.hotZoneChanged = false;
} }
getURL(url: string) {
if(url.indexOf("http")==-1 && url.indexOf("/")==-1){
return this.assetsRoot.replace(/_PH_IMAGE_NAME_/g, url)
} else {
return url
}
}
saveClick() { saveClick() {
// console.log("Saved")
this.autoSave() this.autoSave()
} }
} }
...@@ -42,8 +42,9 @@ ...@@ -42,8 +42,9 @@
zoneWidth = "330" zoneWidth = "330"
zoneHeight = "168" zoneHeight = "168"
[customBackground] = "true" [customBackground] = "true"
defaultBGImage = "assets/default/images/bg_330_168.png" assetsRoot="assets/default/YM413/images/_PH_IMAGE_NAME_.png"
defaultItemBG = "assets/default/images/default_itemBG.png" defaultBGImage = "bg_330_168"
defaultItemBG = "default_itemBG"
[itemWidth] = "240" [itemWidth] = "240"
[itemHeight] = "114" [itemHeight] = "114"
[bgItem]="bgItemLeft" [bgItem]="bgItemLeft"
...@@ -191,8 +192,9 @@ ...@@ -191,8 +192,9 @@
zoneWidth = "330" zoneWidth = "330"
zoneHeight = "168" zoneHeight = "168"
[customBackground] = "true" [customBackground] = "true"
defaultBGImage = "assets/default/images/bg_330_168.png" assetsRoot="assets/default/YM413/images/_PH_IMAGE_NAME_.png"
defaultItemBG = "assets/default/images/default_itemBG.png" defaultBGImage = "bg_330_168"
defaultItemBG = "default_itemBG"
[itemWidth] = "240" [itemWidth] = "240"
[itemHeight] = "114" [itemHeight] = "114"
[(bgItem)]="bgItemMiddle" [(bgItem)]="bgItemMiddle"
...@@ -340,8 +342,9 @@ ...@@ -340,8 +342,9 @@
zoneWidth = "330" zoneWidth = "330"
zoneHeight = "168" zoneHeight = "168"
[customBackground] = "true" [customBackground] = "true"
defaultBGImage = "assets/default/images/bg_330_168.png" assetsRoot="assets/default/YM413/images/_PH_IMAGE_NAME_.png"
defaultItemBG = "assets/default/images/default_itemBG.png" defaultBGImage = "bg_330_168"
defaultItemBG = "default_itemBG"
[itemWidth] = "240" [itemWidth] = "240"
[itemHeight] = "114" [itemHeight] = "114"
[(bgItem)]="bgItemRight" [(bgItem)]="bgItemRight"
......
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
] ]
}, },
"angularCompilerOptions": { "angularCompilerOptions": {
"enableIvy": false,
"fullTemplateTypeCheck": true, "fullTemplateTypeCheck": true,
"strictInjectionParameters": true "strictInjectionParameters": true
} }
......
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