Commit b77497c0 authored by 李维's avatar 李维

dev commit

parent 179003e3
......@@ -2,7 +2,7 @@
<div style="float: left; width: 25%;border-right: 2px solid #ddd; border-bottom: 2px solid #ddd;">
<h5 style="margin-left: 2.5%;">预览:</h5>
<div style="width: 100%;background-color: #FF0;">
<div id="canvas-container" style="margin:5px;">
<div class="preview-box" #wrap style="margin-bottom: 20px">
<canvas id="canvas" #canvas></canvas>
</div>
......
......@@ -4,11 +4,10 @@
border-radius: 0.5rem;
min-width: 1000px;
border: 2px solid #ddd;
.preview-box {
margin: auto;
width: 95%;
height: 35vw;
width: 100%;
// height: 35vw;
border: 2px dashed #ddd;
border-radius: 0.5rem;
background-color: #fafafa;
......
......@@ -43,7 +43,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
@ViewChild('canvas') canvas: ElementRef;
@ViewChild('wrap') wrap: ElementRef;
// @HostListener('window:resize', ['$event'])
@HostListener('window:resize', ['$event'])
onResize(event) {
this.g_winResizeEventStream.next();
}
g_winResizeEventStream = new Subject();
canvasWidth = 1280;
canvasHeight = 720;
......@@ -85,15 +90,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
changeTopSizeFlag = false;
changeRightSizeFlag = false;
hotZoneChanged = false;
scale = 1;
constructor() {
}
onResize(event) {
// this.winResizeEventStream.next();
constructor(private el:ElementRef) {
}
......@@ -209,17 +208,19 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
}
getHotZoneItem( saveData = null) {
getHotZoneItem( saveData = null, newRect?) {
const itemW = 200;
const itemH = 200;
const item = new HotZoneImageItem(this.ctx);
if(saveData){
item.init(saveData.media.image_url, (w, h)=>{
const saveRect = saveData.rect;
item.scaleX = saveData.rect.width / w;
item.scaleY = saveData.rect.height / h;
item.x = saveRect.x
item.y = saveRect.y
item.scaleX = (saveData.rect.width/saveData.scale) / w;
item.scaleY = (saveData.rect.height/saveData.scale) / h;
item.x = saveRect.x / saveData.scale + newRect.x
item.y = saveRect.y / saveData.scale + newRect.y
console.log(saveRect.x, saveRect.y, saveData.scale)
console.log(item.x, item.y, saveData.scale)
if(saveData.media.image_url.indexOf("bg_200_200") == -1){
item.image_url = saveData.media.image_url
}
......@@ -319,13 +320,14 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const arr = this.hotZoneItemArr.concat();
for (let i = 0; i < arr.length; i++) {
const data = JSON.parse(JSON.stringify(arr[i]));
console.log(rate)
data.rect.x *= rate;
data.rect.y *= rate;
data.rect.width *= rate;
data.rect.height *= rate;
data.rect.x += curBgRect.x;
data.rect.y += curBgRect.y;
const item = this.getHotZoneItem(data);
// data.rect.x += curBgRect.x;
// data.rect.y += curBgRect.y;
const item = this.getHotZoneItem(data, {x:curBgRect.x,y:curBgRect.y});
// c//onsole.log("初始化存储数据", data)
this.hotZoneArr.push(item);
}
......@@ -377,8 +379,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
initData() {
this.canvasWidth = 200; //this.wrap.nativeElement.clientWidth;
this.canvasHeight = 300;// = this.wrap.nativeElement.clientHeight;
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = (this.wrap.nativeElement.clientWidth/2)*3;
console.log(this.canvasWidth , this.canvasHeight )
this.scale = 200/ this.wrap.nativeElement.clientWidth
this.mapScale = this.canvasWidth / this.canvasBaseW;
this.renderArr = [];
this.bg = null;
......@@ -547,12 +551,17 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
renderAfterResize() {
let offsetWidth = this.el.nativeElement.querySelector('#canvas-container').offsetWidth
this.el.nativeElement.querySelector('#canvas-container').style.height = '' + offsetWidth/2*3 + 'px'
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.init();
}
initListener() {
this.g_winResizeEventStream.pipe(debounceTime(500)).subscribe(data => {
this.renderAfterResize();
});
if (this.IsPC()) {
this.canvas.nativeElement.addEventListener('mousedown', (event) => {
setMxMyByMouse(event);
......@@ -661,11 +670,16 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
index: hotZoneArr[i].index,
};
hotZoneItem['rect'] = hotZoneArr[i].getBoundingBox();
const currentX = hotZoneItem['rect'].x
const currentY = hotZoneItem['rect'].y
hotZoneItem['media'] = {}
hotZoneItem['rect'].x = Math.round( (hotZoneItem['rect'].x - bgItem['rect'].x) * 100) / 100;
hotZoneItem['rect'].y = Math.round( (hotZoneItem['rect'].y - bgItem['rect'].y) * 100) / 100;
hotZoneItem['rect'].width = Math.round( (hotZoneItem['rect'].width) * 100) / 100;
hotZoneItem['rect'].height = Math.round( (hotZoneItem['rect'].height) * 100) / 100;
hotZoneItem['scale'] = this.scale
console.log((Math.round( (currentX - bgItem['rect'].x) * 100) / 100) , (Math.round( (currentY- bgItem['rect'].y) * 100) / 100), this.scale)
hotZoneItem['rect'].x = (Math.round( (currentX - bgItem['rect'].x) * 100) / 100) * this.scale;
hotZoneItem['rect'].y = (Math.round( (currentY - bgItem['rect'].y) * 100) / 100) * this.scale;
console.log(hotZoneItem['rect'].x , hotZoneItem['rect'].y)
hotZoneItem['rect'].width = (Math.round( (hotZoneItem['rect'].width) * 100) / 100) * this.scale;
hotZoneItem['rect'].height = (Math.round( (hotZoneItem['rect'].height) * 100) / 100) * this.scale;
hotZoneItem['media'].image_url = hotZoneArr[i].image_url
hotZoneItem['media'].audio_url = hotZoneArr[i].audio_url?hotZoneArr[i].audio_url:""
hotZoneItem['media'].card_audio_url = hotZoneArr[i].card_audio_url?hotZoneArr[i].card_audio_url:""
......
......@@ -453,7 +453,7 @@ export class PlayComponent implements OnInit, OnDestroy {
element.ref.y = parent.originY + item.rect.y/parent.contentScale + (element.ref.height*element.ref.scaleY/2)
this.g_cartoon.getCartoonElement("quertion-image-container").ref.addChild(element.ref)
element.cardIndex = index;
element.ref.alpha = 0;
element.ref.alpha = 1;
element.card_audio = item.media.card_audio_url
element.currentClick = false;
element.isPlaced = false;
......
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