247 lines
8.5 KiB
JavaScript
247 lines
8.5 KiB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
||
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
||
// @ts-nocheck
|
||
import { isNil, isArray, isFunction } from '@zhst/func';
|
||
import * as turf from '@turf/turf';
|
||
import booleanPointInPolygon from '@turf/boolean-point-in-polygon';
|
||
import { rectToPolygon } from "./helper";
|
||
import { SHAPE_TYPE_RECT, SHAPE_TYPE_CIRCLE, EVENT_SHAPE_SELECT } from "./constants";
|
||
import { dispatchEvent } from "../utils";
|
||
export default {
|
||
//store
|
||
shapeList: [],
|
||
hoverShapId: null,
|
||
selectShapId: null,
|
||
//是否开启人脸
|
||
isEyeOpen: false,
|
||
//是否移动
|
||
movable: true,
|
||
//是否放大缩小
|
||
zoomable: true,
|
||
//禁止添加shap
|
||
disableAdd: false,
|
||
//自定义画框的颜色
|
||
color: '',
|
||
changeEyeModel: function 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: function addShape(shape) {
|
||
var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : SHAPE_TYPE_RECT;
|
||
this.color = shape.color ? shape.color : '';
|
||
if (isNil(shape) || this.disableAdd) return;
|
||
var _this$shapeList = this.shapeList,
|
||
preShapeList = _this$shapeList === void 0 ? [] : _this$shapeList;
|
||
var _shapeList = isArray(shape) ? shape : [shape];
|
||
_shapeList = _shapeList.map(function (v) {
|
||
return _objectSpread(_objectSpread({}, v), {}, {
|
||
__SHAPE_TYPE__: type
|
||
});
|
||
});
|
||
this.shapeList = [].concat(_toConsumableArray(preShapeList), _toConsumableArray(_shapeList));
|
||
},
|
||
//
|
||
setSelectShapId: function setSelectShapId(id) {
|
||
this.selectShapId = id;
|
||
dispatchEvent(this.element, EVENT_SHAPE_SELECT, id);
|
||
},
|
||
getSelectShape: function getSelectShape() {
|
||
var _this = this;
|
||
var contain = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
||
var selectShapeList = [];
|
||
var selectShape = this.shapeList.find(function (v) {
|
||
return v['id'] === _this.selectShapId;
|
||
});
|
||
selectShape && selectShapeList.push(selectShape);
|
||
if (contain && selectShape) {
|
||
var originFeature = rectToPolygon(this.imgRectAxisToCanvasAxisRect(selectShape));
|
||
for (var i = 0; i < this.shapeList.length; i++) {
|
||
var shape = this.shapeList[i];
|
||
if (shape['id'] !== this.selectShapId) {
|
||
var feature = rectToPolygon(this.imgRectAxisToCanvasAxisRect(shape));
|
||
var isContain = turf.booleanContains(originFeature, feature);
|
||
isContain && selectShapeList.push(shape);
|
||
}
|
||
}
|
||
}
|
||
return selectShapeList;
|
||
},
|
||
replaceShape: function replaceShape(shape) {
|
||
var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : SHAPE_TYPE_RECT;
|
||
if (isNil(shape)) return;
|
||
var _this$shapeList2 = this.shapeList,
|
||
preShapeList = _this$shapeList2 === void 0 ? [] : _this$shapeList2;
|
||
var _shape;
|
||
if (isFunction(shape)) {
|
||
_shape = shape(preShapeList);
|
||
} else {
|
||
_shape = shape;
|
||
}
|
||
var shapList = isArray(_shape) ? _shape : [_shape];
|
||
shapList = shapList.map(function (v) {
|
||
return _objectSpread(_objectSpread({}, v), {}, {
|
||
__SHAPE_TYPE__: type
|
||
});
|
||
});
|
||
this.shapeList = _toConsumableArray(shapList);
|
||
},
|
||
clearShape: function clearShape() {
|
||
this.shapeList = [];
|
||
},
|
||
calcSelectShape: function calcSelectShape(canvasPoint) {
|
||
// todo:有问题
|
||
var shapeList = this.shapeList,
|
||
image = this.image;
|
||
var selectAbleShape = shapeList.filter(function (_ref) {
|
||
var _ref$selectAble = _ref.selectAble,
|
||
selectAble = _ref$selectAble === void 0 ? true : _ref$selectAble;
|
||
return !!selectAble;
|
||
});
|
||
//判断落点离哪个形状最近
|
||
var minId = null;
|
||
var minDis = Number.MAX_VALUE;
|
||
var pt = turf.point([canvasPoint.x, canvasPoint.y]);
|
||
for (var i = 0; i < selectAbleShape.length; i++) {
|
||
var shape = selectAbleShape[i];
|
||
var axisRect = this.imgRectAxisToCanvasAxisRect(shape);
|
||
var polygon = turf.polygon([[[axisRect.x, axisRect.y], [axisRect.x2, axisRect.y], [axisRect.x2, axisRect.y2], [axisRect.x, axisRect.y2], [axisRect.x, axisRect.y]]]);
|
||
var isPtInPolygon = booleanPointInPolygon(pt, polygon);
|
||
if (isPtInPolygon) {
|
||
//如果点在多变形内 判断距离是否是最短
|
||
var line = turf.polygonToLine(polygon);
|
||
var distance = turf.pointToLineDistance(pt, line, {
|
||
method: 'planar'
|
||
});
|
||
if (distance < minDis) {
|
||
minDis = distance;
|
||
minId = shape['id'];
|
||
}
|
||
}
|
||
}
|
||
return minId;
|
||
},
|
||
clearSelectShape: function clearSelectShape() {
|
||
this.setSelectShapId(null);
|
||
},
|
||
changeMoveAble: function changeMoveAble() {
|
||
var movable = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
||
this.movable = movable;
|
||
},
|
||
changeZoonAble: function changeZoonAble() {
|
||
var zoomable = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
||
this.zoomable = zoomable;
|
||
},
|
||
disabledAddShap: function disabledAddShap() {
|
||
var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
||
this.disableAdd = value;
|
||
},
|
||
renderShape: function renderShape(ctx) {
|
||
var shapeList = this.shapeList;
|
||
//先排序
|
||
var selectShapeList = [];
|
||
var hoverShapeList = [];
|
||
var normalShapeList = [];
|
||
for (var i = 0; i < shapeList.length; i++) {
|
||
var shape = shapeList[i];
|
||
var isSelectShape = this.selectShapId === shape['id'];
|
||
var isHoverShape = this.hoverShapId === shape['id'];
|
||
if (isSelectShape) {
|
||
selectShapeList.push(shape);
|
||
} else if (isHoverShape) {
|
||
hoverShapeList.push(shape);
|
||
} else {
|
||
normalShapeList.push(shape);
|
||
}
|
||
}
|
||
// const sortShapeList = shapeList.sort((a, b) => (this.isHightLight(a) ? 1 : -1));
|
||
//渲染
|
||
for (var _i = 0; _i < normalShapeList.length; _i++) {
|
||
var _shape2 = normalShapeList[_i];
|
||
var __SHAPE_TYPE__ = _shape2.__SHAPE_TYPE__;
|
||
switch (__SHAPE_TYPE__) {
|
||
case SHAPE_TYPE_RECT:
|
||
this.renderRect(ctx, _shape2, 'normal');
|
||
break;
|
||
case SHAPE_TYPE_CIRCLE:
|
||
this.renderPoint(ctx, _shape2, 'normal');
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
}
|
||
for (var _i2 = 0; _i2 < hoverShapeList.length; _i2++) {
|
||
var _shape3 = hoverShapeList[_i2];
|
||
var _SHAPE_TYPE__ = _shape3.__SHAPE_TYPE__;
|
||
switch (_SHAPE_TYPE__) {
|
||
case SHAPE_TYPE_RECT:
|
||
this.renderRect(ctx, _shape3, 'hover');
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
}
|
||
for (var _i3 = 0; _i3 < selectShapeList.length; _i3++) {
|
||
var _shape4 = selectShapeList[_i3];
|
||
var _SHAPE_TYPE__2 = _shape4.__SHAPE_TYPE__;
|
||
switch (_SHAPE_TYPE__2) {
|
||
case SHAPE_TYPE_RECT:
|
||
this.renderRect(ctx, _shape4, 'select');
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
}
|
||
},
|
||
// 绘制矩形
|
||
renderRect: function renderRect(ctx, shape, type) {
|
||
//算rect
|
||
var axisRect = this.imgRectAxisToCanvasAxisRect(_objectSpread(_objectSpread({}, shape), {}, {
|
||
image: ctx.canvas
|
||
}));
|
||
var 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.apply(ctx, _toConsumableArray(Object.values(rect)));
|
||
}
|
||
if (type === 'hover') {
|
||
ctx.fillStyle = 'rgba(0, 153, 255, 0.3)';
|
||
ctx.fillRect.apply(ctx, _toConsumableArray(Object.values(rect)));
|
||
ctx.strokeStyle = 'rgba(92, 219, 211, 1)';
|
||
ctx.lineWidth = 2;
|
||
ctx.strokeRect.apply(ctx, _toConsumableArray(Object.values(rect)));
|
||
}
|
||
if (type === 'select') {
|
||
ctx.strokeStyle = 'rgba(255, 0, 0, 1)';
|
||
ctx.lineWidth = 2;
|
||
ctx.strokeRect.apply(ctx, _toConsumableArray(Object.values(rect)));
|
||
}
|
||
ctx.restore();
|
||
},
|
||
renderPoint: function renderPoint(ctx, shape) {
|
||
var originAxis = this.imgAxisToOriginAxis(shape);
|
||
var 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();
|
||
}
|
||
}; |