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

Buf fix for bg image

parent 2780e884
......@@ -27,6 +27,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy {
@Input() zoneWidth: number = 960;
@Input() zoneHeight: number = 155;
@Input() title: string = "选区";
@Input() assetsRoot: string = "";
@Input() defaultBGImage: string = "";
@Input() defaultItemBG: string = "";
@Input() itemWidth: number = 50;
......@@ -88,8 +89,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy {
this.canvasBaseH = Number(this.zoneHeight);
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.initListener();
this.update();
......@@ -112,8 +116,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy {
this.renderArr.push(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 rate2 = this.canvasHeight / bg.height;
const rate = Math.min(rate1, rate2);
......@@ -160,7 +165,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy {
let mached = false;
this.hotZoneArr.forEach(element => {
if(element.uid == uid) {
console.log(uid, element)
element.audio_url = audio_url;
mached = true;
}
......@@ -199,10 +203,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy {
const itemW = this.itemWidth;
const itemH = this.itemHeight;
const item = new HotZoneImageItem(this.ctx);
let imageUrl = ""
if (saveData) {
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;
item.scaleX = (saveData.rect.width / saveData.scale) / w;
item.scaleY = (saveData.rect.height / saveData.scale) / h;
......@@ -210,14 +215,15 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy {
item.y = saveRect.y / saveData.scale + newRect.y
});
item.uid = saveData.uid
item.image_url = saveData.media.image_url
item.image_url = imageUrl
item.text = saveData.media.text?saveData.media.text:""
item.type = saveData.media.type
item.audio_url = saveData.media.audio_url?saveData.media.audio_url:""
} else {
item.uid = uuid.v4()
imageUrl = this.getURL(this.defaultItemBG);
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.y = this.canvasHeight / 2 - 20;
}, () => this.autoSave());
......@@ -617,12 +623,16 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy {
autoSave() {
// console.log("Auto save")
const bgItem = this.bgItem;
// const bgItem = JSON.parse(JSON.stringify(this.bgItem));
const bgItem = this.bgItem
if (this.bg) {
bgItem['rect'] = this.bg.getBoundingBox();
} else {
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 hotZoneArr = this.hotZoneArr;
......@@ -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'].width = (Math.round((hotZoneItem['rect'].width) * 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'].type = hotZoneArr[i].type
hotZoneItem['media'].audio_url = hotZoneArr[i].audio_url ? hotZoneArr[i].audio_url : ""
......@@ -650,8 +664,15 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy {
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() {
// console.log("Saved")
this.autoSave()
}
}
......@@ -42,8 +42,9 @@
zoneWidth = "330"
zoneHeight = "168"
[customBackground] = "true"
defaultBGImage = "assets/default/images/bg_330_168.png"
defaultItemBG = "assets/default/images/default_itemBG.png"
assetsRoot="assets/default/YM413/images/_PH_IMAGE_NAME_.png"
defaultBGImage = "bg_330_168"
defaultItemBG = "default_itemBG"
[itemWidth] = "240"
[itemHeight] = "114"
[bgItem]="bgItemLeft"
......@@ -191,8 +192,9 @@
zoneWidth = "330"
zoneHeight = "168"
[customBackground] = "true"
defaultBGImage = "assets/default/images/bg_330_168.png"
defaultItemBG = "assets/default/images/default_itemBG.png"
assetsRoot="assets/default/YM413/images/_PH_IMAGE_NAME_.png"
defaultBGImage = "bg_330_168"
defaultItemBG = "default_itemBG"
[itemWidth] = "240"
[itemHeight] = "114"
[(bgItem)]="bgItemMiddle"
......@@ -340,8 +342,9 @@
zoneWidth = "330"
zoneHeight = "168"
[customBackground] = "true"
defaultBGImage = "assets/default/images/bg_330_168.png"
defaultItemBG = "assets/default/images/default_itemBG.png"
assetsRoot="assets/default/YM413/images/_PH_IMAGE_NAME_.png"
defaultBGImage = "bg_330_168"
defaultItemBG = "default_itemBG"
[itemWidth] = "240"
[itemHeight] = "114"
[(bgItem)]="bgItemRight"
......
export const defaultData = {
version: "1.0",
version: "1.1",
dataKey: "DataKey_YM4-13",
longAudio_url: "",
title: {
......@@ -62,7 +62,7 @@ export const defaultData = {
};
export const demoData = {
version: "1.0",
version: "1.1",
dataKey: "DataKey_YM4-13",
longAudio_url: "",
title: {
......@@ -76,97 +76,114 @@ export const demoData = {
{
index: 0,
rect: {
x: 11.870388349514563,
y: -38.60859029126214,
width: 60.87378640776699,
height: 26.175728155339808,
x: 122.7218592964824,
y: 60.895563316582916,
width: 75.6180904522613,
height: 35.91859296482412,
},
uid: "2ea9d699-a27a-4316-b67f-911ea7f79ce6",
uid: "37542b5c-befc-4066-8204-ca8708ca2f31",
media: {
image_url: "default_itemBG",
text: "d",
type: "Text",
audio_url: "",
},
scale: 0.6087378640776699,
scale: 0.3150753768844221,
},
{
index: 1,
rect: {
x: 16.131553398058255,
y: 72.18170097087379,
width: 60.87378640776699,
height: 26.175728155339808,
x: 235.20376884422112,
y: 3.5518447236180903,
width: 75.6180904522613,
height: 35.91859296482412,
},
uid: "eab8f3d6-9cbc-4956-b240-c858b2678476",
uid: "90bb3737-284a-4cc5-8d4b-7cad2f3edc23",
media: {
image_url: "default_itemBG",
text: "mi",
type: "Text",
audio_url: "",
},
scale: 0.6087378640776699,
scale: 0.3150753768844221,
},
{
index: 2,
rect: {
x: 117.18203883495147,
y: 21.047720388349518,
width: 60.87378640776699,
height: 26.175728155339808,
x: 233.628391959799,
y: 121.07496030150755,
width: 75.6180904522613,
height: 35.91859296482412,
},
uid: "aa2310bc-ff1c-4c8e-b2f6-e884ecdddf88",
uid: "d058d6fc-670b-4cbf-9154-1342433cd1c9",
media: {
image_url: "default_itemBG",
text: "p",
type: "Text",
audio_url: "",
},
scale: 0.6087378640776699,
scale: 0.3150753768844221,
},
{
index: 3,
rect: {
x: 235.88592233009712,
y: -37.99985242718447,
width: 60.87378640776699,
height: 26.175728155339808,
x: 1.4178391959798995,
y: 123.8246231155779,
width: 73.25502512562814,
height: 34.42923165829146,
},
uid: "5a91f31e-9e37-4d7c-a6e6-255c8e2dd1df",
uid: "065d712e-3020-4319-b206-5621872b2d41",
media: {
image_url: "default_itemBG",
text: "w",
type: "Text",
audio_url: "",
},
scale: 0.6087378640776699,
scale: 0.3150753768844221,
},
{
index: 4,
rect: {
x: 232.23349514563108,
y: 69.13801165048544,
width: 60.87378640776699,
height: 26.175728155339808,
x: 2.99321608040201,
y: 12.689030653266332,
width: 75.6180904522613,
height: 35.91859296482412,
},
uid: "a4bdec5b-3659-4f70-bdf0-5a7029e73c67",
uid: "08e6c290-6cc0-4d14-8600-bd45ec49921e",
media: {
image_url: "default_itemBG",
text: "go",
type: "Text",
audio_url: "",
},
scale: 0.6087378640776699,
scale: 0.3150753768844221,
},
],
questionsLeft: [
{ number: 2, combin: [0, -1], _combin: [0, -1] },
{ number: 2, combin: [0, -1], _combin: [0, -1] },
{ number: 2, combin: [0, -1], _combin: [0, -1] },
{
number: 2,
combin: [0, -1],
_combin: [0, -1],
},
{
number: 2,
combin: [0, -1],
_combin: [0, -1],
},
{
number: 2,
combin: [0, -1],
_combin: [0, -1],
},
],
bgItemLeft: {
url: "defalut_bg",
rect: { x: 0, y: 89.51538825757572, width: 515, height: 83.15104166666667 },
url: "bg_330_168",
rect: {
x: 0.00000000000005684341886080802,
y: 0.00000000000002842170943040401,
width: 994.9999999999999,
height: 506.54545454545445,
},
questions: [],
},
wordMiddle_text: "ear",
......@@ -175,97 +192,114 @@ export const demoData = {
{
index: 0,
rect: {
x: 17.416666666666668,
y: -27.247,
width: 61.111111111111114,
height: 26.27777777777778,
x: 118.94095477386935,
y: 73.4985783919598,
width: 75.6180904522613,
height: 35.91859296482412,
},
uid: "bffbcc62-44bf-4336-b9a2-28b9c57a23dd",
uid: "e89df459-c2e9-4860-a14a-9ba7fdb06ae8",
media: {
image_url: "default_itemBG",
text: "d",
type: "Text",
audio_url: "",
},
scale: 0.6111111111111112,
scale: 0.3150753768844221,
},
{
index: 1,
rect: {
x: 13.750000000000002,
y: 69.91966666666667,
width: 61.111111111111114,
height: 26.27777777777778,
x: 234.57361809045227,
y: 4.181995477386935,
width: 75.6180904522613,
height: 35.91859296482412,
},
uid: "7a9a60fd-da42-4adc-92b2-ea44144e3c85",
uid: "eb95638d-5793-4dfc-b00c-3226dd240923",
media: {
image_url: "default_itemBG",
text: "mi",
type: "Text",
audio_url: "",
},
scale: 0.6111111111111112,
scale: 0.3150753768844221,
},
{
index: 2,
rect: {
x: 121.91666666666667,
y: 18.586333333333336,
width: 61.111111111111114,
height: 26.27777777777778,
x: 234.88869346733668,
y: 120.12973417085428,
width: 75.6180904522613,
height: 35.91859296482412,
},
uid: "33260665-7cbb-4d66-b50f-35cb27bb232e",
uid: "eca29ef3-4b4c-4ce0-b192-00a02c897fb3",
media: {
image_url: "default_itemBG",
text: "p",
type: "Text",
audio_url: "",
},
scale: 0.6111111111111112,
scale: 0.3150753768844221,
},
{
index: 3,
rect: {
x: 235.58333333333334,
y: -27.858111111111114,
width: 61.111111111111114,
height: 26.27777777777778,
x: 5.828894472361809,
y: 122.02018643216081,
width: 75.6180904522613,
height: 35.91859296482412,
},
uid: "6691ef34-6d56-4704-9fc0-945bf929e4d6",
uid: "12b2ef65-52b1-461b-af28-7c824fb08679",
media: {
image_url: "default_itemBG",
text: "w",
type: "Text",
audio_url: "",
},
scale: 0.6111111111111112,
scale: 0.3150753768844221,
},
{
index: 4,
rect: {
x: 230.69444444444446,
y: 63.19744444444445,
width: 61.111111111111114,
height: 26.27777777777778,
x: 5.828894472361809,
y: 7.332749246231156,
width: 75.6180904522613,
height: 35.91859296482412,
},
uid: "e8a50b81-cdca-40fd-886d-2a07e6263c9d",
uid: "963c89e5-5300-499a-a637-95b02ae0fc4f",
media: {
image_url: "default_itemBG",
text: "go",
type: "Text",
audio_url: "",
},
scale: 0.6111111111111112,
scale: 0.3150753768844221,
},
],
questionsMiddle: [
{ number: 2, combin: [2, -1], _combin: [2, -1] },
{ number: 2, combin: [2, -1], _combin: [2, -1] },
{ number: 2, combin: [2, -1], _combin: [2, -1] },
{
number: 2,
combin: [0, -1],
_combin: [0, -1],
},
{
number: 2,
combin: [0, -1],
_combin: [0, -1],
},
{
number: 2,
combin: [0, -1],
_combin: [0, -1],
},
],
bgItemMiddle: {
url: "defalut_bg",
rect: { x: 0, y: 89.16775568181816, width: 513, height: 82.828125 },
url: "bg_330_168",
rect: {
x: 0.00000000000005684341886080802,
y: 0.00000000000002842170943040401,
width: 994.9999999999999,
height: 506.54545454545445,
},
questions: [],
},
wordRight_text: "ear",
......@@ -274,97 +308,114 @@ export const demoData = {
{
index: 0,
rect: {
x: 18.63888888888889,
y: -24.191444444444446,
width: 61.111111111111114,
height: 26.27777777777778,
x: 118.94095477386935,
y: 73.4985783919598,
width: 75.6180904522613,
height: 35.91859296482412,
},
uid: "b7943632-7a5b-4ada-b640-81b758712a61",
uid: "faf64f0d-f666-4276-bca4-d11b262dd200",
media: {
image_url: "default_itemBG",
text: "d",
type: "Text",
audio_url: "",
},
scale: 0.6111111111111112,
scale: 0.3150753768844221,
},
{
index: 1,
rect: {
x: 16.805555555555557,
y: 69.91966666666667,
width: 61.111111111111114,
height: 26.27777777777778,
x: 235.51884422110552,
y: 2.606618592964824,
width: 75.6180904522613,
height: 35.91859296482412,
},
uid: "54e395b1-5d90-4f4b-afe4-dacea3711fad",
uid: "41181d16-89c2-44f2-bc35-027ed4ce30aa",
media: {
image_url: "default_itemBG",
text: "mi",
type: "Text",
audio_url: "",
},
scale: 0.6111111111111112,
scale: 0.3150753768844221,
},
{
index: 2,
rect: {
x: 126.19444444444446,
y: 19.197444444444447,
width: 61.111111111111114,
height: 26.27777777777778,
x: 232.68316582914574,
y: 121.07496030150755,
width: 75.6180904522613,
height: 35.91859296482412,
},
uid: "2669a94f-b66d-483a-9a49-a71042ad7e02",
uid: "7d0c7f37-d5ec-41da-96a7-7b87a7f35d28",
media: {
image_url: "default_itemBG",
text: "p",
type: "Text",
audio_url: "",
},
scale: 0.6111111111111112,
scale: 0.3150753768844221,
},
{
index: 3,
rect: {
x: 233.75000000000003,
y: -22.35811111111111,
width: 61.111111111111114,
height: 26.27777777777778,
x: 3.9384422110552766,
y: 121.07496030150755,
width: 75.6180904522613,
height: 35.91859296482412,
},
uid: "6a6fcbc7-84e9-4cad-b380-d78e74a24c33",
uid: "c4a10371-be78-407c-9fb1-ed6c10eddde9",
media: {
image_url: "default_itemBG",
text: "w",
type: "Text",
audio_url: "",
},
scale: 0.6111111111111112,
scale: 0.3150753768844221,
},
{
index: 4,
rect: {
x: 233.75000000000003,
y: 68.08633333333334,
width: 61.111111111111114,
height: 26.27777777777778,
x: 5.828894472361809,
y: 2.921693969849246,
width: 75.6180904522613,
height: 35.91859296482412,
},
uid: "41165693-b5ca-4b7d-b7db-6f643259dac6",
uid: "2aa257ea-89cf-4298-9a90-10f9ec3b868c",
media: {
image_url: "default_itemBG",
text: "go",
type: "Text",
audio_url: "",
},
scale: 0.6111111111111112,
scale: 0.3150753768844221,
},
],
questionsRight: [
{ number: 2, combin: [3, -1], _combin: [3, -1] },
{ number: 2, combin: [3, -1], _combin: [3, -1] },
{ number: 2, combin: [3, -1], _combin: [3, -1] },
{
number: 2,
combin: [0, -1],
_combin: [0, -1],
},
{
number: 2,
combin: [0, -1],
_combin: [0, -1],
},
{
number: 2,
combin: [0, -1],
_combin: [0, -1],
},
],
bgItemRight: {
url: "defalut_bg",
rect: { x: 0, y: 89.16775568181816, width: 513, height: 82.828125 },
url: "bg_330_168",
rect: {
x: 0.00000000000005684341886080802,
y: 0.00000000000002842170943040401,
width: 994.9999999999999,
height: 506.54545454545445,
},
questions: [],
},
bgImages: {
......
......@@ -21,6 +21,7 @@
]
},
"angularCompilerOptions": {
"enableIvy": false,
"fullTemplateTypeCheck": 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