diff --git a/pages.json b/pages.json
deleted file mode 100644
index aed7ae0..0000000
--- a/pages.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
- "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
- {
- "path": "pages/index/index_step4",
- "style": {
- "navigationBarTitleText": "step"
- }
- },{
- "path": "pages/index/step2",
- "style": {
- "navigationBarTitleText": "fu"
- }
- },{
- "path": "pages/index/index",
- "style": {
- "navigationBarTitleText": "uni-app"
- }
- }
-
- ],
- "globalStyle": {
- "navigationBarTextStyle": "black",
- "navigationBarTitleText": "uni-app",
- "navigationBarBackgroundColor": "#F8F8F8",
- "backgroundColor": "#F8F8F8"
- },
- "uniIdRouter": {}
-}
diff --git a/pages/index/index.vue b/pages/index/index.vue
deleted file mode 100644
index 4111f59..0000000
--- a/pages/index/index.vue
+++ /dev/null
@@ -1,173 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/pages/index/index_step4.vue b/pages/index/index_step4.vue
deleted file mode 100644
index bdc7819..0000000
--- a/pages/index/index_step4.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/pages/index/indexclick.vue b/pages/index/indexclick.vue
deleted file mode 100644
index daea555..0000000
--- a/pages/index/indexclick.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/pages/index/step2.vue b/pages/index/step2.vue
deleted file mode 100644
index 7c9894b..0000000
--- a/pages/index/step2.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/unpackage/dist/dev/mp-weixin/app.js b/unpackage/dist/dev/mp-weixin/app.js
index 38a674c..0d76920 100644
--- a/unpackage/dist/dev/mp-weixin/app.js
+++ b/unpackage/dist/dev/mp-weixin/app.js
@@ -2,9 +2,9 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const common_vendor = require("./common/vendor.js");
if (!Math) {
+ "./pages/index/index.js";
"./pages/index/index_step4.js";
"./pages/index/step2.js";
- "./pages/index/index.js";
}
const _sfc_main = {
onLaunch: function() {
diff --git a/unpackage/dist/dev/mp-weixin/app.json b/unpackage/dist/dev/mp-weixin/app.json
index d4646dd..adbd472 100644
--- a/unpackage/dist/dev/mp-weixin/app.json
+++ b/unpackage/dist/dev/mp-weixin/app.json
@@ -1,8 +1,8 @@
{
"pages": [
+ "pages/index/index",
"pages/index/index_step4",
- "pages/index/step2",
- "pages/index/index"
+ "pages/index/step2"
],
"window": {
"navigationBarTextStyle": "black",
diff --git a/unpackage/dist/dev/mp-weixin/index.js b/unpackage/dist/dev/mp-weixin/index.js
index 756d3d3..987710f 100644
--- a/unpackage/dist/dev/mp-weixin/index.js
+++ b/unpackage/dist/dev/mp-weixin/index.js
@@ -3,32 +3,135 @@ const common_vendor = require("./common/vendor.js");
const _sfc_main = {
__name: "index",
setup(__props) {
- const canvasWidth = common_vendor.ref(200);
- const canvasHeight = common_vendor.ref(200);
+ 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();
- function draw() {
+ 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);
- common_vendor.index.__f__("log", "at pages/index/index.vue:20", ctx, "12");
- ctx.beginPath();
- ctx.arc(100, 100, 80, 0, Math.PI * 2);
- ctx.setFillStyle("rgba(0, 0, 0, 1)");
- ctx.fill();
- ctx.beginPath();
- ctx.arc(100, 100, 75, 0, Math.PI * 2);
- ctx.setFillStyle("white");
- ctx.fill();
+ 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: canvasWidth.value,
- b: canvasHeight.value,
- c: common_vendor.o(handleDraw)
+ a: common_vendor.o(handleCanvasTouch),
+ b: common_vendor.o(handleCanvasTouchMove),
+ c: common_vendor.o(handleCanvasTouchEnd),
+ d: common_vendor.o(handleDraw)
};
};
}
diff --git a/unpackage/dist/dev/mp-weixin/project.config.json b/unpackage/dist/dev/mp-weixin/project.config.json
index 1a75e49..cd73585 100644
--- a/unpackage/dist/dev/mp-weixin/project.config.json
+++ b/unpackage/dist/dev/mp-weixin/project.config.json
@@ -19,7 +19,7 @@
},
"compileType": "miniprogram",
"libVersion": "3.8.3",
- "appid": "touristappid",
+ "appid": "wx5c9edf82da6032c4",
"projectname": "canvas",
"condition": {},
"editorSetting": {