94 lines
3.6 KiB
JavaScript
94 lines
3.6 KiB
JavaScript
"use strict";
|
|
const common_vendor = require("./common/vendor.js");
|
|
const _sfc_main = {
|
|
__name: "index",
|
|
setup(__props) {
|
|
common_vendor.ref(375);
|
|
common_vendor.ref(400);
|
|
const instance = common_vendor.getCurrentInstance();
|
|
const scale = common_vendor.ref(1);
|
|
const offsetX = common_vendor.ref(0);
|
|
const offsetY = common_vendor.ref(0);
|
|
const lastDistance = common_vendor.ref(-1);
|
|
const startX = common_vendor.ref(0);
|
|
const startY = common_vendor.ref(0);
|
|
const isDragging = common_vendor.ref(false);
|
|
const imgUrl = common_vendor.ref("https://assets.sx25.troyrc.com/sx25/images/events/XBDT.jpg");
|
|
async function draw() {
|
|
const ctx = common_vendor.index.createCanvasContext("canvas", instance);
|
|
ctx.save();
|
|
ctx.translate(offsetX.value, offsetY.value);
|
|
ctx.scale(scale.value, scale.value);
|
|
const res = await common_vendor.index.getImageInfo({ src: imgUrl.value });
|
|
ctx.drawImage(res.path, 0, 0);
|
|
ctx.restore();
|
|
ctx.draw();
|
|
}
|
|
const handleTouchStart = (e) => {
|
|
common_vendor.index.__f__("log", "at pages/index/index.vue:103", "handleTouchStart");
|
|
if (e.touches.length === 1) {
|
|
startX.value = e.touches[0].clientX - offsetX.value;
|
|
startY.value = e.touches[0].clientY - offsetY.value;
|
|
isDragging.value = true;
|
|
} else if (e.touches.length === 2) {
|
|
const x1 = e.touches[0].clientX;
|
|
const y1 = e.touches[0].clientY;
|
|
const x2 = e.touches[1].clientX;
|
|
const y2 = e.touches[1].clientY;
|
|
lastDistance.value = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
|
|
}
|
|
};
|
|
const handleTouchMove = (e) => {
|
|
if (e.touches.length === 1 && isDragging.value) {
|
|
offsetX.value = e.touches[0].clientX - startX.value;
|
|
offsetY.value = e.touches[0].clientY - startY.value;
|
|
} else if (e.touches.length === 2) {
|
|
const x1 = e.touches[0].clientX, y1 = e.touches[0].clientY;
|
|
const x2 = e.touches[1].clientX, y2 = e.touches[1].clientY;
|
|
const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
|
|
if (lastDistance.value > 0) {
|
|
scale.value = Math.min(Math.max(scale.value * (distance / lastDistance.value), 0.5), 4);
|
|
draw();
|
|
}
|
|
lastDistance.value = distance;
|
|
}
|
|
};
|
|
const handleTouchEnd = () => {
|
|
common_vendor.index.__f__("log", "at pages/index/index.vue:167", "handleTouchEnd");
|
|
lastDistance.value = -1;
|
|
isDragging.value = false;
|
|
};
|
|
const handleDraw = () => {
|
|
draw();
|
|
};
|
|
common_vendor.onReady(() => {
|
|
common_vendor.index.__f__("log", "at pages/index/index.vue:184", "onReadyonReady");
|
|
common_vendor.index.downloadFile({
|
|
url: imgUrl.value,
|
|
success: function(sres) {
|
|
common_vendor.index.__f__("log", "at pages/index/index.vue:188", sres, "sres");
|
|
imgUrl.value = sres.tempFilePath || sres.path;
|
|
draw();
|
|
},
|
|
fail: function(fres) {
|
|
common_vendor.index.__f__("log", "at pages/index/index.vue:194", "fres", fres);
|
|
}
|
|
});
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return {
|
|
a: common_vendor.o(handleTouchStart),
|
|
b: common_vendor.o(handleTouchMove),
|
|
c: common_vendor.o(handleTouchEnd),
|
|
d: "1000px",
|
|
e: "800px",
|
|
f: `translate(${offsetX.value}px, ${offsetY.value}px) scale(${scale.value})`,
|
|
g: common_vendor.o(handleDraw)
|
|
};
|
|
};
|
|
}
|
|
};
|
|
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-1cf27b2a"]]);
|
|
exports.MiniProgramPage = MiniProgramPage;
|
|
//# sourceMappingURL=../.sourcemap/mp-weixin/index.js.map
|