renyt/canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
renyt 2025-05-08 17:36:20 +08:00
parent 9fc632a79d
commit 0a3db13862
9 changed files with 122 additions and 415 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
pages.json
View File

@ -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": {}
}

173
pages/index/index.vue
View File

@ -1,173 +0,0 @@
<template>
<view>
<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->
<canvas @touchstart="handleCanvasTouch" @touchmove="handleCanvasTouchMove" @touchend="handleCanvasTouchEnd"
canvas-id="canvas" id="canvas" style="border: 1px solid red;height: 600px;width: 1000px;"></canvas>
<!-- 添加一个按钮，用于触发绘图 -->
<button @click="handleDraw">点击绘制圆形</button>
</view>
</template>
<script setup>
import {
ref,
onMounted,
getCurrentInstance
} from 'vue'
// 平移和缩放状态
const translateX = ref(0);
const translateY = ref(0);
const scale = ref(1);
const canvasWidth = ref(375) // 动态设置Canvas宽度
const canvasHeight = ref(400) // 动态设置Canvas高度
const instance = getCurrentInstance()
// 定义图形数组
const blocks = 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 = uni.createCanvasContext('canvas', instance) // 创建canvas绘图上下文
ctx.translate(translateX.value, translateY.value );
ctx.scale(scale.value, scale.value);
const res = await uni.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()
}
// 处理canvas触摸移动事件
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(); // 重新绘制
}
// 处理canvas触摸结束事件
function handleCanvasTouchEnd(event) {
// 保存当前触摸点的初始位置
event.touches.forEach((touch) => {
touch.startX = touch.x;
touch.startY = touch.y;
});
}
// 处理canvas触摸事件
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)) {
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元素
})
// 判断点是否在四边形内
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;
}
</script>
<style scoped>
button {
margin-top: 10px;
}
</style>

53
pages/index/index_step4.vue
View File

@ -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>

125
pages/index/indexclick.vue
View File

@ -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>

17
pages/index/step2.vue
View File

@ -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
View File

@ -2,9 +2,9 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" }); Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const common_vendor = require("./common/vendor.js"); const common_vendor = require("./common/vendor.js");
if (!Math) { if (!Math) {
"./pages/index/index.js";
"./pages/index/index_step4.js"; "./pages/index/index_step4.js";
"./pages/index/step2.js"; "./pages/index/step2.js";
"./pages/index/index.js";
} }
const _sfc_main = { const _sfc_main = {
onLaunch: function() { onLaunch: function() {

4
unpackage/dist/dev/mp-weixin/app.json vendored
View File

@ -1,8 +1,8 @@
{ {
"pages": [ "pages": [
"pages/index/index",
"pages/index/index_step4", "pages/index/index_step4",
"pages/index/step2", "pages/index/step2"
"pages/index/index"
], ],
"window": { "window": {
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",

131
unpackage/dist/dev/mp-weixin/index.js vendored
View File

@ -3,32 +3,135 @@ const common_vendor = require("./common/vendor.js");
const _sfc_main = { const _sfc_main = {
__name: "index", __name: "index",
setup(__props) { setup(__props) {
const canvasWidth = common_vendor.ref(200); const translateX = common_vendor.ref(0);
const canvasHeight = common_vendor.ref(200); 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 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); const ctx = common_vendor.index.createCanvasContext("canvas", instance);
common_vendor.index.__f__("log", "at pages/index/index.vue:20", ctx, "12"); 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.beginPath();
ctx.arc(100, 100, 80, 0, Math.PI * 2); ctx.fillStyle = block.color;
ctx.setFillStyle("rgba(0, 0, 0, 1)"); switch (block.type) {
ctx.fill(); case "quadrilateral":
ctx.beginPath(); ctx.moveTo(block.points[0].x, block.points[0].y);
ctx.arc(100, 100, 75, 0, Math.PI * 2); for (let i = 1; i < block.points.length; i++) {
ctx.setFillStyle("white"); ctx.lineTo(block.points[i].x, block.points[i].y);
ctx.fill(); }
ctx.closePath();
break;
}
ctx.stroke();
});
ctx.draw(); 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 = () => { const handleDraw = () => {
draw(); draw();
}; };
common_vendor.onMounted(() => { 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 (_ctx, _cache) => {
return { return {
a: canvasWidth.value, a: common_vendor.o(handleCanvasTouch),
b: canvasHeight.value, b: common_vendor.o(handleCanvasTouchMove),
c: common_vendor.o(handleDraw) c: common_vendor.o(handleCanvasTouchEnd),
d: common_vendor.o(handleDraw)
}; };
}; };
} }

2
unpackage/dist/dev/mp-weixin/project.config.json vendored
View File

@ -19,7 +19,7 @@
}, },
"compileType": "miniprogram", "compileType": "miniprogram",
"libVersion": "3.8.3", "libVersion": "3.8.3",
"appid": "touristappid", "appid": "wx5c9edf82da6032c4",
"projectname": "canvas", "projectname": "canvas",
"condition": {}, "condition": {},
"editorSetting": { "editorSetting": {