220 lines
7.9 KiB
JavaScript
220 lines
7.9 KiB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
var _excluded = ["x", "y"],
|
|
_excluded2 = ["x", "y"],
|
|
_excluded3 = ["x", "y", "w", "h", "image"],
|
|
_excluded4 = ["x", "y"],
|
|
_excluded5 = ["x", "y"],
|
|
_excluded6 = ["x", "y", "w", "h"];
|
|
//@ts-nocheck
|
|
import * as turf from '@turf/turf';
|
|
import { AXIS_TYPE_ORIGIN, AXIS_TYPE_CANVAS, AXIS_TYPE_IMAGE } from "./constants";
|
|
export function rectToPolygon(axisRect) {
|
|
var polygon = turf.polygon([[[setNumberAccuracy(axisRect.x, -2), setNumberAccuracy(axisRect.y, -2)], [setNumberAccuracy(axisRect.x2, -2), setNumberAccuracy(axisRect.y, -2)], [setNumberAccuracy(axisRect.x2, -2), setNumberAccuracy(axisRect.y2, -2)], [setNumberAccuracy(axisRect.x, -2), setNumberAccuracy(axisRect.y2, -2)], [setNumberAccuracy(axisRect.x, -2), setNumberAccuracy(axisRect.y, -2)]]]);
|
|
return polygon;
|
|
}
|
|
|
|
//设置数据的精度
|
|
//accuracy 表示精度 以原点为中心向左为正，向右为负，
|
|
//isCeil 表示是否为向上取整
|
|
export var setNumberAccuracy = function setNumberAccuracy(originNumber) {
|
|
var accuracy = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
var isCeil = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
|
if (originNumber === 0) {
|
|
return 0;
|
|
}
|
|
var returnData = 0;
|
|
if (isCeil) {
|
|
returnData = Math.ceil(originNumber / Math.pow(10, accuracy)) * Math.pow(10, accuracy);
|
|
} else {
|
|
returnData = Math.floor(originNumber / Math.pow(10, accuracy)) * Math.pow(10, accuracy);
|
|
}
|
|
//设置精度
|
|
if (accuracy < 0) {
|
|
returnData = Number(returnData.toFixed(-accuracy));
|
|
} else {
|
|
returnData = Number(returnData.toFixed(0));
|
|
}
|
|
return returnData;
|
|
};
|
|
export default {
|
|
targetTransform: {
|
|
translateX: 0,
|
|
translateY: 0,
|
|
scale: 1,
|
|
rotate: 0
|
|
// rotate: 90,
|
|
},
|
|
windowToCanvasAxis: function windowToCanvasAxis(event) {
|
|
return {
|
|
x: event.offsetX,
|
|
y: event.offsetY,
|
|
__AXIS_TYPE__: AXIS_TYPE_CANVAS
|
|
};
|
|
},
|
|
offsetAxisToCanvasAxis: function offsetAxisToCanvasAxis(_ref) {
|
|
var x = _ref.x,
|
|
y = _ref.y;
|
|
var targetTransform = this.targetTransform;
|
|
var translateX = targetTransform.translateX,
|
|
translateY = targetTransform.translateY,
|
|
scale = targetTransform.scale;
|
|
return {
|
|
x: (x + translateX) / scale + translateX / scale,
|
|
y: y / scale + translateY / scale,
|
|
__AXIS_TYPE__: AXIS_TYPE_CANVAS
|
|
};
|
|
},
|
|
originAxisToCanvasAxis: function originAxisToCanvasAxis(_ref2) {
|
|
var x = _ref2.x,
|
|
y = _ref2.y,
|
|
others = _objectWithoutProperties(_ref2, _excluded);
|
|
var targetTransform = this.targetTransform;
|
|
var translateX = targetTransform.translateX,
|
|
translateY = targetTransform.translateY,
|
|
_targetTransform$scal = targetTransform.scale,
|
|
scale = _targetTransform$scal === void 0 ? 1 : _targetTransform$scal;
|
|
var axis = _objectSpread(_objectSpread({
|
|
x: translateX + x * scale,
|
|
y: translateY + y * scale
|
|
}, others), {}, {
|
|
__AXIS_TYPE__: AXIS_TYPE_CANVAS
|
|
});
|
|
return axis;
|
|
},
|
|
canvasAxisToOriginAxis: function canvasAxisToOriginAxis(_ref3) {
|
|
var x = _ref3.x,
|
|
y = _ref3.y,
|
|
others = _objectWithoutProperties(_ref3, _excluded2);
|
|
var targetTransform = this.targetTransform;
|
|
var translateX = targetTransform.translateX,
|
|
translateY = targetTransform.translateY,
|
|
scale = targetTransform.scale;
|
|
var axis = _objectSpread(_objectSpread({
|
|
x: (x - translateX) / scale,
|
|
y: (y - translateY) / scale
|
|
}, others), {}, {
|
|
__AXIS_TYPE__: AXIS_TYPE_ORIGIN
|
|
});
|
|
return axis;
|
|
},
|
|
imgRectAxisToCanvasAxisRect: function imgRectAxisToCanvasAxisRect(_ref4) {
|
|
var _ref4$x = _ref4.x,
|
|
x = _ref4$x === void 0 ? 0 : _ref4$x,
|
|
_ref4$y = _ref4.y,
|
|
y = _ref4$y === void 0 ? 0 : _ref4$y,
|
|
_ref4$w = _ref4.w,
|
|
w = _ref4$w === void 0 ? 0 : _ref4$w,
|
|
_ref4$h = _ref4.h,
|
|
h = _ref4$h === void 0 ? 0 : _ref4$h,
|
|
image = _ref4.image,
|
|
others = _objectWithoutProperties(_ref4, _excluded3);
|
|
var _ref5 = this.image || image,
|
|
width = _ref5.width,
|
|
height = _ref5.height;
|
|
var _ref6 = this || {
|
|
translateX: 0,
|
|
translateY: 0,
|
|
scale: 0,
|
|
rotate: 0
|
|
// rotate: 90,
|
|
},
|
|
targetTransform = _ref6.targetTransform;
|
|
var rotate = targetTransform.rotate;
|
|
var theta = Math.PI / 180 * rotate;
|
|
var offsetRect = {
|
|
x: width * x,
|
|
y: height * y,
|
|
x2: width * w + width * x,
|
|
y2: height * h + height * y
|
|
};
|
|
//旋转
|
|
// x' = x * cos(Theta) - y * sin(Theta);
|
|
// (dx,dy) = (x2-x1,y2-y1);
|
|
var newX = (offsetRect.x - width / 2) * Math.cos(theta) - (offsetRect.y - height / 2) * Math.sin(theta) + width / 2;
|
|
var newY = (offsetRect.x - width / 2) * Math.sin(theta) + (offsetRect.y - height / 2) * Math.cos(theta) + height / 2;
|
|
var newX2 = (offsetRect.x2 - width / 2) * Math.cos(theta) - (offsetRect.y2 - height / 2) * Math.sin(theta) + width / 2;
|
|
var newY2 = (offsetRect.x2 - width / 2) * Math.sin(theta) + (offsetRect.y2 - height / 2) * Math.cos(theta) + height / 2;
|
|
var newAxis1 = this.originAxisToCanvasAxis({
|
|
x: newX,
|
|
y: newY
|
|
});
|
|
var newAxis2 = this.originAxisToCanvasAxis({
|
|
x: newX2,
|
|
y: newY2
|
|
});
|
|
return _objectSpread(_objectSpread({
|
|
x: newAxis1.x,
|
|
y: newAxis1.y,
|
|
x2: newAxis2.x,
|
|
y2: newAxis2.y
|
|
}, others), {}, {
|
|
__AXIS_TYPE__: AXIS_TYPE_CANVAS
|
|
});
|
|
},
|
|
originAxisToImgAxis: function originAxisToImgAxis(_ref7) {
|
|
var x = _ref7.x,
|
|
y = _ref7.y,
|
|
others = _objectWithoutProperties(_ref7, _excluded4);
|
|
var _this$image = this.image,
|
|
width = _this$image.width,
|
|
height = _this$image.height;
|
|
var targetTransform = this.targetTransform;
|
|
var rotate = targetTransform.rotate;
|
|
var theta = Math.PI / 180 * (360 - rotate);
|
|
var newX = (x - width / 2) * Math.cos(theta) - (y - height / 2) * Math.sin(theta) + width / 2;
|
|
var newY = (x - width / 2) * Math.sin(theta) + (y - height / 2) * Math.cos(theta) + height / 2;
|
|
return _objectSpread(_objectSpread({
|
|
x: newX / width,
|
|
y: newY / height
|
|
}, others), {}, {
|
|
__AXIS_TYPE__: AXIS_TYPE_IMAGE
|
|
});
|
|
},
|
|
imgAxisToOriginAxis: function imgAxisToOriginAxis(_ref8) {
|
|
var _x = _ref8.x,
|
|
_y = _ref8.y,
|
|
others = _objectWithoutProperties(_ref8, _excluded5);
|
|
var _this$image2 = this.image,
|
|
width = _this$image2.width,
|
|
height = _this$image2.height;
|
|
//
|
|
var x = width * _x;
|
|
var y = height * _y;
|
|
//
|
|
var targetTransform = this.targetTransform;
|
|
var rotate = targetTransform.rotate;
|
|
var theta = Math.PI / 180 * rotate;
|
|
var newX = (x - width / 2) * Math.cos(theta) - (y - height / 2) * Math.sin(theta) + width / 2;
|
|
var newY = (x - width / 2) * Math.sin(theta) + (y - height / 2) * Math.cos(theta) + height / 2;
|
|
return _objectSpread(_objectSpread({
|
|
x: newX,
|
|
y: newY
|
|
}, others), {}, {
|
|
__AXIS_TYPE__: AXIS_TYPE_ORIGIN
|
|
});
|
|
},
|
|
getDataUrlbyOriginAxis: function getDataUrlbyOriginAxis(_ref9) {
|
|
var _ref9$x = _ref9.x,
|
|
x = _ref9$x === void 0 ? 0 : _ref9$x,
|
|
_ref9$y = _ref9.y,
|
|
y = _ref9$y === void 0 ? 0 : _ref9$y,
|
|
_ref9$w = _ref9.w,
|
|
w = _ref9$w === void 0 ? 0 : _ref9$w,
|
|
_ref9$h = _ref9.h,
|
|
h = _ref9$h === void 0 ? 0 : _ref9$h,
|
|
others = _objectWithoutProperties(_ref9, _excluded6);
|
|
var ctx = this.canvas.getContext('2d');
|
|
var commonCanvas = document.createElement('canvas');
|
|
commonCanvas.width = w;
|
|
commonCanvas.height = h;
|
|
commonCanvas.style.display = 'none';
|
|
document.body.appendChild(commonCanvas);
|
|
var commonCtx = commonCanvas.getContext('2d');
|
|
var imageData = ctx.getImageData(x, y, w, h);
|
|
commonCtx.putImageData(imageData, 0, 0);
|
|
var dataUrl = commonCanvas.toDataURL('image/jpeg');
|
|
commonCanvas.parentNode.removeChild(commonCanvas);
|
|
return dataUrl;
|
|
}
|
|
}; |