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-09 09:19:39 +08:00
commit f4cdf700f2
9 changed files with 0 additions and 507 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
App.vue
View File

@ -1,17 +0,0 @@
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
</style>

20
index.html
View File

@ -1,20 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
CSS.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<title></title>
<!--preload-links-->
<!--app-context-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
</body>
</html>

22
main.js
View File

@ -1,22 +0,0 @@
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif

72
manifest.json
View File

@ -1,72 +0,0 @@
{
"name" : "canvas",
"appid" : "__UNI__EBE2302",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
/* 模块配置 */
"modules" : {},
/* 应用发布信息 */
"distribute" : {
/* android打包配置 */
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
/* ios打包配置 */
"ios" : {},
/* SDK配置 */
"sdkConfigs" : {}
}
},
/* 快应用特有相关 */
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "wx5c9edf82da6032c4",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics" : {
"enable" : false
},
"vueVersion" : "3"
}

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

BIN
pages/index/.DS_Store vendored
View File

Binary file not shown.

259
pages/index/index.vue
View File

@ -1,259 +0,0 @@
<template>
<view>
<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->
<!-- // @touchstart="handleCanvasTouch" -->
<canvas @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" :style="{
width: 1000 + 'px',
height: 800 + 'px',
transform: `translate(${offsetX}px, ${offsetY}px) scale(${scale})`
}" canvas-id="canvas" id="canvas"></canvas>
<!-- style="border: 1px solid red;height: 600px;width: 100vw;" -->
<image src="https://assets.sx25.troyrc.com/sx25/images/events/XBDT.jpg"></image>
<!-- 添加一个按钮，用于触发绘图 -->
<button @click="handleDraw">点击绘制圆形</button>
</view>
</template>
<script setup>
import {
ref,
onMounted,
getCurrentInstance
} from 'vue'
import {
onReady
} from '@dcloudio/uni-app'
const canvasWidth = ref(375) // 动态设置Canvas宽度
const canvasHeight = ref(400) // 动态设置Canvas高度
const instance = getCurrentInstance()
const scale = ref(1)
const offsetX = ref(0)
const offsetY = ref(0)
const lastDistance = ref(-1)
const startX = ref(0)
const startY = ref(0)
const isDragging = ref(false)
const imgUrl = ref('https://assets.sx25.troyrc.com/sx25/images/events/XBDT.jpg'); // 修改为ref
// 定义图形数组
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 ctx = uni.createCanvasContext('canvas', instance) // 创建canvas绘图上下文
ctx.scale(scale.value, scale.value);
const res = await uni.getImageInfo({
src: imgUrl.value,
})
ctx.drawImage(res.path, 0, 0);
// 绘制每个图形
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.beginPath();
// ctx.moveTo(50, 50); // 左下角点
// ctx.lineTo(150, 50); // 右下角点
// ctx.lineTo(200, 100); // 右上角点
// ctx.lineTo(100, 100); // 左上角点
// ctx.closePath(); // 闭合路径
// ctx.stroke(); // 绘制边框
// 先不删
// let xoffset = 0, yoffset = 0, flag = false;
// polygonList.forEach((level, index) => {
// // console.log('level',level)
// ctx.moveTo(level.polygon[0] + xoffset, level.polygon[0] + yoffset)
// level.polygon.forEach((level2,level2Index)=>{
// ctx.beginPath()
// if(level2Index != level.polygon.length ){
// ctx.lineTo(level2 + xoffset, level.polygon[level2Index+1])
// console.log(level2 + xoffset, level.polygon[level2Index+1])
// }else{
// ctx.lineTo(level2 + xoffset, level.polygon[0])
// console.log(level2 + xoffset, level.polygon[0])
// }
// ctx.closePath()
// })
// if(polygonList.length == index){
// flag = true
// }
// })
ctx.draw()
}
// 处理canvas触摸事件
function handleCanvasTouch(event) {
// 获取触摸点的坐标
const x = event.touches[0].x;
const y = event.touches[0].y;
console.log(x, y, '12');
}
// 触摸开始
const handleTouchStart = (e) => {
const x = e.touches[0].x;
const y = e.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('用户点击了“取消”按钮');
}
},
});
}
});
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 x1 = e.touches[0].clientX,
y1 = e.touches[0].clientY;
const x2 = e.touches[1].clientX,
y2 = e.touches[1].clientY;
const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
if (lastDistance.value > 0) {
scale.value = Math.min(Math.max(scale.value * (distance / lastDistance.value), 0.5), 4);
draw(); // 重新绘制Canvas内容
}
}
}
// 触摸移动
const handleTouchMove = (e) => {
console.log('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 = () => {
console.log('handleTouchEnd')
lastDistance.value = -1
isDragging.value = false
}
// 按钮点击事件处理函数
const handleDraw = () => {
draw(); // 调用绘图函数
}
// onMounted(() => {
// setInterval(()=>{
// draw()
// },300)
// // 确保在组件挂载后可以获取到Canvas元素
// })
onReady(() => {
console.log('onReadyonReady');
uni.downloadFile({
url: imgUrl.value,
success: function(sres) {
console.log(sres, 'sres');
imgUrl.value = sres.tempFilePath || sres.path
draw()
},
fail: function(fres) {
console.log('fres', fres)
}
})
})
// 判断点是否在四边形内
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>

13
uni.promisify.adaptor.js
View File

@ -1,13 +0,0 @@
uni.addInterceptor({
returnValue (res) {
if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
return res;
}
return new Promise((resolve, reject) => {
res.then((res) => {
if (!res) return resolve(res)
return res[0] ? reject(res[0]) : resolve(res[1])
});
});
},
});

76
uni.scss
View File

@ -1,76 +0,0 @@
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;
/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
/* 边框颜色 */
$uni-border-color:#c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16px;
/* 图片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;
/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;
/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;