Commit 63cb61e5 authored by 李维's avatar 李维

添加微调模式

可以设定具体的热区位置和大小数字
parent f75b271b
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<div class="p-image-children-editor">
<div class="p-image-children-editor" style="position: relative;">
<h5 style="margin-left: 2.5%;"> preview: </h5>
......@@ -84,7 +84,7 @@
<nz-divider></nz-divider>
<div class="save-box">
<label nz-checkbox [(ngModel)]="inAdjustMode">微调模式</label>
<button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round"
(click)="saveClick()" >
<i nz-icon nzType="save"></i>
......@@ -93,6 +93,31 @@
</div>
<div *ngIf="inAdjustMode" style="position: absolute; top: 0; right: 10px; width: 150px; height: 300px; background-color: #EEE;">
<p style="padding-left: 20px; position: relative; height: 32px; text-align: center;">
<span style="position: absolute; left: 5px; height: 32px; line-height: 32px;">名称:</span>
<input type="text" nz-input [(ngModel)]="currentSetting.itemName" style="display: inline-block; width: 100px;">
</p>
<p style="padding-left: 20px; position: relative; height: 32px; text-align: center;">
<span style="position: absolute; left: 5px; height: 32px; line-height: 32px;">宽:</span>
<input type="text" nz-input [(ngModel)]="currentSetting.width" style="display: inline-block; width: 100px;">
</p>
<p style="padding-left: 20px; position: relative; height: 32px; text-align: center;">
<span style="position: absolute; left: 5px; height: 32px; line-height: 32px;">高:</span>
<input type="text" nz-input [(ngModel)]="currentSetting.height" style="display: inline-block; width: 100px;">
</p>
<p style="padding-left: 20px; position: relative; height: 32px; text-align: center;">
<span style="position: absolute; left: 5px; height: 32px; line-height: 32px;">x:</span>
<input type="text" nz-input [(ngModel)]="currentSetting.x" style="display: inline-block; width: 100px;">
</p>
<p style="padding-left: 20px; position: relative; height: 32px; text-align: center;">
<span style="position: absolute; left: 5px; height: 32px; line-height: 32px;">y:</span>
<input type="text" nz-input [(ngModel)]="currentSetting.y" style="display: inline-block; width: 100px;">
</p>
<p style="padding-left: 20px; position: relative; height: 32px; text-align: center;">
<button nz-button nzSize="mini" (click)="handleClickUpdateHotZoneParams()" nzType="primary">更新</button>
</p>
</div>
</div>
......
......@@ -63,18 +63,14 @@
.save-box {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 20px;
.save-btn {
width: 160px;
height: 40px;
//margin-top: 20px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
......
......@@ -34,6 +34,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
hotZoneArr = null;
@Output()
save = new EventEmitter();
@ViewChild('canvas', {static: true}) canvas: ElementRef;
@ViewChild('wrap', {static: true}) wrap: ElementRef;
......@@ -87,6 +88,19 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
changeTopSizeFlag = false;
changeRightSizeFlag = false;
// 微调模式
inAdjustMode = false;
// 当前微调的对象
currentSetting = {
index: -1,
itemName: "",
x: 0,
y: 0,
width: 0,
height: 0,
}
constructor() {
}
......@@ -569,14 +583,14 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.changeRightSizeFlag = false;
}
changeSize() {
console.log(this.curItem.width, this.curItem.height)
const rect = this.curItem.getBoundingBox();
let lenW = (this.mx - (rect.x + rect.width / 2)) * 2;
let lenH = ((rect.y + rect.height / 2) - this.my) * 2;
console.log(lenW, lenH)
let minLen = 20;
let s;
if (lenW < lenH) {
......@@ -595,6 +609,20 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.curItem.refreshLabelScale();
}
setCurItemSize(size) {
console.log(size, this.curItem)
const curItem = this.hotZoneArr[size.index]
let sx = size.width / curItem.width;
let sy = size.height / curItem.height;
curItem.scaleX = sx;
curItem.scaleY = sy;
curItem.x = Number(size.x) + size.width / 2;
curItem.y = Number(size.y) + size.height / 2;
curItem.refreshLabelScale();
}
changeTopSize() {
const rect = this.curItem.getBoundingBox();
......@@ -915,19 +943,41 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
private clickedHotZoneRect(item: any) {
if (this.checkClickTarget(item)) {
if (item.lineDashFlag && this.checkClickTarget(item.arrow)) {
if (!this.inAdjustMode && item.lineDashFlag && this.checkClickTarget(item.arrow)) {
this.changeItemSize(item);
} else if (item.lineDashFlag && this.checkClickTarget(item.arrowTop)) {
} else if (!this.inAdjustMode && item.lineDashFlag && this.checkClickTarget(item.arrowTop)) {
this.changeItemTopSize(item);
} else if (item.lineDashFlag && this.checkClickTarget(item.arrowRight)) {
} else if (!this.inAdjustMode && item.lineDashFlag && this.checkClickTarget(item.arrowRight)) {
this.changeItemRightSize(item);
} else {
this.changeCurItem(item);
const bd = item.getBoundingBox()
const rectParams = {
index: item.index,
itemName: item.itemName,
x: bd.x,
y: bd.y,
width: bd.width,
height: bd.height,
}
this.currentSetting = rectParams;
}
return;
}
}
// 处理微调更新热区位置参数
handleClickUpdateHotZoneParams() {
this.setCurItemSize({
index: this.currentSetting.index,
itemName: this.currentSetting.itemName,
x: this.currentSetting.x,
y: this.currentSetting.y,
width: this.currentSetting.width,
height: this.currentSetting.height,
})
}
private clickedHotZonePic(item: any) {
if (this.checkClickTarget(item)) {
this.curItem = item;
......
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