746 lines
27 KiB
JavaScript
746 lines
27 KiB
JavaScript
|
var __renderjsModules={};
|
|||
|
|
|
|||
|
|
__renderjsModules.c0c7256a = (() => {
|
|||
|
|
var __defProp = Object.defineProperty;
|
|||
|
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|||
|
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|||
|
|
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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|||
|
|
var __async = (__this, __arguments, generator) => {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
var fulfilled = (value) => {
|
|||
|
|
try {
|
|||
|
|
step(generator.next(value));
|
|||
|
|
} catch (e) {
|
|||
|
|
reject(e);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
var rejected = (value) => {
|
|||
|
|
try {
|
|||
|
|
step(generator.throw(value));
|
|||
|
|
} catch (e) {
|
|||
|
|
reject(e);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|||
|
|
step((generator = generator.apply(__this, __arguments)).next());
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// <stdin>
|
|||
|
|
var stdin_exports = {};
|
|||
|
|
__export(stdin_exports, {
|
|||
|
|
default: () => stdin_default
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// ../../../../hldy_xcx/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.render.js
|
|||
|
|
var offset = { x: 0, y: 0 };
|
|||
|
|
var scale = 1;
|
|||
|
|
var minScale = 1;
|
|||
|
|
var rotate = 0;
|
|||
|
|
var touches = [];
|
|||
|
|
var img = {};
|
|||
|
|
var sys = {};
|
|||
|
|
var area = {};
|
|||
|
|
var touchType = "";
|
|||
|
|
var activeAngle = 0;
|
|||
|
|
var areaOffset = { left: 0, right: 0, top: 0, bottom: 0 };
|
|||
|
|
var elIds = {
|
|||
|
|
"imageStyles": "crop-image",
|
|||
|
|
"maskStylesList": "crop-mask-block",
|
|||
|
|
"borderStyles": "crop-border",
|
|||
|
|
"circleBoxStyles": "crop-circle-box",
|
|||
|
|
"circleStyles": "crop-circle",
|
|||
|
|
"gridStylesList": "crop-grid",
|
|||
|
|
"angleStylesList": "crop-angle"
|
|||
|
|
};
|
|||
|
|
var timestamp = 0;
|
|||
|
|
var platform = "H5";
|
|||
|
|
var platform = "APP";
|
|||
|
|
var fault = 1e-6;
|
|||
|
|
function minimum(a, b) {
|
|||
|
|
if (a > 0 && b < 0)
|
|||
|
|
return a;
|
|||
|
|
if (a < 0 && b > 0)
|
|||
|
|
return b;
|
|||
|
|
if (a > 0 && b > 0)
|
|||
|
|
return Math.min(a, b);
|
|||
|
|
return 0;
|
|||
|
|
}
|
|||
|
|
function num(n) {
|
|||
|
|
var m = parseFloat(n.toFixed(6));
|
|||
|
|
return m === fault || m === -fault ? 0 : m;
|
|||
|
|
}
|
|||
|
|
function equalsByFault(a, b) {
|
|||
|
|
return Math.abs(a - b) <= fault;
|
|||
|
|
}
|
|||
|
|
function lessThanByFault(a, b) {
|
|||
|
|
var c = a - b;
|
|||
|
|
return c < 0 ? c < -fault : c < fault;
|
|||
|
|
}
|
|||
|
|
function validMax(v, max, isInclude, x, y, rate) {
|
|||
|
|
if (typeof max === "number") {
|
|||
|
|
if (isInclude && equalsByFault(max, y)) {
|
|||
|
|
var n = num(max * rate);
|
|||
|
|
if (n <= x)
|
|||
|
|
return n;
|
|||
|
|
return x;
|
|||
|
|
}
|
|||
|
|
return max;
|
|||
|
|
}
|
|||
|
|
return v;
|
|||
|
|
}
|
|||
|
|
function styleToString(style) {
|
|||
|
|
if (typeof style === "string")
|
|||
|
|
return style;
|
|||
|
|
var str = "";
|
|||
|
|
for (let k in style) {
|
|||
|
|
str += k + ":" + style[k] + ";";
|
|||
|
|
}
|
|||
|
|
return str;
|
|||
|
|
}
|
|||
|
|
function setStyle(instance, key, style) {
|
|||
|
|
if (platform === "APP") {
|
|||
|
|
if (Object.prototype.toString.call(style) === "[object Array]") {
|
|||
|
|
for (var i = 0, len = style.length; i < len; i++) {
|
|||
|
|
var el = window.document.getElementById(elIds[key] + "-" + (i + 1));
|
|||
|
|
el && (el.style = styleToString(style[i]));
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
var el = window.document.getElementById(elIds[key]);
|
|||
|
|
el && (el.style = styleToString(style));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (platform === "H5")
|
|||
|
|
instance[key] = style;
|
|||
|
|
}
|
|||
|
|
function callMethod(instance, name, obj) {
|
|||
|
|
if (platform === "APP")
|
|||
|
|
instance.callMethod(name, obj);
|
|||
|
|
if (platform === "H5")
|
|||
|
|
instance[name](obj);
|
|||
|
|
}
|
|||
|
|
function getDistanceByTouches(touches2) {
|
|||
|
|
var a = touches2[1].pageX - touches2[0].pageX;
|
|||
|
|
var b = touches2[1].pageY - touches2[0].pageY;
|
|||
|
|
var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
|
|||
|
|
var x = touches2[1].pageX - a / 2;
|
|||
|
|
var y = touches2[1].pageY - b / 2;
|
|||
|
|
return { c, x, y };
|
|||
|
|
}
|
|||
|
|
function correctValue(a, b, c, reverse) {
|
|||
|
|
return num(reverse ? Math.max(Math.min(a, b), c) : Math.min(Math.max(a, b), c));
|
|||
|
|
}
|
|||
|
|
function checkRotateRange(e, xReverse, yReverse) {
|
|||
|
|
var o = num((img.height - img.width) / 2);
|
|||
|
|
return {
|
|||
|
|
x: correctValue(e.x, -img.height + o + area.width + area.left, area.left + o, xReverse),
|
|||
|
|
y: correctValue(e.y, -img.width - o + area.height + area.top, area.top - o, yReverse)
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
function checkRange(e) {
|
|||
|
|
var r = rotate / 90 % 2;
|
|||
|
|
if (r === 1) {
|
|||
|
|
if (area.width === area.height) {
|
|||
|
|
return checkRotateRange(e, img.height < area.height, img.width < area.width);
|
|||
|
|
}
|
|||
|
|
var isInclude = img.height < area.width && img.width < area.height;
|
|||
|
|
if (img.width < area.height || img.height < area.width) {
|
|||
|
|
if (area.width < area.height && img.width < img.height) {
|
|||
|
|
return isInclude ? checkRotateRange(e, area.width < area.height, area.width < area.height) : checkRotateRange(e, false, true);
|
|||
|
|
}
|
|||
|
|
if (area.height < area.width && img.height < img.width) {
|
|||
|
|
return isInclude ? checkRotateRange(e, area.height < area.width, area.height < area.width) : checkRotateRange(e, true, false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (img.height >= area.width && img.width >= area.height) {
|
|||
|
|
return checkRotateRange(e, false, false);
|
|||
|
|
}
|
|||
|
|
if (isInclude) {
|
|||
|
|
return area.height < area.width ? checkRotateRange(e, true, true) : checkRotateRange(e, area.width < area.height, area.width < area.height);
|
|||
|
|
}
|
|||
|
|
if (img.height < area.width && !img.width < area.height) {
|
|||
|
|
return checkRotateRange(e, true, false);
|
|||
|
|
}
|
|||
|
|
if (!img.height < area.width && img.width < area.height) {
|
|||
|
|
return checkRotateRange(e, false, true);
|
|||
|
|
}
|
|||
|
|
return checkRotateRange(e, img.height < area.height, img.width < area.width);
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
x: correctValue(e.x, -img.width + area.width + area.left, area.left, img.width < area.width),
|
|||
|
|
y: correctValue(e.y, -img.height + area.height + area.top, area.top, img.height < area.height)
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
function changeImageRect(e) {
|
|||
|
|
offset.x += e.x || 0;
|
|||
|
|
offset.y += e.y || 0;
|
|||
|
|
if (e.check && area.checkRange) {
|
|||
|
|
var point = checkRange(offset);
|
|||
|
|
if (offset.x !== point.x || offset.y !== point.y) {
|
|||
|
|
offset = point;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
var ox = (img.width - img.oldWidth) / 2;
|
|||
|
|
var oy = (img.height - img.oldHeight) / 2;
|
|||
|
|
setStyle(e.instance, "imageStyles", {
|
|||
|
|
width: img.oldWidth + "px",
|
|||
|
|
height: img.oldHeight + "px",
|
|||
|
|
transform: (img.gpu ? "translateZ(0) " : "") + "translate(" + (offset.x + ox) + "px, " + (offset.y + oy) + "px) rotate(" + rotate + "deg) scale(" + scale + ")"
|
|||
|
|
});
|
|||
|
|
callMethod(e.instance, "dataChange", {
|
|||
|
|
width: img.width,
|
|||
|
|
height: img.height,
|
|||
|
|
x: offset.x,
|
|||
|
|
y: offset.y,
|
|||
|
|
rotate
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
function changeAreaRect(e) {
|
|||
|
|
setStyle(e.instance, "maskStylesList", [
|
|||
|
|
{
|
|||
|
|
left: 0,
|
|||
|
|
width: area.left + areaOffset.left + "px",
|
|||
|
|
top: 0,
|
|||
|
|
bottom: 0,
|
|||
|
|
"z-index": area.zIndex + 2
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
left: area.right + areaOffset.right + "px",
|
|||
|
|
right: 0,
|
|||
|
|
top: 0,
|
|||
|
|
bottom: 0,
|
|||
|
|
"z-index": area.zIndex + 2
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
left: area.left + areaOffset.left + "px",
|
|||
|
|
width: area.width + areaOffset.right - areaOffset.left + "px",
|
|||
|
|
top: 0,
|
|||
|
|
height: area.top + areaOffset.top + "px",
|
|||
|
|
"z-index": area.zIndex + 2
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
left: area.left + areaOffset.left + "px",
|
|||
|
|
width: area.width + areaOffset.right - areaOffset.left + "px",
|
|||
|
|
top: area.bottom + areaOffset.bottom + "px",
|
|||
|
|
// height: (area.top - areaOffset.bottom + sys.offsetBottom) + 'px',
|
|||
|
|
bottom: 0,
|
|||
|
|
"z-index": area.zIndex + 2
|
|||
|
|
}
|
|||
|
|
]);
|
|||
|
|
if (area.showBorder) {
|
|||
|
|
setStyle(e.instance, "borderStyles", {
|
|||
|
|
left: area.left + areaOffset.left + "px",
|
|||
|
|
top: area.top + areaOffset.top + "px",
|
|||
|
|
width: area.width + areaOffset.right - areaOffset.left + "px",
|
|||
|
|
height: area.height + areaOffset.bottom - areaOffset.top + "px",
|
|||
|
|
"z-index": area.zIndex + 3
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
if (area.showGrid) {
|
|||
|
|
setStyle(e.instance, "gridStylesList", [
|
|||
|
|
{
|
|||
|
|
"border-width": "1px 0 0 0",
|
|||
|
|
left: area.left + areaOffset.left + "px",
|
|||
|
|
right: area.right + areaOffset.right + "px",
|
|||
|
|
top: area.top + areaOffset.top + (area.height + areaOffset.bottom - areaOffset.top) / 3 - 0.5 + "px",
|
|||
|
|
width: area.width + areaOffset.right - areaOffset.left + "px",
|
|||
|
|
"z-index": area.zIndex + 3
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"border-width": "1px 0 0 0",
|
|||
|
|
left: area.left + areaOffset.left + "px",
|
|||
|
|
right: area.right + areaOffset.right + "px",
|
|||
|
|
top: area.top + areaOffset.top + (area.height + areaOffset.bottom - areaOffset.top) * 2 / 3 - 0.5 + "px",
|
|||
|
|
width: area.width + areaOffset.right - areaOffset.left + "px",
|
|||
|
|
"z-index": area.zIndex + 3
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"border-width": "0 1px 0 0",
|
|||
|
|
top: area.top + areaOffset.top + "px",
|
|||
|
|
bottom: area.bottom + areaOffset.bottom + "px",
|
|||
|
|
left: area.left + areaOffset.left + (area.width + areaOffset.right - areaOffset.left) / 3 - 0.5 + "px",
|
|||
|
|
height: area.height + areaOffset.bottom - areaOffset.top + "px",
|
|||
|
|
"z-index": area.zIndex + 3
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"border-width": "0 1px 0 0",
|
|||
|
|
top: area.top + areaOffset.top + "px",
|
|||
|
|
bottom: area.bottom + areaOffset.bottom + "px",
|
|||
|
|
left: area.left + areaOffset.left + (area.width + areaOffset.right - areaOffset.left) * 2 / 3 - 0.5 + "px",
|
|||
|
|
height: area.height + areaOffset.bottom - areaOffset.top + "px",
|
|||
|
|
"z-index": area.zIndex + 3
|
|||
|
|
}
|
|||
|
|
]);
|
|||
|
|
}
|
|||
|
|
if (area.showAngle) {
|
|||
|
|
setStyle(e.instance, "angleStylesList", [
|
|||
|
|
{
|
|||
|
|
"border-width": area.angleBorderWidth + "px 0 0 " + area.angleBorderWidth + "px",
|
|||
|
|
left: area.left + areaOffset.left - area.angleBorderWidth + "px",
|
|||
|
|
top: area.top + areaOffset.top - area.angleBorderWidth + "px",
|
|||
|
|
"z-index": area.zIndex + 3
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"border-width": area.angleBorderWidth + "px " + area.angleBorderWidth + "px 0 0",
|
|||
|
|
left: area.right + areaOffset.right - area.angleSize + "px",
|
|||
|
|
top: area.top + areaOffset.top - area.angleBorderWidth + "px",
|
|||
|
|
"z-index": area.zIndex + 3
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"border-width": "0 0 " + area.angleBorderWidth + "px " + area.angleBorderWidth + "px",
|
|||
|
|
left: area.left + areaOffset.left - area.angleBorderWidth + "px",
|
|||
|
|
top: area.bottom + areaOffset.bottom - area.angleSize + "px",
|
|||
|
|
"z-index": area.zIndex + 3
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"border-width": "0 " + area.angleBorderWidth + "px " + area.angleBorderWidth + "px 0",
|
|||
|
|
left: area.right + areaOffset.right - area.angleSize + "px",
|
|||
|
|
top: area.bottom + areaOffset.bottom - area.angleSize + "px",
|
|||
|
|
"z-index": area.zIndex + 3
|
|||
|
|
}
|
|||
|
|
]);
|
|||
|
|
}
|
|||
|
|
if (area.radius > 0) {
|
|||
|
|
var radius = area.radius;
|
|||
|
|
if (area.width === area.height && area.radius >= area.width / 2) {
|
|||
|
|
radius = area.width / 2;
|
|||
|
|
} else {
|
|||
|
|
if (area.width !== area.height) {
|
|||
|
|
radius = Math.min(area.width / 2, area.height / 2, radius);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
setStyle(e.instance, "circleBoxStyles", {
|
|||
|
|
left: area.left + areaOffset.left + "px",
|
|||
|
|
top: area.top + areaOffset.top + "px",
|
|||
|
|
width: area.width + areaOffset.right - areaOffset.left + "px",
|
|||
|
|
height: area.height + areaOffset.bottom - areaOffset.top + "px",
|
|||
|
|
"z-index": area.zIndex + 2
|
|||
|
|
});
|
|||
|
|
setStyle(e.instance, "circleStyles", {
|
|||
|
|
"box-shadow": "0 0 0 " + Math.max(area.width, area.height) + "px rgba(51, 51, 51, 0.8)",
|
|||
|
|
"border-radius": radius + "px"
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function scaleImage(e) {
|
|||
|
|
var last = scale;
|
|||
|
|
scale = Math.min(Math.max(e.scale + scale, minScale), img.maxScale);
|
|||
|
|
if (last !== scale) {
|
|||
|
|
img.width = num(img.oldWidth * scale);
|
|||
|
|
img.height = num(img.oldHeight * scale);
|
|||
|
|
e.x = num((e.x - offset.x) * (1 - scale / last));
|
|||
|
|
e.y = num((e.y - offset.y) * (1 - scale / last));
|
|||
|
|
changeImageRect(e);
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
function getToucheAngle(x, y) {
|
|||
|
|
var o = area.angleBorderWidth;
|
|||
|
|
var oy = sys.navigation ? 0 : sys.windowTop;
|
|||
|
|
if (y >= area.top - o + oy && y <= area.top + area.angleSize + o + oy) {
|
|||
|
|
if (x >= area.left - o && x <= area.left + area.angleSize + o) {
|
|||
|
|
return 1;
|
|||
|
|
} else if (x >= area.right - area.angleSize - o && x <= area.right + o) {
|
|||
|
|
return 2;
|
|||
|
|
}
|
|||
|
|
} else if (y >= area.bottom - area.angleSize - o + oy && y <= area.bottom + o + oy) {
|
|||
|
|
if (x >= area.left - o && x <= area.left + area.angleSize + o) {
|
|||
|
|
return 3;
|
|||
|
|
} else if (x >= area.right - area.angleSize - o && x <= area.right + o) {
|
|||
|
|
return 4;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return 0;
|
|||
|
|
}
|
|||
|
|
function resetData() {
|
|||
|
|
offset = { x: 0, y: 0 };
|
|||
|
|
scale = 1;
|
|||
|
|
minScale = img.minScale;
|
|||
|
|
rotate = 0;
|
|||
|
|
}
|
|||
|
|
function getTouchs(touches2) {
|
|||
|
|
var result = [];
|
|||
|
|
var len = touches2 ? touches2.length : 0;
|
|||
|
|
for (var i = 0; i < len; i++) {
|
|||
|
|
result[i] = {
|
|||
|
|
pageX: touches2[i].pageX,
|
|||
|
|
// h5无标题栏时，窗口顶部距离仍为标题栏高度，且触摸点y轴坐标还是有标题栏的值，即减去标题栏高度的值
|
|||
|
|
pageY: touches2[i].pageY + sys.windowTop
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
return result;
|
|||
|
|
}
|
|||
|
|
var mouseEvent = false;
|
|||
|
|
var qf_image_cropper_render_default = {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
imageStyles: {},
|
|||
|
|
maskStylesList: [{}, {}, {}, {}],
|
|||
|
|
borderStyles: {},
|
|||
|
|
gridStylesList: [{}, {}, {}, {}],
|
|||
|
|
angleStylesList: [{}, {}, {}, {}],
|
|||
|
|
circleBoxStyles: {},
|
|||
|
|
circleStyles: {}
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
platform === "H5" && window.addEventListener("mousewheel", (e) => __async(this, null, function* () {
|
|||
|
|
var touchs = getTouchs([e]);
|
|||
|
|
img.src && scaleImage({
|
|||
|
|
instance: yield this.getInstance(),
|
|||
|
|
check: true,
|
|||
|
|
// 鼠标向上滚动时，deltaY 固定 -100，鼠标向下滚动时，deltaY 固定 100
|
|||
|
|
scale: e.deltaY > 0 ? -0.05 : 0.05,
|
|||
|
|
x: touchs[0].pageX,
|
|||
|
|
y: touchs[0].pageY
|
|||
|
|
});
|
|||
|
|
}));
|
|||
|
|
},
|
|||
|
|
// #ifdef H5
|
|||
|
|
mounted() {
|
|||
|
|
platform === "H5" && this.initH5Events();
|
|||
|
|
},
|
|||
|
|
// #endif
|
|||
|
|
setPlatform(p) {
|
|||
|
|
platform = p;
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// #ifdef H5
|
|||
|
|
getTouchEvent(e) {
|
|||
|
|
e.touches = [
|
|||
|
|
{ pageX: e.pageX, pageY: e.pageY }
|
|||
|
|
];
|
|||
|
|
return e;
|
|||
|
|
},
|
|||
|
|
initH5Events() {
|
|||
|
|
const preview = document.getElementById("pic-preview");
|
|||
|
|
preview == null ? void 0 : preview.addEventListener("mousedown", (e, ev) => {
|
|||
|
|
mouseEvent = true;
|
|||
|
|
this.touchstart(this.getTouchEvent(e));
|
|||
|
|
});
|
|||
|
|
preview == null ? void 0 : preview.addEventListener("mousemove", (e) => {
|
|||
|
|
if (!mouseEvent)
|
|||
|
|
return;
|
|||
|
|
this.touchmove(this.getTouchEvent(e));
|
|||
|
|
});
|
|||
|
|
preview == null ? void 0 : preview.addEventListener("mouseup", (e) => {
|
|||
|
|
mouseEvent = false;
|
|||
|
|
this.touchend(this.getTouchEvent(e));
|
|||
|
|
});
|
|||
|
|
preview == null ? void 0 : preview.addEventListener("mouseleave", (e) => {
|
|||
|
|
mouseEvent = false;
|
|||
|
|
this.touchend(this.getTouchEvent(e));
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// #endif
|
|||
|
|
getInstance() {
|
|||
|
|
return __async(this, null, function* () {
|
|||
|
|
if (platform === "APP")
|
|||
|
|
return this.$ownerInstance ? Promise.resolve(this.$ownerInstance) : new Promise((resolve) => {
|
|||
|
|
setTimeout(() => __async(this, null, function* () {
|
|||
|
|
resolve(yield this.getInstance());
|
|||
|
|
}));
|
|||
|
|
});
|
|||
|
|
if (platform === "H5")
|
|||
|
|
return Promise.resolve(this);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 初始化：观察数据变更
|
|||
|
|
* @param {Object} newVal 新数据
|
|||
|
|
* @param {Object} oldVal 旧数据
|
|||
|
|
* @param {Object} o 组件实例对象
|
|||
|
|
*/
|
|||
|
|
initObserver: function(newVal, oldVal, o, i) {
|
|||
|
|
return __async(this, null, function* () {
|
|||
|
|
if (newVal && (!img.src || timestamp !== newVal.timestamp)) {
|
|||
|
|
timestamp = newVal.timestamp;
|
|||
|
|
img = newVal.img;
|
|||
|
|
sys = newVal.sys;
|
|||
|
|
area = newVal.area;
|
|||
|
|
minScale = img.minScale;
|
|||
|
|
resetData();
|
|||
|
|
const instance = yield this.getInstance();
|
|||
|
|
img.src && changeImageRect({
|
|||
|
|
instance,
|
|||
|
|
x: (sys.windowWidth - img.width) / 2,
|
|||
|
|
y: (sys.windowHeight + sys.windowTop - sys.offsetBottom - img.height) / 2
|
|||
|
|
});
|
|||
|
|
changeAreaRect({
|
|||
|
|
instance
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 鼠标滚轮滚动
|
|||
|
|
* @param {Object} e 事件对象
|
|||
|
|
* @param {Object} o 组件实例对象
|
|||
|
|
*/
|
|||
|
|
mousewheel: function(e, o) {
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 触摸开始
|
|||
|
|
* @param {Object} e 事件对象
|
|||
|
|
* @param {Object} o 组件实例对象
|
|||
|
|
*/
|
|||
|
|
touchstart: function(e, o) {
|
|||
|
|
if (!img.src)
|
|||
|
|
return;
|
|||
|
|
touches = getTouchs(e.touches);
|
|||
|
|
activeAngle = area.showAngle ? getToucheAngle(touches[0].pageX, touches[0].pageY) : 0;
|
|||
|
|
if (touches.length === 1 && activeAngle !== 0) {
|
|||
|
|
touchType = "stretch";
|
|||
|
|
} else {
|
|||
|
|
touchType = "";
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 触摸移动
|
|||
|
|
* @param {Object} e 事件对象
|
|||
|
|
* @param {Object} o 组件实例对象
|
|||
|
|
*/
|
|||
|
|
touchmove: function(e, o) {
|
|||
|
|
return __async(this, null, function* () {
|
|||
|
|
if (!img.src)
|
|||
|
|
return;
|
|||
|
|
e.touches = getTouchs(e.touches);
|
|||
|
|
if (touchType === "stretch") {
|
|||
|
|
var point = e.touches[0];
|
|||
|
|
var start = touches[0];
|
|||
|
|
var x = point.pageX - start.pageX;
|
|||
|
|
var y = point.pageY - start.pageY;
|
|||
|
|
if (x !== 0 || y !== 0) {
|
|||
|
|
var maxX = num(area.width * (1 - area.minScale));
|
|||
|
|
var maxY = num(area.height * (1 - area.minScale));
|
|||
|
|
touches[0] = point;
|
|||
|
|
var r = rotate / 90 % 2;
|
|||
|
|
var m = r === 1 ? num((img.height - img.width) / 2) : 0;
|
|||
|
|
var xCompare = r === 1 ? lessThanByFault(img.height, area.width) : lessThanByFault(img.width, area.width);
|
|||
|
|
var yCompare = r === 1 ? lessThanByFault(img.width, area.height) : lessThanByFault(img.height, area.height);
|
|||
|
|
var isInclude = xCompare && yCompare;
|
|||
|
|
var isIntersect = area.checkRange && (xCompare || yCompare);
|
|||
|
|
var isReverse = !isInclude || num((offset.x - area.left) / area.width) <= num((offset.y - area.top) / area.height) || area.width > area.height && img.width < img.height && r === 1;
|
|||
|
|
switch (activeAngle) {
|
|||
|
|
case 1:
|
|||
|
|
x = num(x + areaOffset.left);
|
|||
|
|
y = num(y + areaOffset.top);
|
|||
|
|
if (x >= 0 && y >= 0) {
|
|||
|
|
var t = num(offset.y + m - area.top);
|
|||
|
|
var l = num(offset.x - m - area.left);
|
|||
|
|
var max = isIntersect && (l >= 0 || t >= 0) ? minimum(t, l) : false;
|
|||
|
|
if (x > y && isReverse) {
|
|||
|
|
maxX = validMax(maxX, max, isInclude, l, t, area.width / area.height);
|
|||
|
|
if (x > maxX)
|
|||
|
|
x = maxX;
|
|||
|
|
y = num(x * area.height / area.width);
|
|||
|
|
} else {
|
|||
|
|
maxY = validMax(maxY, max, isInclude, t, l, area.height / area.width);
|
|||
|
|
if (y > maxY)
|
|||
|
|
y = maxY;
|
|||
|
|
x = num(y * area.width / area.height);
|
|||
|
|
}
|
|||
|
|
areaOffset.left = x;
|
|||
|
|
areaOffset.top = y;
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case 2:
|
|||
|
|
x = num(x + areaOffset.right);
|
|||
|
|
y = num(y + areaOffset.top);
|
|||
|
|
if (x <= 0 && y >= 0) {
|
|||
|
|
var w = r === 1 ? img.height : img.width;
|
|||
|
|
var t = num(offset.y + m - area.top);
|
|||
|
|
var l = num(area.right + m - offset.x - w);
|
|||
|
|
var max = isIntersect && (t >= 0 || l >= 0) ? minimum(t, l) : false;
|
|||
|
|
if (-x > y && isReverse) {
|
|||
|
|
maxX = validMax(maxX, max, isInclude, l, t, area.width / area.height);
|
|||
|
|
if (-x > maxX)
|
|||
|
|
x = -maxX;
|
|||
|
|
y = num(-x * area.height / area.width);
|
|||
|
|
} else {
|
|||
|
|
maxY = validMax(maxY, max, isInclude, t, l, area.height / area.width);
|
|||
|
|
if (y > maxY)
|
|||
|
|
y = maxY;
|
|||
|
|
x = num(-y * area.width / area.height);
|
|||
|
|
}
|
|||
|
|
areaOffset.right = x;
|
|||
|
|
areaOffset.top = y;
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case 3:
|
|||
|
|
x += num(x + areaOffset.left);
|
|||
|
|
y += num(y + areaOffset.bottom);
|
|||
|
|
if (x >= 0 && y <= 0) {
|
|||
|
|
var w = r === 1 ? img.width : img.height;
|
|||
|
|
var t = num(area.bottom - m - offset.y - w);
|
|||
|
|
var l = num(offset.x - m - area.left);
|
|||
|
|
var max = isIntersect && (l >= 0 || t >= 0) ? minimum(t, l) : false;
|
|||
|
|
if (x > -y && isReverse) {
|
|||
|
|
maxX = validMax(maxX, max, isInclude, l, t, area.width / area.height);
|
|||
|
|
if (x > maxX)
|
|||
|
|
x = maxX;
|
|||
|
|
y = num(-x * area.height / area.width);
|
|||
|
|
} else {
|
|||
|
|
maxY = validMax(maxY, max, isInclude, t, l, area.height / area.width);
|
|||
|
|
if (-y > maxY)
|
|||
|
|
y = -maxY;
|
|||
|
|
x = num(-y * area.width / area.height);
|
|||
|
|
}
|
|||
|
|
areaOffset.left = x;
|
|||
|
|
areaOffset.bottom = y;
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case 4:
|
|||
|
|
x = num(x + areaOffset.right);
|
|||
|
|
y = num(y + areaOffset.bottom);
|
|||
|
|
if (x <= 0 && y <= 0) {
|
|||
|
|
var w = r === 1 ? img.height : img.width;
|
|||
|
|
var h = r === 1 ? img.width : img.height;
|
|||
|
|
var t = num(area.bottom - offset.y - h - m);
|
|||
|
|
var l = num(area.right + m - offset.x - w);
|
|||
|
|
var max = isIntersect && (l >= 0 || t >= 0) ? minimum(t, l) : false;
|
|||
|
|
if (-x > -y && isReverse) {
|
|||
|
|
maxX = validMax(maxX, max, isInclude, l, t, area.width / area.height);
|
|||
|
|
if (-x > maxX)
|
|||
|
|
x = -maxX;
|
|||
|
|
y = num(x * area.height / area.width);
|
|||
|
|
} else {
|
|||
|
|
maxY = validMax(maxY, max, isInclude, t, l, area.height / area.width);
|
|||
|
|
if (-y > maxY)
|
|||
|
|
y = -maxY;
|
|||
|
|
x = num(y * area.width / area.height);
|
|||
|
|
}
|
|||
|
|
areaOffset.right = x;
|
|||
|
|
areaOffset.bottom = y;
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
changeAreaRect({
|
|||
|
|
instance: yield this.getInstance()
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
} else if (e.touches.length == 2) {
|
|||
|
|
var start = getDistanceByTouches(touches);
|
|||
|
|
var end = getDistanceByTouches(e.touches);
|
|||
|
|
scaleImage({
|
|||
|
|
instance: yield this.getInstance(),
|
|||
|
|
check: !area.bounce,
|
|||
|
|
scale: (end.c - start.c) / 100,
|
|||
|
|
x: end.x,
|
|||
|
|
y: end.y
|
|||
|
|
});
|
|||
|
|
touchType = "scale";
|
|||
|
|
} else if (touchType === "scale") {
|
|||
|
|
touchType = "move";
|
|||
|
|
} else {
|
|||
|
|
changeImageRect({
|
|||
|
|
instance: yield this.getInstance(),
|
|||
|
|
check: !area.bounce,
|
|||
|
|
x: e.touches[0].pageX - touches[0].pageX,
|
|||
|
|
y: e.touches[0].pageY - touches[0].pageY
|
|||
|
|
});
|
|||
|
|
touchType = "move";
|
|||
|
|
}
|
|||
|
|
touches = e.touches;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 触摸结束
|
|||
|
|
* @param {Object} e 事件对象
|
|||
|
|
* @param {Object} o 组件实例对象
|
|||
|
|
*/
|
|||
|
|
touchend: function(e, o) {
|
|||
|
|
return __async(this, null, function* () {
|
|||
|
|
if (!img.src)
|
|||
|
|
return;
|
|||
|
|
if (touchType === "stretch") {
|
|||
|
|
var left = areaOffset.left;
|
|||
|
|
var right = areaOffset.right;
|
|||
|
|
var top = areaOffset.top;
|
|||
|
|
var bottom = areaOffset.bottom;
|
|||
|
|
var w = area.width + right - left;
|
|||
|
|
var h = area.height + bottom - top;
|
|||
|
|
var p = scale * (area.width / w) - scale;
|
|||
|
|
areaOffset = { left: 0, right: 0, top: 0, bottom: 0 };
|
|||
|
|
changeAreaRect({
|
|||
|
|
instance: yield this.getInstance()
|
|||
|
|
});
|
|||
|
|
scaleImage({
|
|||
|
|
instance: yield this.getInstance(),
|
|||
|
|
scale: p,
|
|||
|
|
x: area.left + left + (1 === activeAngle || 3 === activeAngle ? w : 0),
|
|||
|
|
y: area.top + top + (1 === activeAngle || 2 === activeAngle ? h : 0)
|
|||
|
|
});
|
|||
|
|
} else if (area.bounce) {
|
|||
|
|
changeImageRect({
|
|||
|
|
instance: yield this.getInstance(),
|
|||
|
|
check: true
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 顺时针翻转图片90°
|
|||
|
|
* @param {Object} e 事件对象
|
|||
|
|
* @param {Object} o 组件实例对象
|
|||
|
|
*/
|
|||
|
|
rotateImage: function(r) {
|
|||
|
|
return __async(this, null, function* () {
|
|||
|
|
rotate = (rotate + (r || 90)) % 360;
|
|||
|
|
if (img.minScale >= 1 && area.checkRange) {
|
|||
|
|
minScale = 1;
|
|||
|
|
if (img.width < area.height) {
|
|||
|
|
minScale = area.height / img.oldWidth;
|
|||
|
|
} else if (img.height < area.width) {
|
|||
|
|
minScale = area.width / img.oldHeight;
|
|||
|
|
}
|
|||
|
|
if (minScale !== 1) {
|
|||
|
|
scaleImage({
|
|||
|
|
instance: yield this.getInstance(),
|
|||
|
|
scale: minScale - scale,
|
|||
|
|
x: sys.windowWidth / 2,
|
|||
|
|
y: (sys.windowHeight - sys.offsetBottom) / 2
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
var ox = (offset.x + img.width - area.right - (area.left - offset.x)) / 2;
|
|||
|
|
var oy = (offset.y + img.height - area.bottom - (area.top - offset.y)) / 2;
|
|||
|
|
changeImageRect({
|
|||
|
|
instance: yield this.getInstance(),
|
|||
|
|
check: true,
|
|||
|
|
x: -ox - oy,
|
|||
|
|
y: -oy + ox
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
rotateImage90: function() {
|
|||
|
|
this.rotateImage(90);
|
|||
|
|
},
|
|||
|
|
rotateImage270: function() {
|
|||
|
|
this.rotateImage(270);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// <stdin>
|
|||
|
|
qf_image_cropper_render_default.setPlatform("APP");
|
|||
|
|
var stdin_default = {
|
|||
|
|
mixins: [qf_image_cropper_render_default]
|
|||
|
|
};
|
|||
|
|
return __toCommonJS(stdin_exports);
|
|||
|
|
})();
|