|
@@ -86,8 +86,8 @@ export default {
|
|
getMax(arr) {
|
|
getMax(arr) {
|
|
return Math.max.apply(null, arr);
|
|
return Math.max.apply(null, arr);
|
|
},
|
|
},
|
|
- toFixed(num) {
|
|
|
|
- return num.toFixed(2) * 1;
|
|
|
|
|
|
+ toFixed(num, precision = 2) {
|
|
|
|
+ return num.toFixed(precision) * 1;
|
|
},
|
|
},
|
|
imgLoad() {
|
|
imgLoad() {
|
|
this.transformPicConfig(this.paper.areas);
|
|
this.transformPicConfig(this.paper.areas);
|
|
@@ -123,14 +123,8 @@ export default {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
transformPicConfig(areas) {
|
|
transformPicConfig(areas) {
|
|
- const {
|
|
|
|
- naturalWidth,
|
|
|
|
- naturalHeight,
|
|
|
|
- clientWidth,
|
|
|
|
- clientHeight
|
|
|
|
- } = this.$refs.imgDom;
|
|
|
|
- const hRate = clientHeight / naturalHeight;
|
|
|
|
- const wRate = clientWidth / naturalWidth;
|
|
|
|
|
|
+ const { clientWidth, clientHeight } = this.$refs.imgDom;
|
|
|
|
+
|
|
this.areas = areas.map((area, index) => {
|
|
this.areas = areas.map((area, index) => {
|
|
let narea = {
|
|
let narea = {
|
|
id: `id-${randomCode()}`,
|
|
id: `id-${randomCode()}`,
|
|
@@ -148,10 +142,10 @@ export default {
|
|
} else {
|
|
} else {
|
|
narea = {
|
|
narea = {
|
|
...narea,
|
|
...narea,
|
|
- x: area.x * wRate,
|
|
|
|
- y: area.y * hRate,
|
|
|
|
- w: area.w * wRate,
|
|
|
|
- h: area.h * hRate
|
|
|
|
|
|
+ x: area.x * clientWidth,
|
|
|
|
+ y: area.y * clientHeight,
|
|
|
|
+ w: area.w * clientWidth,
|
|
|
|
+ h: area.h * clientHeight
|
|
};
|
|
};
|
|
}
|
|
}
|
|
return narea;
|
|
return narea;
|
|
@@ -191,22 +185,15 @@ export default {
|
|
if (area.id !== this.curArea.id) this.curArea = {};
|
|
if (area.id !== this.curArea.id) this.curArea = {};
|
|
},
|
|
},
|
|
emitChange() {
|
|
emitChange() {
|
|
- const {
|
|
|
|
- naturalWidth,
|
|
|
|
- naturalHeight,
|
|
|
|
- clientWidth,
|
|
|
|
- clientHeight
|
|
|
|
- } = this.$refs.imgDom;
|
|
|
|
- const hRate = naturalHeight / clientHeight;
|
|
|
|
- const wRate = naturalWidth / clientWidth;
|
|
|
|
|
|
+ const { clientWidth, clientHeight } = this.$refs.imgDom;
|
|
|
|
|
|
const areas = this.areas.map(item => {
|
|
const areas = this.areas.map(item => {
|
|
return {
|
|
return {
|
|
id: item.id,
|
|
id: item.id,
|
|
- x: this.toFixed(item.x * wRate),
|
|
|
|
- y: this.toFixed(item.y * hRate),
|
|
|
|
- w: this.toFixed(item.w * wRate),
|
|
|
|
- h: this.toFixed(item.h * hRate),
|
|
|
|
|
|
+ x: this.toFixed(item.x / clientWidth, 4),
|
|
|
|
+ y: this.toFixed(item.y / clientHeight),
|
|
|
|
+ w: this.toFixed(item.w / clientWidth, 4),
|
|
|
|
+ h: this.toFixed(item.h / clientHeight),
|
|
// 是否覆盖整个页面,允许2px的误差
|
|
// 是否覆盖整个页面,允许2px的误差
|
|
isFull:
|
|
isFull:
|
|
item.x <= 2 &&
|
|
item.x <= 2 &&
|