Commit 7bb1f772 authored by 李维's avatar 李维

dev commit

parent 6f55fbcd
...@@ -505,15 +505,17 @@ export class HotZoneImageItem extends MySprite { ...@@ -505,15 +505,17 @@ export class HotZoneImageItem extends MySprite {
image: MySprite; image: MySprite;
imageSrc: String; imageSrc: String;
labelBox: MySprite; labelBox: MySprite;
scale scale
text; text;
arrowTop; arrowTop;
arrowRight; arrowRight;
init(imageSrc = null){ init(imageSrc = null, initWidth, initHeight, callback?){
this.showImage(imageSrc,(img)=>{ this.showImage(imageSrc, initWidth, initHeight, (img)=>{
console.log("Init") console.log("Init")
callback && callback(img.width, img.height)
this.setSize(img.width*this.image.scaleX, img.height*this.image.scaleY) this.setSize(img.width*this.image.scaleX, img.height*this.image.scaleY)
this.lineDashFlag = true; this.lineDashFlag = true;
this.showLineDash() this.showLineDash()
...@@ -534,7 +536,6 @@ export class HotZoneImageItem extends MySprite { ...@@ -534,7 +536,6 @@ export class HotZoneImageItem extends MySprite {
this.labelBox.x = this.labelBox.width/2; this.labelBox.x = this.labelBox.width/2;
this.labelBox.y = this.labelBox.height/2; this.labelBox.y = this.labelBox.height/2;
}); });
this.label = new Label(this.ctx); this.label = new Label(this.ctx);
// this.label.anchorY = 0; // this.label.anchorY = 0;
this.label.fontSize = '30px'; this.label.fontSize = '30px';
...@@ -550,7 +551,6 @@ export class HotZoneImageItem extends MySprite { ...@@ -550,7 +551,6 @@ export class HotZoneImageItem extends MySprite {
} else if (this.text) { } else if (this.text) {
this.label.text = this.text; this.label.text = this.text;
} }
this.label.visible = true; this.label.visible = true;
} }
...@@ -559,20 +559,17 @@ export class HotZoneImageItem extends MySprite { ...@@ -559,20 +559,17 @@ export class HotZoneImageItem extends MySprite {
this.label.visible = false; this.label.visible = false;
} }
showImage(imageSrc = null, callback) { showImage(imageSrc = null, initWidth, initHeight, callback) {
this.loadImage(imageSrc).then((img)=>{ this.loadImage(imageSrc).then((img)=>{
if(this.image){ if(this.image){
this.removeChild(this.image) this.removeChild(this.image)
} }
this.image = new MySprite(this.ctx); this.image = new MySprite(this.ctx);
this.image.init(img) this.image.init(img)
let scale = Math.min(200/this.image.width, 200/this.image.height) this.image.x = this.image.width/2
this.image.x = this.image.width*scale/2 this.image.y = this.image.height/2
this.image.y = this.image.height*scale/2
this.image.alpha = 0.7; this.image.alpha = 0.7;
this.image.setScaleXY(scale);
this.addChild(this.image,-1); this.addChild(this.image,-1);
this.imageSrc = img.src;
callback && callback(this.image) callback && callback(this.image)
}) })
} }
......
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
<div class="img-box-upload"> <div class="img-box-upload">
<app-upload-image-with-preview <app-upload-image-with-preview
[picUrl]="it.pic_url" [picUrl]="it.imageSrc"
(imageUploaded)="onImgUploadSuccessByImg($event, it, i)"> (imageUploaded)="onImgUploadSuccessByImg($event, it, i)">
</app-upload-image-with-preview> </app-upload-image-with-preview>
</div> </div>
......
...@@ -20,7 +20,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -20,7 +20,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
@Input() @Input()
set bgItem(v) { set bgItem(v) {
this._bgItem = v; this._bgItem = v;
this.init(); this.init();
} }
get bgItem() { get bgItem() {
...@@ -64,7 +63,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -64,7 +63,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 声音 // 声音
bgAudio = new Audio(); bgAudio = new Audio();
images = new Map(); images = new Map();
animationId: any; animationId: any;
...@@ -100,12 +98,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -100,12 +98,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
ngOnInit() { ngOnInit() {
this.initListener(); this.initListener();
console.log("init")
// this.init(); // this.init();
this.update(); this.update();
} }
ngOnDestroy() { ngOnDestroy() {
...@@ -126,12 +122,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -126,12 +122,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
refreshBackground(callBack = null) { refreshBackground(callBack = null) {
if (!this.bg) { if (!this.bg) {
this.bg = new MySprite(this.ctx); this.bg = new MySprite(this.ctx);
this.renderArr.push(this.bg); this.renderArr.push(this.bg);
} }
const bg = this.bg; const bg = this.bg;
if (this.bgItem.url) { if (this.bgItem.url) {
bg.load(this.bgItem.url).then(() => { bg.load(this.bgItem.url).then(() => {
...@@ -146,7 +140,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -146,7 +140,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
}); });
} }
} }
...@@ -158,8 +151,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -158,8 +151,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
onImgUploadSuccessByImg(e, img, index) { onImgUploadSuccessByImg(e, img, index) {
// console.log() console.log(img)
this.hotZoneArr[index].init(e.url) img.init(e.url)
img.pic_url = e.url; img.pic_url = e.url;
this.refreshImage (img); this.refreshImage (img);
} }
...@@ -176,7 +169,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -176,7 +169,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.hotZoneArr[i].index = i; this.hotZoneArr[i].index = i;
if (this.hotZoneArr[i]) { if (this.hotZoneArr[i]) {
this.hotZoneArr[i].text = (i + 1); this.hotZoneArr[i].text = (i + 1);
} }
} }
} }
...@@ -185,12 +177,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -185,12 +177,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
refreshImageId() { refreshImageId() {
for (let i = 0; i < this.imgArr.length; i++) { for (let i = 0; i < this.imgArr.length; i++) {
this.imgArr[i].id = i; this.imgArr[i].id = i;
if (this.imgArr[i].picItem) { if (this.imgArr[i].picItem) {
this.imgArr[i].picItem.text = 'Image-' + (i + 1); this.imgArr[i].picItem.text = 'Image-' + (i + 1);
} }
} }
} }
getHotZoneItem( saveData = null) { getHotZoneItem( saveData = null) {
...@@ -198,24 +188,25 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -198,24 +188,25 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const itemH = 200; const itemH = 200;
const item = new HotZoneImageItem(this.ctx); const item = new HotZoneImageItem(this.ctx);
if(saveData){ if(saveData){
item.init(saveData.rect.src); item.init(saveData.rect.src, saveData.rect.width , saveData.rect.height, (w, h)=>{
const saveRect = saveData.rect;
item.scaleX = saveData.rect.width / w;
item.scaleY = saveData.rect.height / h;
item.x = saveRect.x // + saveRect.width / 2 ;
item.y = saveRect.y // + saveRect.height / 2;
if(saveData.rect.src.indexOf("bg_200_200") == -1){
item.imageSrc = saveData.rect.src
}
});
}else{ }else{
item.init("assets/default/bg_200_200.png"); item.init("assets/default/bg_200_200.png" , 200 , 200, ()=>{
item.imageSrc = ""
});
} }
item.anchorX = 0.5; item.anchorX = 0.5;
item.anchorY = 0.5; item.anchorY = 0.5;
item.x = this.canvasWidth / 2 - 100; item.x = this.canvasWidth / 2 - 100;
item.y = this.canvasHeight / 2 - 100; item.y = this.canvasHeight / 2 - 100;
if (saveData) {
const saveRect = saveData.rect;
item.scaleX = saveRect.width / item.width;
item.scaleY = saveRect.height / item.height;
item.x = saveRect.x + saveRect.width / 2 ;
item.y = saveRect.y + saveRect.height / 2;
}
return item; return item;
} }
...@@ -263,8 +254,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -263,8 +254,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.refreshHotZoneId(); this.refreshHotZoneId();
} }
init() { init() {
this.initData(); this.initData();
this.initCtx(); this.initCtx();
...@@ -283,7 +272,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -283,7 +272,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
}); });
} }
} }
initHotZoneArr() { initHotZoneArr() {
......
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