Compare commits
3 Commits
c224ee0a44
...
7aacf24705
| Author | SHA1 | Date | |
|---|---|---|---|
| 7aacf24705 | |||
| 0a3db13862 | |||
| 9fc632a79d |
28
pages.json
28
pages.json
@ -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": {}
|
||||
}
|
||||
@ -1,53 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->
|
||||
<canvas canvas-id="canvas" id="canvas" style="width: 200px; height: 200px;border: 1px solid red;" :width="canvasWidth" :height="canvasHeight"></canvas>
|
||||
|
||||
<!-- 添加一个按钮，用于触发绘图 -->
|
||||
<button @click="handleDraw">跳转step2</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted ,getCurrentInstance } from 'vue'
|
||||
|
||||
const canvasWidth = ref(200) // 动态设置Canvas宽度
|
||||
const canvasHeight = ref(200) // 动态设置Canvas高度
|
||||
const instance = getCurrentInstance()
|
||||
// 定义绘图函数
|
||||
function draw() {
|
||||
const ctx = uni.createCanvasContext('canvas',instance) // 创建canvas绘图上下文
|
||||
console.log(ctx,'12');
|
||||
// 绘制外圆
|
||||
ctx.beginPath() // 开始路径
|
||||
ctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形
|
||||
ctx.setFillStyle('rgba(100, 220, 0, 1)') // 设置填充颜色为黑色，无透明度
|
||||
ctx.fill() // 填充所创建的路径
|
||||
|
||||
// 绘制内圆以形成环形效果
|
||||
ctx.beginPath() // 开始新的路径
|
||||
ctx.arc(100, 100, 75, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形
|
||||
ctx.setFillStyle('white') // 设置填充颜色为白色
|
||||
ctx.fill() // 填充以“清除”内部区域，形成环形
|
||||
ctx.draw()
|
||||
}
|
||||
|
||||
// 按钮点击事件处理函数
|
||||
const handleDraw = () => {
|
||||
uni.navigateTo({
|
||||
url:'/pages/index/step2'
|
||||
})
|
||||
draw(); // 调用绘图函数
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
draw()
|
||||
// 确保在组件挂载后可以获取到Canvas元素
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -1,125 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->
|
||||
<canvas @touchstart="handleCanvasTouch" canvas-id="canvas" id="canvas"
|
||||
style="border: 1px solid red;height: 600px;width: 100vw;"></canvas>
|
||||
|
||||
<!-- 添加一个按钮，用于触发绘图 -->
|
||||
<button @click="handleDraw">点击绘制圆形</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
getCurrentInstance
|
||||
} from 'vue'
|
||||
|
||||
const canvasWidth = ref(375) // 动态设置Canvas宽度
|
||||
const canvasHeight = ref(400) // 动态设置Canvas高度
|
||||
const instance = getCurrentInstance()
|
||||
// 定义绘图函数
|
||||
const blocks = ref([{
|
||||
x: 50,
|
||||
y: 50,
|
||||
width: 100,
|
||||
height: 100,
|
||||
color: 'red',
|
||||
message: '点击了红色方块'
|
||||
},
|
||||
{
|
||||
x: 200,
|
||||
y: 50,
|
||||
width: 100,
|
||||
height: 100,
|
||||
color: 'blue',
|
||||
message: '点击了蓝色方块'
|
||||
},
|
||||
{
|
||||
x: 50,
|
||||
y: 200,
|
||||
width: 100,
|
||||
height: 100,
|
||||
color: 'green',
|
||||
message: '点击了绿色方块'
|
||||
},
|
||||
{
|
||||
x: 200,
|
||||
y: 200,
|
||||
width: 100,
|
||||
height: 100,
|
||||
color: 'yellow',
|
||||
message: '点击了黄色方块'
|
||||
},
|
||||
{
|
||||
x: 350,
|
||||
y: 50,
|
||||
width: 100,
|
||||
height: 100,
|
||||
color: 'purple',
|
||||
message: '点击了紫色方块'
|
||||
},
|
||||
])
|
||||
|
||||
async function draw() {
|
||||
const imgUrl = "https://assets.sx25.troyrc.com/sx25/images/events/XBDT.jpg"
|
||||
const ctx = uni.createCanvasContext('canvas', instance) // 创建canvas绘图上下文
|
||||
const res = await uni.getImageInfo({
|
||||
src: imgUrl,
|
||||
})
|
||||
console.log(res, 'res');
|
||||
ctx.drawImage(res.path, 0, 0, canvasWidth.value, canvasHeight.value);
|
||||
|
||||
// 定义5个方块的颜色和位置
|
||||
|
||||
// 绘制每个方块
|
||||
blocks.value.forEach((block) => {
|
||||
ctx.beginPath();
|
||||
ctx.fillStyle = block.color;
|
||||
ctx.rect(block.x, block.y, block.width, block.height);
|
||||
ctx.fill();
|
||||
});
|
||||
ctx.draw()
|
||||
}
|
||||
// 处理canvas触摸事件
|
||||
function handleCanvasTouch(event) {
|
||||
// 获取触摸点的坐标
|
||||
const x = event.touches[0].x;
|
||||
const y = event.touches[0].y;
|
||||
// 定义5个方块的颜色和位置
|
||||
|
||||
// 判断点击位置
|
||||
blocks.value.forEach((block) => {
|
||||
if (x >= block.x && x <= block.x + block.width && y >= block.y && y <= block.y + block.height) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: block.message,
|
||||
showCancel: true, // 显示取消按钮
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击了“确定”按钮');
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击了“取消”按钮');
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
// 按钮点击事件处理函数
|
||||
const handleDraw = () => {
|
||||
draw(); // 调用绘图函数
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
draw()
|
||||
// 确保在组件挂载后可以获取到Canvas元素
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -1,17 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
<indexstep2></indexstep2>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import indexstep2 from "./index.vue"
|
||||
import {
|
||||
ref
|
||||
} from 'vue'
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
2
unpackage/dist/dev/mp-weixin/app.js
vendored
2
unpackage/dist/dev/mp-weixin/app.js
vendored
@ -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() {
|
||||
|
||||
4
unpackage/dist/dev/mp-weixin/app.json
vendored
4
unpackage/dist/dev/mp-weixin/app.json
vendored
@ -1,8 +1,8 @@
|
||||
{
|
||||
"pages": [
|
||||
"pages/index/index",
|
||||
"pages/index/index_step4",
|
||||
"pages/index/step2",
|
||||
"pages/index/index"
|
||||
"pages/index/step2"
|
||||
],
|
||||
"window": {
|
||||
"navigationBarTextStyle": "black",
|
||||
|
||||
132
unpackage/dist/dev/mp-weixin/index.js
vendored
132
unpackage/dist/dev/mp-weixin/index.js
vendored
@ -3,6 +3,112 @@ 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();
|
||||
@ -78,9 +184,34 @@ const _sfc_main = {
|
||||
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),
|
||||
@ -88,6 +219,7 @@ const _sfc_main = {
|
||||
e: "800px",
|
||||
f: `translate(${offsetX.value}px, ${offsetY.value}px) scale(${scale.value})`,
|
||||
g: common_vendor.o(handleDraw)
|
||||
>>>>>>> c224ee0a440c37a515ef0081348c5d861d979aee
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user