142 lines
4.5 KiB
JavaScript
142 lines
4.5 KiB
JavaScript
"use strict";
|
|
const common_vendor = require("./common/vendor.js");
|
|
const _sfc_main = {
|
|
__name: "index",
|
|
setup(__props) {
|
|
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();
|
|
});
|
|
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 {
|
|
a: common_vendor.o(handleCanvasTouch),
|
|
b: common_vendor.o(handleCanvasTouchMove),
|
|
c: common_vendor.o(handleCanvasTouchEnd),
|
|
d: 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
|