220 lines
9.6 KiB
JavaScript
220 lines
9.6 KiB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
var _excluded = ["x", "y"],
|
|
_excluded2 = ["x", "y"],
|
|
_excluded3 = ["x", "y", "w", "h", "image"],
|
|
_excluded4 = ["x", "y"],
|
|
_excluded5 = ["x", "y"],
|
|
_excluded6 = ["x", "y", "w", "h"];
|
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
//@ts-nocheck
|
|
import { AXIS_TYPE_ORIGIN, AXIS_TYPE_CANVAS, AXIS_TYPE_IMAGE } from "./constants";
|
|
|
|
//设置数据的精度
|
|
//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: 0,
|
|
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,
|
|
scale = targetTransform.scale;
|
|
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;
|
|
}
|
|
}; |