Commit 6f55fbcd authored by 李维's avatar 李维

dev commit

parent c32632dd
...@@ -375,44 +375,34 @@ export class HotZoneItem extends MySprite { ...@@ -375,44 +375,34 @@ export class HotZoneItem extends MySprite {
this.width = w; this.width = w;
this.height = h; this.height = h;
const rect = new ShapeRect(this.ctx); const rect = new ShapeRect(this.ctx);
rect.x = -w / 2; rect.x = -w / 2;
rect.y = -h / 2; rect.y = -h / 2;
rect.setSize(w, h); rect.setSize(w, h);
rect.fillColor = '#ffffff'; rect.fillColor = '#FFFFFF';
rect.alpha = 0.2; rect.alpha = 0.2;
this.addChild(rect); this.addChild(rect);
} }
showLabel(text = null) { showLabel(text = null) {
if (!this.label) { if (!this.label) {
this.label = new Label(this.ctx); this.label = new Label(this.ctx);
this.label.anchorY = 0; this.label.anchorY = 0;
this.label.fontSize = '40px'; this.label.fontSize = '40px';
this.label.textAlign = 'center'; this.label.textAlign = 'center';
this.addChild(this.label); this.addChild(this.label);
// this.label.scaleX = 1 / this.scaleX;
// this.label.scaleY = 1 / this.scaleY;
this.refreshLabelScale(); this.refreshLabelScale();
} }
if (text) { if (text) {
this.label.text = text; this.label.text = text;
} 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;
} }
hideLabel() { hideLabel() {
if (!this.label) { return; } if (!this.label) { return; }
this.label.visible = false; this.label.visible = false;
} }
...@@ -446,18 +436,14 @@ export class HotZoneItem extends MySprite { ...@@ -446,18 +436,14 @@ export class HotZoneItem extends MySprite {
this.arrowRight.load('assets/common/arrow_right.png', 1, 0.5); this.arrowRight.load('assets/common/arrow_right.png', 1, 0.5);
this.arrowRight.setScaleXY(0.06); this.arrowRight.setScaleXY(0.06);
} }
this.showLabel(); this.showLabel();
} }
hideLineDash() { hideLineDash() {
this.lineDashFlag = false; this.lineDashFlag = false;
if (this.arrow) { if (this.arrow) {
this.arrow.visible = false; this.arrow.visible = false;
} }
this.hideLabel(); this.hideLabel();
} }
...@@ -465,14 +451,11 @@ export class HotZoneItem extends MySprite { ...@@ -465,14 +451,11 @@ export class HotZoneItem extends MySprite {
drawArrow() { drawArrow() {
if (!this.arrow) { return; } if (!this.arrow) { return; }
const rect = this.getBoundingBox(); const rect = this.getBoundingBox();
this.arrow.x = rect.x + rect.width; this.arrow.x = rect.x + rect.width;
this.arrow.y = rect.y; this.arrow.y = rect.y;
this.arrow.update(); this.arrow.update();
this.arrowTop.x = rect.x + rect.width / 2; this.arrowTop.x = rect.x + rect.width / 2;
this.arrowTop.y = rect.y; this.arrowTop.y = rect.y;
this.arrowTop.update(); this.arrowTop.update();
...@@ -483,48 +466,212 @@ export class HotZoneItem extends MySprite { ...@@ -483,48 +466,212 @@ export class HotZoneItem extends MySprite {
} }
drawFrame() { drawFrame() {
this.ctx.save(); this.ctx.save();
const rect = this.getBoundingBox(); const rect = this.getBoundingBox();
const w = rect.width; const w = rect.width;
const h = rect.height; const h = rect.height;
const x = rect.x + w / 2; const x = rect.x + w / 2;
const y = rect.y + h / 2; const y = rect.y + h / 2;
this.ctx.setLineDash([5, 5]); this.ctx.setLineDash([5, 5]);
this.ctx.lineWidth = 2; this.ctx.lineWidth = 2;
this.ctx.strokeStyle = '#1bfff7'; this.ctx.strokeStyle = '#1bfff7';
// this.ctx.fillStyle = '#ffffff';
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.moveTo( x - w / 2, y - h / 2); this.ctx.moveTo( x - w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y - h / 2); this.ctx.lineTo(x + w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y + h / 2); this.ctx.lineTo(x + w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y + h / 2); this.ctx.lineTo(x - w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y - h / 2); this.ctx.lineTo(x - w / 2, y - h / 2);
// this.ctx.fill();
this.ctx.stroke(); this.ctx.stroke();
this.ctx.restore();
}
draw() {
super.draw();
if (this.lineDashFlag) {
this.drawFrame();
this.drawArrow();
}
}
}
export class HotZoneImageItem extends MySprite {
lineDashFlag = false;
arrow: MySprite;
label: Label;
image: MySprite;
imageSrc: String;
labelBox: MySprite;
scale
text;
arrowTop;
arrowRight;
init(imageSrc = null){
this.showImage(imageSrc,(img)=>{
console.log("Init")
this.setSize(img.width*this.image.scaleX, img.height*this.image.scaleY)
this.lineDashFlag = true;
this.showLineDash()
this.showLabel();
this.drawArrow()
})
}
setSize(w, h) {
this.width = w;
this.height = h;
}
showLabel(text = null) {
if (!this.label) {
this.labelBox = new MySprite(this.ctx);
this.labelBox.load('assets/default/bg_50_50.png').then(()=>{
this.labelBox.x = this.labelBox.width/2;
this.labelBox.y = this.labelBox.height/2;
});
this.label = new Label(this.ctx);
// this.label.anchorY = 0;
this.label.fontSize = '30px';
this.label.textAlign = 'center';
this.label.color = "#FFFFFF"
this.labelBox.addChild(this.label);
this.addChild(this.labelBox);
this.refreshLabelScale();
}
if (text) {
this.label.text = text;
} else if (this.text) {
this.label.text = this.text;
}
this.label.visible = true;
}
hideLabel() {
if (!this.label) { return; }
this.label.visible = false;
}
showImage(imageSrc = null, callback) {
this.loadImage(imageSrc).then((img)=>{
if(this.image){
this.removeChild(this.image)
}
this.image = new MySprite(this.ctx);
this.image.init(img)
let scale = Math.min(200/this.image.width, 200/this.image.height)
this.image.x = this.image.width*scale/2
this.image.y = this.image.height*scale/2
this.image.alpha = 0.7;
this.image.setScaleXY(scale);
this.addChild(this.image,-1);
this.imageSrc = img.src;
callback && callback(this.image)
})
}
loadImage(imageSrc = null){
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = imageSrc;
})
}
hideImage() {
if (!this.image) { return; }
this.image.visible = false;
}
refreshLabelScale() {
// console.log(this.labelBox.width)
this.labelBox.scaleX = 75 / (this.labelBox.width*this.image.scaleX)
// console.log(this.labelBox.width)
// if (this.scaleX == this.scaleY) {
// this.labelBox.setScaleXY(1);
// }
// if (this.scaleX > this.scaleY) {
// this.labelBox.scaleX = this.scaleY / this.scaleX;
// } else {
// this.labelBox.scaleY = this.scaleX / this.scaleY;
// }
}
showLineDash() {
if (this.arrow) {
this.arrow.visible = true;
} else {
this.arrow = new MySprite(this.ctx);
this.arrow.load('assets/common/arrow.png', 1, 0);
this.arrow.setScaleXY(0.06);
this.arrowTop = new MySprite(this.ctx);
this.arrowTop.load('assets/common/arrow_top.png', 0.5, 0);
this.arrowTop.setScaleXY(0.06);
this.arrowRight = new MySprite(this.ctx);
this.arrowRight.load('assets/common/arrow_right.png', 1, 0.5);
this.arrowRight.setScaleXY(0.06);
}
}
hideLineDash() {
this.lineDashFlag = false;
if (this.arrow) {
this.arrow.visible = false;
}
this.hideLabel();
}
drawArrow() {
if (!this.arrow) { return; }
const rect = this.getBoundingBox();
this.arrow.x = rect.x + rect.width;
this.arrow.y = rect.y;
this.arrow.update();
this.arrowTop.x = rect.x + rect.width / 2;
this.arrowTop.y = rect.y;
this.arrowTop.update();
this.arrowRight.x = rect.x + rect.width;
this.arrowRight.y = rect.y + rect.height / 2;
this.arrowRight.update();
}
drawFrame() {
this.ctx.save();
const rect = this.getBoundingBox();
const w = rect.width;
const h = rect.height;
const x = rect.x + w / 2;
const y = rect.y + h / 2;
this.ctx.setLineDash([5, 5]);
this.ctx.lineWidth = 2;
this.ctx.strokeStyle = '#1bfff7';
this.ctx.beginPath();
this.ctx.moveTo( x - w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y - h / 2);
this.ctx.stroke();
this.ctx.restore(); this.ctx.restore();
} }
draw() { draw() {
super.draw(); super.draw();
if (this.lineDashFlag) { if (this.lineDashFlag) {
this.drawFrame(); this.drawFrame();
this.drawArrow(); this.drawArrow();
...@@ -569,14 +716,12 @@ export class EditorItem extends MySprite { ...@@ -569,14 +716,12 @@ export class EditorItem extends MySprite {
showLineDash() { showLineDash() {
this.lineDashFlag = true; this.lineDashFlag = true;
if (this.arrow) { if (this.arrow) {
this.arrow.visible = true; this.arrow.visible = true;
} else { } else {
this.arrow = new MySprite(this.ctx); this.arrow = new MySprite(this.ctx);
this.arrow.load('assets/common/arrow.png', 1, 0); this.arrow.load('assets/common/arrow.png', 1, 0);
this.arrow.setScaleXY(0.06); this.arrow.setScaleXY(0.06);
} }
this.showLabel(); this.showLabel();
......
...@@ -37,12 +37,12 @@ ...@@ -37,12 +37,12 @@
</div> </div>
<!--<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.pic_url"
<!--(imageUploaded)="onImgUploadSuccessByImg($event, it)">--> (imageUploaded)="onImgUploadSuccessByImg($event, it, i)">
<!--</app-upload-image-with-preview>--> </app-upload-image-with-preview>
<!--</div>--> </div>
<!--<app-audio-recorder--> <!--<app-audio-recorder-->
......
import {Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, ViewChild} from '@angular/core'; import {Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, ViewChild} from '@angular/core';
import {Subject} from 'rxjs'; import {Subject} from 'rxjs';
import {debounceTime} from 'rxjs/operators'; import {debounceTime} from 'rxjs/operators';
import {EditorItem, HotZoneItem, Label, MySprite} from './Unit'; import {EditorItem, HotZoneImageItem, Label, MySprite} from './Unit';
import TWEEN from '@tweenjs/tween.js'; import TWEEN from '@tweenjs/tween.js';
...@@ -134,18 +134,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -134,18 +134,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
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(() => {
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);
bg.setScaleXY(rate); bg.setScaleXY(rate);
bg.x = this.canvasWidth / 2; bg.x = this.canvasWidth / 2;
bg.y = this.canvasHeight / 2; bg.y = this.canvasHeight / 2;
if (callBack) { if (callBack) {
callBack(); callBack();
} }
...@@ -156,39 +151,31 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -156,39 +151,31 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
addBtnClick() { addBtnClick() {
// this.imgArr.push({});
// this.hotZoneArr.push({});
const item = this.getHotZoneItem(); const item = this.getHotZoneItem();
this.hotZoneArr.push(item); this.hotZoneArr.push(item);
this.refreshHotZoneId(); this.refreshHotZoneId();
console.log('hotZoneArr:', this.hotZoneArr); console.log('hotZoneArr:', this.hotZoneArr);
} }
onImgUploadSuccessByImg(e, img) { onImgUploadSuccessByImg(e, img, index) {
// console.log()
this.hotZoneArr[index].init(e.url)
img.pic_url = e.url; img.pic_url = e.url;
this.refreshImage (img); this.refreshImage (img);
} }
refreshImage(img) { refreshImage(img) {
this.hideAllLineDash(); this.hideAllLineDash();
img.picItem = this.getPicItem(img); img.picItem = this.getPicItem(img);
this.refreshImageId(); this.refreshImageId();
} }
refreshHotZoneId() { refreshHotZoneId() {
for (let i = 0; i < this.hotZoneArr.length; i++) { for (let i = 0; i < this.hotZoneArr.length; i++) {
this.hotZoneArr[i].index = i; this.hotZoneArr[i].index = i;
if (this.hotZoneArr[i]) { if (this.hotZoneArr[i]) {
this.hotZoneArr[i].text = 'item-' + (i + 1); this.hotZoneArr[i].text = (i + 1);
} }
} }
...@@ -207,41 +194,35 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -207,41 +194,35 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
getHotZoneItem( saveData = null) { getHotZoneItem( saveData = null) {
const itemW = 200; const itemW = 200;
const itemH = 200; const itemH = 200;
const item = new HotZoneItem(this.ctx); const item = new HotZoneImageItem(this.ctx);
item.setSize(itemW, itemH); if(saveData){
item.init(saveData.rect.src);
}else{
item.init("assets/default/bg_200_200.png");
}
item.anchorX = 0.5; item.anchorX = 0.5;
item.anchorY = 0.5; item.anchorY = 0.5;
item.x = this.canvasWidth / 2; item.x = this.canvasWidth / 2 - 100;
item.y = this.canvasHeight / 2; item.y = this.canvasHeight / 2 - 100;
if (saveData) { if (saveData) {
const saveRect = saveData.rect; const saveRect = saveData.rect;
item.scaleX = saveRect.width / item.width; item.scaleX = saveRect.width / item.width;
item.scaleY = saveRect.height / item.height; item.scaleY = saveRect.height / item.height;
item.x = saveRect.x + saveRect.width / 2 ; item.x = saveRect.x + saveRect.width / 2 ;
item.y = saveRect.y + saveRect.height / 2; item.y = saveRect.y + saveRect.height / 2;
} }
item.showLineDash();
return item; return item;
} }
getPicItem(img, saveData = null) { getPicItem(img, saveData = null) {
const item = new EditorItem(this.ctx); const item = new EditorItem(this.ctx);
item.load(img.pic_url).then( img => { item.load(img.pic_url).then( img => {
let maxW, maxH; let maxW, maxH;
if (this.bg) { if (this.bg) {
maxW = this.bg.width * this.bg.scaleX; maxW = this.bg.width * this.bg.scaleX;
...@@ -250,10 +231,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -250,10 +231,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
maxW = this.canvasWidth; maxW = this.canvasWidth;
maxH = this.canvasHeight; maxH = this.canvasHeight;
} }
let scaleX = maxW / 3 / item.width; let scaleX = maxW / 3 / item.width;
let scaleY = maxH / 3 / item.height; let scaleY = maxH / 3 / item.height;
if (item.height * scaleX < this.canvasHeight) { if (item.height * scaleX < this.canvasHeight) {
item.setScaleXY(scaleX); item.setScaleXY(scaleX);
} else { } else {
...@@ -261,14 +240,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -261,14 +240,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
item.x = this.canvasWidth / 2; item.x = this.canvasWidth / 2;
item.y = this.canvasHeight / 2; item.y = this.canvasHeight / 2;
if (saveData) { if (saveData) {
const saveRect = saveData.rect; const saveRect = saveData.rect;
item.setScaleXY(saveRect.width / item.width); item.setScaleXY(saveRect.width / item.width);
item.x = saveRect.x + saveRect.width / 2 ; item.x = saveRect.x + saveRect.width / 2 ;
item.y = saveRect.y + saveRect.height / 2; item.y = saveRect.y + saveRect.height / 2;
} else { } else {
item.showLineDash(); item.showLineDash();
} }
...@@ -283,24 +259,15 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -283,24 +259,15 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
deleteItem(e, i) { deleteItem(e, i) {
// this.imgArr.splice(i , 1);
// this.refreshImageId();
this.hotZoneArr.splice(i, 1); this.hotZoneArr.splice(i, 1);
this.refreshHotZoneId(); this.refreshHotZoneId();
} }
init() { init() {
this.initData(); this.initData();
this.initCtx(); this.initCtx();
this.initItem(); this.initItem();
} }
...@@ -309,73 +276,43 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -309,73 +276,43 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.bgItem = {}; this.bgItem = {};
} else { } else {
this.refreshBackground(() => { this.refreshBackground(() => {
// if (!this.imgItemArr) {
// this.imgItemArr = [];
// } else {
// this.initImgArr();
// }
// console.log('aaaaa');
if (!this.hotZoneItemArr) { if (!this.hotZoneItemArr) {
this.hotZoneItemArr = []; this.hotZoneItemArr = [];
} else { } else {
this.initHotZoneArr(); this.initHotZoneArr();
} }
}); });
} }
} }
initHotZoneArr() { initHotZoneArr() {
// console.log('this.hotZoneArr: ', this.hotZoneArr);
let curBgRect; let curBgRect;
if (this.bg) { if (this.bg) {
curBgRect = this.bg.getBoundingBox(); curBgRect = this.bg.getBoundingBox();
} else { } else {
curBgRect = {x: 0, y: 0, width: this.canvasWidth, height: this.canvasHeight}; curBgRect = {x: 0, y: 0, width: this.canvasWidth, height: this.canvasHeight};
} }
let oldBgRect = this.bgItem.rect; let oldBgRect = this.bgItem.rect;
if (!oldBgRect) { if (!oldBgRect) {
oldBgRect = curBgRect; oldBgRect = curBgRect;
} }
const rate = curBgRect.width / oldBgRect.width; const rate = curBgRect.width / oldBgRect.width;
console.log('rate: ', rate);
this.hotZoneArr = []; this.hotZoneArr = [];
const arr = this.hotZoneItemArr.concat(); const arr = this.hotZoneItemArr.concat();
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
const data = JSON.parse(JSON.stringify(arr[i])); const data = JSON.parse(JSON.stringify(arr[i]));
// const img = {pic_url: data.pic_url};
data.rect.x *= rate; data.rect.x *= rate;
data.rect.y *= rate; data.rect.y *= rate;
data.rect.width *= rate; data.rect.width *= rate;
data.rect.height *= rate; data.rect.height *= rate;
data.rect.x += curBgRect.x; data.rect.x += curBgRect.x;
data.rect.y += curBgRect.y; data.rect.y += curBgRect.y;
const item = this.getHotZoneItem(data);
// img['picItem'] = this.getPicItem(img, data); console.log("初始化存储数据", data)
// img['audio_url'] = arr[i].audio_url;
// this.imgArr.push(img);
const item = this.getHotZoneItem( data);
console.log('item: ', item);
this.hotZoneArr.push(item); this.hotZoneArr.push(item);
} }
this.refreshHotZoneId(); this.refreshHotZoneId();
// this.refreshImageId();
} }
...@@ -424,13 +361,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -424,13 +361,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
initData() { initData() {
this.canvasWidth = this.wrap.nativeElement.clientWidth; this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight; this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.mapScale = this.canvasWidth / this.canvasBaseW; this.mapScale = this.canvasWidth / this.canvasBaseW;
this.renderArr = []; this.renderArr = [];
this.bg = null; this.bg = null;
this.imgArr = []; this.imgArr = [];
this.hotZoneArr = []; this.hotZoneArr = [];
} }
...@@ -443,17 +378,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -443,17 +378,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
mapDown(event) { mapDown(event) {
this.oldPos = {x: this.mx, y: this.my}; this.oldPos = {x: this.mx, y: this.my};
const arr = this.hotZoneArr; const arr = this.hotZoneArr;
for (let i = arr.length - 1; i >= 0 ; i--) { for (let i = arr.length - 1; i >= 0 ; i--) {
const item = arr[i]; const item = arr[i];
if (item) { if (item) {
if (this.checkClickTarget(item)) { if (this.checkClickTarget(item)) {
if (item.lineDashFlag && this.checkClickTarget(item.arrow)) { if (item.lineDashFlag && this.checkClickTarget(item.arrow)) {
this.changeItemSize(item); this.changeItemSize(item);
} else if (item.lineDashFlag && this.checkClickTarget(item.arrowTop)) { } else if (item.lineDashFlag && this.checkClickTarget(item.arrowTop)) {
...@@ -467,9 +397,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -467,9 +397,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
} }
} }
// this.hideAllLineDash();
} }
mapMove(event) { mapMove(event) {
...@@ -507,76 +434,48 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -507,76 +434,48 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
changeSize() { changeSize() {
const rect = this.curItem.getBoundingBox(); const rect = this.curItem.getBoundingBox();
let distance = this.my - rect.y;
let lenW = ( this.mx - (rect.x + rect.width / 2) ) * 2; let lenW = this.mx - rect.x;
let lenH = ( (rect.y + rect.height / 2) - this.my ) * 2; let lenH = rect.height - distance
let minLen = 20; let minLen = 20;
let s; let sx,sy;
if (lenW < lenH) { if (lenW < minLen) {
if (lenW < minLen) { lenW = minLen;
lenW = minLen;
}
s = lenW / this.curItem.width;
} else {
if (lenH < minLen) {
lenH = minLen;
}
s = lenH / this.curItem.height;
} }
sx = lenW / this.curItem.width;
if (lenH < minLen) {
// console.log('s: ', s); lenH = minLen;
this.curItem.setScaleXY(s); }
this.curItem.refreshLabelScale(); sy = lenH / this.curItem.height;
this.curItem.y = this.curItem.y + distance
this.curItem.scaleX = sx;
this.curItem.scaleY = sy;
} }
changeTopSize() { changeTopSize() {
const rect = this.curItem.getBoundingBox(); const rect = this.curItem.getBoundingBox();
let lenH = rect.y - this.my + rect.height;
// let lenW = ( this.mx - (rect.x + rect.width / 2) ) * 2; this.curItem.y = this.my
let lenH = ( (rect.y + rect.height / 2) - this.my ) * 2;
let minLen = 20; let minLen = 20;
let s; let s;
// if (lenW < lenH) { if (lenH < minLen) {
// if (lenW < minLen) { lenH = minLen;
// lenW = minLen; }
// } s = lenH / this.curItem.height;
// s = lenW / this.curItem.width; this.curItem.setScaleXY(s);
//
// } else {
if (lenH < minLen) {
lenH = minLen;
}
s = lenH / this.curItem.height;
// }
// console.log('s: ', s);
this.curItem.scaleY = s;
this.curItem.refreshLabelScale();
} }
changeRightSize() { changeRightSize() {
const rect = this.curItem.getBoundingBox(); const rect = this.curItem.getBoundingBox();
let lenW = this.mx - rect.x;
let lenW = ( this.mx - (rect.x + rect.width / 2) ) * 2;
// let lenH = ( (rect.y + rect.height / 2) - this.my ) * 2;
let minLen = 20; let minLen = 20;
let s; let s;
if (lenW < minLen) { if (lenW < minLen) {
lenW = minLen; lenW = minLen;
} }
s = lenW / this.curItem.width; s = lenW / this.curItem.width;
this.curItem.setScaleXY(s);
this.curItem.scaleX = s;
this.curItem.refreshLabelScale();
} }
changeItemSize(item) { changeItemSize(item) {
...@@ -613,27 +512,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -613,27 +512,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
update() { update() {
this.animationId = window.requestAnimationFrame(this.update.bind(this)); this.animationId = window.requestAnimationFrame(this.update.bind(this));
// 清除画布内容 // 清除画布内容
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight); this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
for (let i = 0; i < this.renderArr.length; i++) { for (let i = 0; i < this.renderArr.length; i++) {
this.renderArr[i].update(this); this.renderArr[i].update(this);
} }
// for (let i = 0; i < this.imgArr.length; i++) {
// const picItem = this.imgArr[i].picItem;
// if (picItem) {
// picItem.update(this);
// }
// }
this.updateArr(this.hotZoneArr); this.updateArr(this.hotZoneArr);
TWEEN.update(); TWEEN.update();
} }
...@@ -645,8 +530,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -645,8 +530,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
} }
renderAfterResize() { renderAfterResize() {
this.canvasWidth = this.wrap.nativeElement.clientWidth; this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight; this.canvasHeight = this.wrap.nativeElement.clientHeight;
...@@ -654,15 +537,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -654,15 +537,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
initListener() { initListener() {
// this.winResizeEventStream
// .pipe(debounceTime(500))
// .subscribe(data => {
// this.renderAfterResize();
// });
if (this.IsPC()) { if (this.IsPC()) {
this.canvas.nativeElement.addEventListener('mousedown', (event) => { this.canvas.nativeElement.addEventListener('mousedown', (event) => {
setMxMyByMouse(event); setMxMyByMouse(event);
this.mapDown(event); this.mapDown(event);
...@@ -710,18 +585,14 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -710,18 +585,14 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
if (event.touches.length <= 0) { if (event.touches.length <= 0) {
return; return;
} }
if (this.canvasLeft == null) { if (this.canvasLeft == null) {
setParentOffset(); setParentOffset();
} }
this.mx = event.touches[0].pageX - this.canvasLeft; this.mx = event.touches[0].pageX - this.canvasLeft;
this.my = event.touches[0].pageY - this.canvasTop; this.my = event.touches[0].pageY - this.canvasTop;
}; };
const setParentOffset = () => { const setParentOffset = () => {
const rect = this.canvas.nativeElement.getBoundingClientRect(); const rect = this.canvas.nativeElement.getBoundingClientRect();
this.canvasLeft = rect.left; this.canvasLeft = rect.left;
this.canvasTop = rect.top; this.canvasTop = rect.top;
...@@ -761,6 +632,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -761,6 +632,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
saveClick() { saveClick() {
const bgItem = this.bgItem; const bgItem = this.bgItem;
if (this.bg) { if (this.bg) {
bgItem['rect'] = this.bg.getBoundingBox(); bgItem['rect'] = this.bg.getBoundingBox();
...@@ -768,26 +640,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -768,26 +640,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
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};
} }
// const imgItemArr = [];
// const imgArr = this.imgArr;
// for (let i = 0; i < imgArr.length; i++) {
//
// const imgItem = {
// id: imgArr[i].id,
// pic_url: imgArr[i].pic_url,
// audio_url: imgArr[i].audio_url,
// };
// if (imgArr[i].picItem) {
// imgItem['rect'] = imgArr[i].picItem.getBoundingBox();
// imgItem['rect'].x -= bgItem['rect'].x;
// imgItem['rect'].y -= bgItem['rect'].y;
// }
// imgItemArr.push(imgItem);
// }
const hotZoneItemArr = []; const hotZoneItemArr = [];
const hotZoneArr = this.hotZoneArr; const hotZoneArr = this.hotZoneArr;
for (let i = 0; i < hotZoneArr.length; i++) { for (let i = 0; i < hotZoneArr.length; i++) {
...@@ -800,12 +652,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -800,12 +652,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
hotZoneItem['rect'].y = Math.round( (hotZoneItem['rect'].y - bgItem['rect'].y) * 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'].width = Math.round( (hotZoneItem['rect'].width) * 100) / 100;
hotZoneItem['rect'].height = Math.round( (hotZoneItem['rect'].height) * 100) / 100; hotZoneItem['rect'].height = Math.round( (hotZoneItem['rect'].height) * 100) / 100;
hotZoneItem['rect'].src = hotZoneArr[i].imageSrc
hotZoneItemArr.push(hotZoneItem); hotZoneItemArr.push(hotZoneItem);
} }
console.log('hotZoneItemArr: ', hotZoneItemArr);
this.save.emit({bgItem, hotZoneItemArr}); this.save.emit({bgItem, hotZoneItemArr});
} }
} }
<div class="model-content"> <div class="model-content">
<div class="card-config"> <div class="card-config">
<div *ngFor="let item of dataArray; let i = index" class="card-item" style="padding: 0.5vw;" > <div class="card-item">
<div class="card-item-content border"> <div class="border">
<div class="card-item-content"> <div class="card-item-content">
<div class="title" > <div class="title">选区设置</div>
第-<strong>{{ i + 1 }}</strong>-题 <div class="section">
<app-custom-hot-zone
[bgItem]="bgItem"
[hotZoneItemArr]="hotZoneItemArr"
(save)="saveData($event)"
></app-custom-hot-zone>
</div> </div>
</div>
<div class="section" > </div>
<div class="section-title" > </div>
问题 <div class="card-item">
</div> <div class="border">
<div class="section-content"> <div class="card-item-content">
<div style="flex:1"> <div class="title">题目设置</div>
<div style="display: flex; margin-bottom: 10px;"> <div class="section">
<div style="flex:1"> <div></div>
文字 <app-audio-recorder></app-audio-recorder>
</div> <!-- <div style="display: flex; margin-bottom: 10px;">
<div style="flex:5">
<input type="text" nz-input placeholder="" [(ngModel)]="item.question.text" (blur)="saveItem()" style="width: 250px;" />
</div>
</div>
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
音频
</div>
<div style="flex:5">
<app-audio-recorder [audioUrl]="item.question.audio_url" (audioUploaded)="onAudioUploadSuccessByItem($event, item.question)" ></app-audio-recorder>
</div>
</div>
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
时间
</div>
<div style="flex:5">
<input type="text" nz-input placeholder="" [(ngModel)]="item.time" (blur)="saveItem()" style="width: 80px;" /><span style="margin-left: 10px;"></span>
</div>
</div>
</div>
<div style="flex:1"> <div style="flex:1">
<div style="display: flex; "> 音频
<div style="flex:1">
图片
</div>
<div style="flex:5">
<app-upload-image-with-preview style="width: 100%;" [picUrl]="item.question.image_url" (imageUploaded)="onImageUploadSuccessByItem($event, item.question)"></app-upload-image-with-preview>
</div>
</div>
</div>
</div>
</div>
<div class="section" >
<div class="section-title" >
正确选项
</div>
<div class="section-content">
<div style="flex:10">
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
文字
</div>
<div style="flex:5">
<input type="text" nz-input placeholder="" [(ngModel)]="item.choice.correct.text" (blur)="saveItem()" />
</div>
</div>
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
图片
</div>
<div style="flex:5">
<app-upload-image-with-preview style="width: 100%;" [picUrl]="item.choice.correct.image_url" (imageUploaded)="onImageUploadSuccessByItem($event, item.choice.correct)"></app-upload-image-with-preview>
</div>
</div>
<div style="display: flex; ">
<div style="flex:2">
显示选项
</div>
<div style="flex:4">
<nz-radio-group [(ngModel)]="item.choice.correct.isText" (ngModelChange)="saveItem()" >
<label nz-radio [nzValue]="true">文字</label>
<label nz-radio [nzValue]="false">图片</label>
</nz-radio-group>
</div>
</div>
</div>
<div style="flex:20">
</div> </div>
</div> <div style="flex:5">
<app-audio-recorder></app-audio-recorder>
</div>
</div> -->
</div> </div>
<div class="section" > <div class="section">
<div class="section-title" >
错误选项
<div *ngIf="item.choice.incorrect.length<3" style="text-align: center; float: right;">
<button nz-button nzType="primary" (click)="addChoice(i)" >
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
添加
</button>
</div>
</div>
<div class="section-content">
<div *ngFor="let choiceItem of item.choice.incorrect; let choiceIndex = index" style="width:220px; height:230px; border:1px solid #CCC; padding:5px; border-radius: 5px; margin: 0 10px;">
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
文字
</div>
<div style="flex:5">
<input type="text" nz-input placeholder="" [(ngModel)]="choiceItem.text" (blur)="saveItem()" />
</div>
</div>
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
图片
</div>
<div style="flex:5">
<app-upload-image-with-preview style="width: 100%;" [picUrl]="choiceItem.image_url" (imageUploaded)="onImageUploadSuccessByItem($event, choiceItem)"></app-upload-image-with-preview>
</div>
</div>
<div style="display: flex; ">
<div style="flex:2">
显示选项
</div>
<div style="flex:4">
<nz-radio-group [(ngModel)]="choiceItem.isText" (ngModelChange)="saveItem()" >
<label nz-radio [nzValue]="true">文字</label>
<label nz-radio [nzValue]="false">图片</label>
</nz-radio-group>
</div>
</div>
<div *ngIf="choiceIndex>0" style="text-align: center;">
<button style="margin-top: 10px;" nz-button nzType="danger" (click)="deleteChoice(i, choiceIndex)" >
<span>删除此选项</span>
</button>
</div>
</div>
</div>
</div>
<div class="section" >
<div style="text-align: right; padding-right: 20px;">
<button style="margin-bottom: 10px;" nz-button nzType="danger" (click)="deleteItem(i)" >
<span>删除本题</span>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="card-item" style="padding: 0.5vw;" >
<button nz-button nzType="primary" class="add-btn" (click)="addItem()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
新建卡片组
</button>
</div>
</div> </div>
</div> </div>
@import "../style/common_mixin"; @import "../style/common_mixin";
.model-content { .model-content {
margin: 10px;
.card-config { .card-config {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin-left: 10px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
box-sizing: border-box;
flex-direction:column;
.card-item{ .card-item{
flex:1; flex:1;
margin-bottom: 40px;
.border { .border {
border-radius: 20px; border-radius: 20px;
border-style: dashed; border-style: dashed;
padding:20px; padding:20px;
width: 800px; width: 100%;
} }
.card-item-content{ .card-item-content{
.title { .title {
......
...@@ -8,9 +8,12 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -8,9 +8,12 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
dataArray = []; _item: any;
_item: any; dataArray: Array<Object> = [];
KEY = 'DataKey_MultipleChoice'; hotZoneItemArr: Array<Object> = [];
bgItem: Object;
KEY = 'DataKey_PicturePuzzle';
set item(item) { set item(item) {
this._item = item; this._item = item;
...@@ -30,6 +33,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -30,6 +33,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item.contentObj = {}; this.item.contentObj = {};
const getData = (<any> window).courseware.getData; const getData = (<any> window).courseware.getData;
getData((data) => { getData((data) => {
console.log("读取数据", data)
if (data) { if (data) {
this.item = data; this.item = data;
} else { } else {
...@@ -40,7 +44,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -40,7 +44,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
this.init(); this.init();
this.refresh(); this.refresh();
this.saveItem(); // this.saveItem();
}, this.KEY); }, this.KEY);
} }
ngOnChanges() { ngOnChanges() {
...@@ -50,6 +54,16 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -50,6 +54,16 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
ngOnDestroy() { ngOnDestroy() {
} }
saveData(e){
console.log("HotZone保存", e)
this.bgItem = e.bgItem;
this.hotZoneItemArr.length = 0;
e.hotZoneItemArr.forEach(item => {
console.log(item)
this.hotZoneItemArr.push(item)
});
this.save();
}
init() { init() {
if (this.item.contentObj.dataArray) { if (this.item.contentObj.dataArray) {
...@@ -58,24 +72,27 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -58,24 +72,27 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.dataArray = this.getDefaultPicArr(); this.dataArray = this.getDefaultPicArr();
this.item.contentObj.dataArray = this.dataArray; this.item.contentObj.dataArray = this.dataArray;
} }
if (this.item.contentObj.hotZoneItemArr) {
this.hotZoneItemArr = this.item.contentObj.hotZoneItemArr;
} else {
this.hotZoneItemArr = this.getDefaultPicArr();
this.item.contentObj.hotZoneItemArr = this.hotZoneItemArr;
}
if (this.item.contentObj.bgItem) {
this.bgItem = this.item.contentObj.bgItem;
} else {
this.bgItem = {}
this.item.contentObj.bgItem = this.bgItem;
}
} }
cardItemData(){ cardItemData(){
return { return {
time: 3, audio_url: "",
question:{ image_url: "",
text:"", hotZoneIndex: -1
image_url:"",
audio_url:""
},
choice:{
correct:{ isText: true, text: "", image_url: "" },
incorrect:[
{ isText: true, text: "", image_url: "" },
{ isText: true, text: "", image_url: "" },
{ isText: true, text: "", image_url: "" },
]
}
}; };
} }
...@@ -88,23 +105,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -88,23 +105,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
return arr; return arr;
} }
initData() { initData() {
}
deleteItem(index) {
if (index !== -1) {
this.dataArray.splice(index, 1);
}
this.save();
}
deleteChoice(questionIndex, choiceIndex){
if (questionIndex !== -1 && choiceIndex !== -1) {
this.dataArray[questionIndex].choice.incorrect.splice(choiceIndex, 1);
}
this.save();
} }
addChoice(questionIndex) { addChoice(questionIndex) {
let item = this.cardChoiceData(); let item = this.cardChoiceData();
this.dataArray[questionIndex].choice.incorrect.push(item); this.dataArray[questionIndex].choice.incorrect.push(item);
...@@ -120,10 +125,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -120,10 +125,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
item.audio_url = e.url; item.audio_url = e.url;
this.save(); this.save();
} }
onTitleAudioUploadSuccess(e) { onTitleAudioUploadSuccess(e) {
this.item.contentObj.titleAudio_url = e.url; this.item.contentObj.titleAudio_url = e.url;
this.save(); this.save();
} }
addItem() { addItem() {
let item = this.cardItemData(); let item = this.cardItemData();
this.dataArray.push(item); this.dataArray.push(item);
...@@ -132,7 +139,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -132,7 +139,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
radioClick(it, radioValue) { radioClick(it, radioValue) {
it.radioValue = radioValue; it.radioValue = radioValue;
this.saveItem(); this.saveItem();
} }
...@@ -140,7 +146,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -140,7 +146,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.saveItem(); this.saveItem();
} }
saveItem() { saveItem() {
this.save(); this.save();
} }
...@@ -148,7 +153,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -148,7 +153,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
save() { save() {
(<any> window).courseware.setData(this.item, null, this.KEY); (<any> window).courseware.setData(this.item, null, this.KEY);
this.refresh(); this.refresh();
console.log(this.item) console.log("保存", this.item)
} }
refresh() { refresh() {
...@@ -156,6 +161,5 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -156,6 +161,5 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.appRef.tick(); this.appRef.tick();
}, 1); }, 1);
} }
} }
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