263 lines
9.0 KiB
JavaScript
263 lines
9.0 KiB
JavaScript
var __create = Object.create;
|
|
var __defProp = Object.defineProperty;
|
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
var __getProtoOf = Object.getPrototypeOf;
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
var __export = (target, all) => {
|
|
for (var name in all)
|
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
};
|
|
var __copyProps = (to, from, except, desc) => {
|
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
for (let key of __getOwnPropNames(from))
|
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
}
|
|
return to;
|
|
};
|
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
// If the importer is in node compatibility mode or this is not an ESM
|
|
// file that has been converted to a CommonJS file using a Babel-
|
|
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
mod
|
|
));
|
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
|
|
// src/ImageEditor/viewer/shape.ts
|
|
var shape_exports = {};
|
|
__export(shape_exports, {
|
|
default: () => shape_default
|
|
});
|
|
module.exports = __toCommonJS(shape_exports);
|
|
var import_func = require("@zhst/func");
|
|
var turf = __toESM(require("@turf/turf"));
|
|
var import_boolean_point_in_polygon = __toESM(require("@turf/boolean-point-in-polygon"));
|
|
var import_helper = require("./helper");
|
|
var import_constants = require("./constants");
|
|
var import_utils = require("../utils");
|
|
function rectToPolygon(axisRect) {
|
|
const polygon2 = turf.polygon([
|
|
[
|
|
[(0, import_helper.setNumberAccuracy)(axisRect.x, -2), (0, import_helper.setNumberAccuracy)(axisRect.y, -2)],
|
|
[(0, import_helper.setNumberAccuracy)(axisRect.x2, -2), (0, import_helper.setNumberAccuracy)(axisRect.y, -2)],
|
|
[(0, import_helper.setNumberAccuracy)(axisRect.x2, -2), (0, import_helper.setNumberAccuracy)(axisRect.y2, -2)],
|
|
[(0, import_helper.setNumberAccuracy)(axisRect.x, -2), (0, import_helper.setNumberAccuracy)(axisRect.y2, -2)],
|
|
[(0, import_helper.setNumberAccuracy)(axisRect.x, -2), (0, import_helper.setNumberAccuracy)(axisRect.y, -2)]
|
|
]
|
|
]);
|
|
return polygon2;
|
|
}
|
|
var shape_default = {
|
|
//store
|
|
shapeList: [],
|
|
hoverShapId: null,
|
|
selectShapId: null,
|
|
//是否开启人脸
|
|
isEyeOpen: false,
|
|
//是否移动
|
|
movable: true,
|
|
//是否放大缩小
|
|
zoomable: true,
|
|
//禁止添加shap
|
|
disableAdd: false,
|
|
//自定义画框的颜色
|
|
color: "",
|
|
changeEyeModel(isOpen) {
|
|
if (isOpen) {
|
|
this.isEyeOpen = true;
|
|
this.changeMoveAble(false);
|
|
this.changeZoonAble(false);
|
|
} else {
|
|
this.isEyeOpen = false;
|
|
this.changeMoveAble(true);
|
|
this.changeZoonAble(true);
|
|
}
|
|
},
|
|
//method
|
|
addShape(shap, type = import_constants.SHAPE_TYPE_RECT) {
|
|
this.color = shap.color ? shap.color : "";
|
|
if ((0, import_func.isNil)(shap) || this.disableAdd)
|
|
return;
|
|
const { shapeList: preShapeList = [] } = this;
|
|
let shapList = (0, import_func.isArray)(shap) ? shap : [shap];
|
|
shapList = shapList.map((v) => ({ ...v, __SHAPE_TYPE__: type }));
|
|
this.shapeList = [...preShapeList, ...shapList];
|
|
},
|
|
//
|
|
setSelectShapId(id) {
|
|
this.selectShapId = id;
|
|
(0, import_utils.dispatchEvent)(this.element, import_constants.EVENT_SHAPE_SELECT, id);
|
|
},
|
|
getSelectShape(contain = true) {
|
|
const selectShapeList = [];
|
|
const selectShape = this.shapeList.find((v) => v["id"] === this.selectShapId);
|
|
selectShape && selectShapeList.push(selectShape);
|
|
if (contain && selectShape) {
|
|
const originFeature = rectToPolygon(this.imgRectAxisToCanvasAxisRect(selectShape));
|
|
for (let i = 0; i < this.shapeList.length; i++) {
|
|
const shape = this.shapeList[i];
|
|
if (shape["id"] !== this.selectShapId) {
|
|
const feature = rectToPolygon(this.imgRectAxisToCanvasAxisRect(shape));
|
|
const isContain = turf.booleanContains(originFeature, feature);
|
|
isContain && selectShapeList.push(shape);
|
|
}
|
|
}
|
|
}
|
|
return selectShapeList;
|
|
},
|
|
replaceShape(shape, type = import_constants.SHAPE_TYPE_RECT) {
|
|
if ((0, import_func.isNil)(shape))
|
|
return;
|
|
const { shapeList: preShapeList = [] } = this;
|
|
let _shape;
|
|
if ((0, import_func.isFunction)(shape)) {
|
|
_shape = shape(preShapeList);
|
|
} else {
|
|
_shape = shape;
|
|
}
|
|
let shapList = (0, import_func.isArray)(_shape) ? _shape : [_shape];
|
|
shapList = shapList.map((v) => ({ ...v, __SHAPE_TYPE__: type }));
|
|
this.shapeList = [...shapList];
|
|
},
|
|
clearShape() {
|
|
this.shapeList = [];
|
|
},
|
|
calcSelectShape(canvasPoint) {
|
|
const { shapeList, image } = this;
|
|
const selectAbleShape = shapeList.filter(({ selectAble = true }) => !!selectAble);
|
|
let minId = null;
|
|
let minDis = Number.MAX_VALUE;
|
|
const pt = turf.point([canvasPoint.x, canvasPoint.y]);
|
|
for (let i = 0; i < selectAbleShape.length; i++) {
|
|
const shape = selectAbleShape[i];
|
|
const axisRect = this.imgRectAxisToCanvasAxisRect(shape);
|
|
const polygon2 = turf.polygon([
|
|
[
|
|
[axisRect.x, axisRect.y],
|
|
[axisRect.x2, axisRect.y],
|
|
[axisRect.x2, axisRect.y2],
|
|
[axisRect.x, axisRect.y2],
|
|
[axisRect.x, axisRect.y]
|
|
]
|
|
]);
|
|
const isPtInPolygon = (0, import_boolean_point_in_polygon.default)(pt, polygon2);
|
|
if (isPtInPolygon) {
|
|
const line = turf.polygonToLine(polygon2);
|
|
const distance = turf.pointToLineDistance(pt, line, { method: "planar" });
|
|
if (distance < minDis) {
|
|
minDis = distance;
|
|
minId = shape["id"];
|
|
}
|
|
}
|
|
}
|
|
return minId;
|
|
},
|
|
clearSelectShape() {
|
|
this.setSelectShapId(null);
|
|
},
|
|
changeMoveAble(movable = true) {
|
|
this.movable = movable;
|
|
},
|
|
changeZoonAble(zoomable = true) {
|
|
this.zoomable = zoomable;
|
|
},
|
|
disabledAddShap(value = false) {
|
|
this.disableAdd = value;
|
|
},
|
|
renderShape(ctx) {
|
|
const { shapeList } = this;
|
|
const selectShapeList = [];
|
|
const hoverShapeList = [];
|
|
const normalShapeList = [];
|
|
for (let i = 0; i < shapeList.length; i++) {
|
|
const shape = shapeList[i];
|
|
const isSelectShape = this.selectShapId === shape["id"];
|
|
const isHoverShape = this.hoverShapId === shape["id"];
|
|
if (isSelectShape) {
|
|
selectShapeList.push(shape);
|
|
} else if (isHoverShape) {
|
|
hoverShapeList.push(shape);
|
|
} else {
|
|
normalShapeList.push(shape);
|
|
}
|
|
}
|
|
for (let i = 0; i < normalShapeList.length; i++) {
|
|
const shape = normalShapeList[i];
|
|
const { __SHAPE_TYPE__ } = shape;
|
|
switch (__SHAPE_TYPE__) {
|
|
case import_constants.SHAPE_TYPE_RECT:
|
|
this.renderRect(ctx, shape, "normal");
|
|
break;
|
|
case import_constants.SHAPE_TYPE_CIRCLE:
|
|
this.renderPoint(ctx, shape, "normal");
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
for (let i = 0; i < hoverShapeList.length; i++) {
|
|
const shape = hoverShapeList[i];
|
|
const { __SHAPE_TYPE__ } = shape;
|
|
switch (__SHAPE_TYPE__) {
|
|
case import_constants.SHAPE_TYPE_RECT:
|
|
this.renderRect(ctx, shape, "hover");
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
for (let i = 0; i < selectShapeList.length; i++) {
|
|
const shape = selectShapeList[i];
|
|
const { __SHAPE_TYPE__ } = shape;
|
|
switch (__SHAPE_TYPE__) {
|
|
case import_constants.SHAPE_TYPE_RECT:
|
|
this.renderRect(ctx, shape, "select");
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
renderRect(ctx, shape, type) {
|
|
const axisRect = this.imgRectAxisToCanvasAxisRect(shape);
|
|
const rect = {
|
|
x: axisRect.x2 > axisRect.x ? axisRect.x : axisRect.x2,
|
|
y: axisRect.y2 > axisRect.y ? axisRect.y : axisRect.y2,
|
|
w: Math.abs(axisRect.x2 - axisRect.x),
|
|
h: Math.abs(axisRect.y2 - axisRect.y)
|
|
};
|
|
ctx.save();
|
|
if (type === "normal") {
|
|
ctx.strokeStyle = this.color ? this.color : "#FFF566";
|
|
ctx.lineWidth = 2;
|
|
ctx.strokeRect(...Object.values(rect));
|
|
}
|
|
if (type === "hover") {
|
|
ctx.fillStyle = "rgba(0, 153, 255, 0.3)";
|
|
ctx.fillRect(...Object.values(rect));
|
|
ctx.strokeStyle = "rgba(92, 219, 211, 1)";
|
|
ctx.lineWidth = 2;
|
|
ctx.strokeRect(...Object.values(rect));
|
|
}
|
|
if (type === "select") {
|
|
ctx.strokeStyle = "rgba(255, 0, 0, 1)";
|
|
ctx.lineWidth = 2;
|
|
ctx.strokeRect(...Object.values(rect));
|
|
}
|
|
ctx.restore();
|
|
},
|
|
renderPoint(ctx, shape) {
|
|
const originAxis = this.imgAxisToOriginAxis(shape);
|
|
const canvasAxis = this.originAxisToCanvasAxis(originAxis);
|
|
ctx.save();
|
|
ctx.beginPath();
|
|
ctx.arc(canvasAxis.x, canvasAxis.y, 2, 0, 2 * Math.PI);
|
|
ctx.fillStyle = "#DF0101";
|
|
ctx.fill();
|
|
ctx.restore();
|
|
}
|
|
};
|