230 lines
8.0 KiB
JavaScript
230 lines
8.0 KiB
JavaScript
"use strict";
|
|
const common_vendor = require("./common/vendor.js");
|
|
const _sfc_main = {
|
|
__name: "index",
|
|
setup(__props) {
|
|
<<<<<<< HEAD
|
|
const translateX = common_vendor.ref(0);
|
|
const translateY = common_vendor.ref(0);
|
|
const scale = common_vendor.ref(1);
|
|
const canvasWidth = common_vendor.ref(375);
|
|
const canvasHeight = common_vendor.ref(400);
|
|
const instance = common_vendor.getCurrentInstance();
|
|
const blocks = common_vendor.ref([{
|
|
points: [
|
|
{
|
|
x: 50,
|
|
y: 50
|
|
},
|
|
// 左下角点
|
|
{
|
|
x: 150,
|
|
y: 50
|
|
},
|
|
// 右下角点
|
|
{
|
|
x: 200,
|
|
y: 100
|
|
},
|
|
// 右上角点
|
|
{
|
|
x: 100,
|
|
y: 100
|
|
}
|
|
// 左上角点
|
|
],
|
|
message: "点击了四边形",
|
|
type: "quadrilateral"
|
|
}]);
|
|
async function draw() {
|
|
const imgUrl = "https://assets.sx25.troyrc.com/sx25/images/events/XBDT.jpg";
|
|
const ctx = common_vendor.index.createCanvasContext("canvas", instance);
|
|
ctx.translate(translateX.value, translateY.value);
|
|
ctx.scale(scale.value, scale.value);
|
|
const res = await common_vendor.index.getImageInfo({
|
|
src: imgUrl
|
|
});
|
|
ctx.drawImage(res.path, 0, 0, canvasWidth.value, canvasHeight.value);
|
|
blocks.value.forEach((block) => {
|
|
ctx.beginPath();
|
|
ctx.fillStyle = block.color;
|
|
switch (block.type) {
|
|
case "quadrilateral":
|
|
ctx.moveTo(block.points[0].x, block.points[0].y);
|
|
for (let i = 1; i < block.points.length; i++) {
|
|
ctx.lineTo(block.points[i].x, block.points[i].y);
|
|
}
|
|
ctx.closePath();
|
|
break;
|
|
}
|
|
ctx.stroke();
|
|
});
|
|
ctx.draw();
|
|
}
|
|
function handleCanvasTouchMove(event) {
|
|
if (event.touches.length === 1) {
|
|
translateX.value += event.touches[0].x - event.touches[0].startX;
|
|
translateY.value += event.touches[0].y - event.touches[0].startY;
|
|
} else if (event.touches.length === 2) {
|
|
const distance1 = Math.sqrt(
|
|
(event.touches[0].x - event.touches[1].x) ** 2 + (event.touches[0].y - event.touches[1].y) ** 2
|
|
);
|
|
const distance2 = Math.sqrt(
|
|
(event.touches[0].startX - event.touches[1].startX) ** 2 + (event.touches[0].startY - event.touches[1].startY) ** 2
|
|
);
|
|
scale.value *= distance1 / distance2;
|
|
}
|
|
draw();
|
|
}
|
|
function handleCanvasTouchEnd(event) {
|
|
event.touches.forEach((touch) => {
|
|
touch.startX = touch.x;
|
|
touch.startY = touch.y;
|
|
});
|
|
}
|
|
function handleCanvasTouch(event) {
|
|
const x = event.touches[0].x;
|
|
const y = event.touches[0].y;
|
|
blocks.value.forEach((block) => {
|
|
if (isPointInQuadrilateral(x, y, block.points)) {
|
|
common_vendor.index.showModal({
|
|
title: "提示",
|
|
content: block.message,
|
|
showCancel: true,
|
|
// 显示取消按钮
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
common_vendor.index.__f__("log", "at pages/index/index.vue:128", "用户点击了“确定”按钮");
|
|
} else if (res.cancel) {
|
|
common_vendor.index.__f__("log", "at pages/index/index.vue:130", "用户点击了“取消”按钮");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
const handleDraw = () => {
|
|
draw();
|
|
};
|
|
common_vendor.onMounted(() => {
|
|
draw();
|
|
=======
|
|
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.scale(scale.value, scale.value);
|
|
const res = await common_vendor.index.getImageInfo({
|
|
src: imgUrl.value
|
|
});
|
|
ctx.drawImage(res.path, 0, 0);
|
|
ctx.draw();
|
|
}
|
|
const handleTouchStart = (e) => {
|
|
common_vendor.index.__f__("log", "at pages/index/index.vue:93", "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) => {
|
|
common_vendor.index.__f__("log", "at pages/index/index.vue:111", "handleTouchMove");
|
|
if (e.touches.length === 1 && isDragging.value) {
|
|
const currentX = e.touches[0].clientX - startX.value;
|
|
const currentY = e.touches[0].clientY - startY.value;
|
|
offsetX.value = currentX;
|
|
offsetY.value = currentY;
|
|
} 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;
|
|
const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
|
|
if (lastDistance.value > 0) {
|
|
const newScale = scale.value * (distance / lastDistance.value);
|
|
scale.value = Math.min(Math.max(newScale, 0.5), 4);
|
|
}
|
|
lastDistance.value = distance;
|
|
}
|
|
};
|
|
const handleTouchEnd = () => {
|
|
common_vendor.index.__f__("log", "at pages/index/index.vue:136", "handleTouchEnd");
|
|
lastDistance.value = -1;
|
|
isDragging.value = false;
|
|
};
|
|
const handleDraw = () => {
|
|
draw();
|
|
};
|
|
common_vendor.onReady(() => {
|
|
common_vendor.index.__f__("log", "at pages/index/index.vue:153", "onReadyonReady");
|
|
common_vendor.index.downloadFile({
|
|
url: imgUrl.value,
|
|
success: function(sres) {
|
|
common_vendor.index.__f__("log", "at pages/index/index.vue:157", sres, "sres");
|
|
imgUrl.value = sres.tempFilePath || sres.path;
|
|
draw();
|
|
},
|
|
fail: function(fres) {
|
|
common_vendor.index.__f__("log", "at pages/index/index.vue:161", "fres", fres);
|
|
}
|
|
});
|
|
>>>>>>> c224ee0a440c37a515ef0081348c5d861d979aee
|
|
});
|
|
function isPointInQuadrilateral(px, py, points) {
|
|
let inside = false;
|
|
const n = points.length;
|
|
let p1 = points[0];
|
|
for (let i = 1; i <= n; i++) {
|
|
let p2 = points[i % n];
|
|
if (py > Math.min(p1.y, p2.y) && py <= Math.max(p1.y, p2.y) && px <= Math.max(p1.x, p2.x)) {
|
|
if (p1.y !== p2.y) {
|
|
let xinters = (py - p1.y) * (p2.x - p1.x) / (p2.y - p1.y) + p1.x;
|
|
if (p1.x === p2.x || px <= xinters) {
|
|
inside = !inside;
|
|
}
|
|
}
|
|
}
|
|
p1 = p2;
|
|
}
|
|
return inside;
|
|
}
|
|
return (_ctx, _cache) => {
|
|
return {
|
|
<<<<<<< HEAD
|
|
a: common_vendor.o(handleCanvasTouch),
|
|
b: common_vendor.o(handleCanvasTouchMove),
|
|
c: common_vendor.o(handleCanvasTouchEnd),
|
|
d: common_vendor.o(handleDraw)
|
|
=======
|
|
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)
|
|
>>>>>>> c224ee0a440c37a515ef0081348c5d861d979aee
|
|
};
|
|
};
|
|
}
|
|
};
|
|
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-1cf27b2a"]]);
|
|
exports.MiniProgramPage = MiniProgramPage;
|
|
//# sourceMappingURL=../.sourcemap/mp-weixin/index.js.map
|