Compare commits

..

No commits in common. "main_canvas_step2" and "main_canvas" have entirely different histories.

51 changed files with 77 additions and 1897 deletions

View File

@ -7,13 +7,7 @@
"transformPx" : false,
/* 5+App */
"app-plus" : {
"canvas2d": true,
"optimization": {
"subPackages": true
},
"usingComponents": {
"canvas": true
},
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {

View File

@ -1,17 +1,11 @@
{
"pages": [ //pageshttps://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/step2",
"style": {
"navigationBarTitleText": "fu"
}
},{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",

View File

@ -1,310 +1,46 @@
<template>
<view class="container">
<view class="screen">银幕</view>
<canvas
canvas-id="seatCanvas"
type="2d"
class="seat-canvas"
@touchstart="handleTouchStart"
@touchmove="handleTouchMove"
@touchend="handleTouchEnd"
></canvas>
<view class="legend">
<view class="legend-item">
<view class="seat-icon available"></view>
<text>可选</text>
</view>
<view class="legend-item">
<view class="seat-icon selected"></view>
<text>已选</text>
</view>
<view class="legend-item">
<view class="seat-icon sold"></view>
<text>已售</text>
</view>
</view>
<view class="selected-seats">
<text>已选座位{{ selectedSeats.join(', ') || '无' }}</text>
</view>
</view>
<view>
<!-- 定义canvas画布 // canvas200x200 -->
<canvas canvas-id="canvas" id="canvas" style="width: 200px; height: 200px;"></canvas>
<!-- 添加一个按钮用于触发绘图 -->
<button @click="handleDraw()">点击绘制圆形</button>
</view>
</template>
<script>
export default {
data() {
return {
ctx: null,
canvasWidth: 0,
canvasHeight: 0,
seatSize: 30,
gap: 10,
rows: 8,
cols: 10,
seats: [],
selectedSeats: [],
touchStartX: 0,
touchStartY: 0,
offsetX: 0,
offsetY: 0,
scale: 1
}
},
onReady() {
this.initSeats()
this.initCanvas()
},
methods: {
initSeats() {
//
for (let i = 0; i < this.rows; i++) {
this.seats[i] = []
for (let j = 0; j < this.cols; j++) {
//
const isSold = Math.random() < 0.2
this.seats[i][j] = {
row: i,
col: j,
status: isSold ? 'sold' : 'available', // available, selected, sold
x: 0,
y: 0
}
}
}
},
async initCanvas() {
// canvas
const { canvas, width, height } = await this.getCanvasNode('seatCanvas')
this.canvasWidth = width
this.canvasHeight = height
this.ctx = canvas.getContext('2d')
// 使
const totalWidth = this.cols * (this.seatSize + this.gap) - this.gap
const totalHeight = this.rows * (this.seatSize + this.gap) - this.gap
this.offsetX = (this.canvasWidth - totalWidth) / 2
this.offsetY = (this.canvasHeight - totalHeight) / 2
this.drawSeats()
},
getCanvasNode(id) {
return new Promise((resolve) => {
const query = uni.createSelectorQuery().in(this)
query.select(`#${id}`)
.fields({ node: true, size: true })
.exec((res) => {
console.log('给我看看',res)
console.log('给我看看',res)
console.log('给我看看',res)
console.log('给我看看',res)
console.log('给我看看',res)
console.log('给我看看',res)
const canvas = res[0].node
const width = res[0].width
const height = res[0].height
// canvas
canvas.width = width * uni.getSystemInfoSync().pixelRatio
canvas.height = height * uni.getSystemInfoSync().pixelRatio
resolve({ canvas, width, height })
})
})
},
drawSeats() {
if (!this.ctx) return
//
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
//
this.ctx.save()
//
this.ctx.translate(this.offsetX, this.offsetY)
this.ctx.scale(this.scale, this.scale)
//
for (let i = 0; i < this.rows; i++) {
for (let j = 0; j < this.cols; j++) {
const seat = this.seats[i][j]
const x = j * (this.seatSize + this.gap)
const y = i * (this.seatSize + this.gap)
//
seat.x = x
seat.y = y
//
switch (seat.status) {
case 'available':
this.ctx.fillStyle = '#4CAF50' // 绿
break
case 'selected':
this.ctx.fillStyle = '#2196F3' //
break
case 'sold':
this.ctx.fillStyle = '#9E9E9E' //
break
}
//
this.ctx.beginPath()
this.ctx.roundRect(x, y, this.seatSize, this.seatSize, 4)
this.ctx.fill()
//
this.ctx.fillStyle = '#FFFFFF'
this.ctx.font = '12px Arial'
this.ctx.textAlign = 'center'
this.ctx.textBaseline = 'middle'
this.ctx.fillText(
`${String.fromCharCode(65 + i)}${j + 1}`,
x + this.seatSize / 2,
y + this.seatSize / 2
)
}
}
//
this.ctx.restore()
},
handleTouchStart(e) {
this.touchStartX = e.touches[0].x
this.touchStartY = e.touches[0].y
},
handleTouchMove(e) {
const touchX = e.touches[0].x
const touchY = e.touches[0].y
//
const dx = touchX - this.touchStartX
const dy = touchY - this.touchStartY
//
this.offsetX += dx
this.offsetY += dy
//
const minX = this.canvasWidth - (this.cols * (this.seatSize + this.gap) - this.gap) * this.scale
const minY = this.canvasHeight - (this.rows * (this.seatSize + this.gap) - this.gap) * this.scale
this.offsetX = Math.max(minX, Math.min(0, this.offsetX))
this.offsetY = Math.max(minY, Math.min(0, this.offsetY))
//
this.touchStartX = touchX
this.touchStartY = touchY
this.drawSeats()
},
handleTouchEnd(e) {
//
const touchX = e.changedTouches[0].x
const touchY = e.changedTouches[0].y
//
const canvasX = (touchX - this.offsetX) / this.scale
const canvasY = (touchY - this.offsetY) / this.scale
//
for (let i = 0; i < this.rows; i++) {
for (let j = 0; j < this.cols; j++) {
const seat = this.seats[i][j]
if (
canvasX >= seat.x &&
canvasX <= seat.x + this.seatSize &&
canvasY >= seat.y &&
canvasY <= seat.y + this.seatSize
) {
this.toggleSeatSelection(seat)
return
}
}
}
},
toggleSeatSelection(seat) {
if (seat.status === 'sold') return
if (seat.status === 'available') {
seat.status = 'selected'
this.selectedSeats.push(`${String.fromCharCode(65 + seat.row)}${seat.col + 1}`)
} else {
seat.status = 'available'
this.selectedSeats = this.selectedSeats.filter(
s => s !== `${String.fromCharCode(65 + seat.row)}${seat.col + 1}`
)
}
this.drawSeats()
}
}
}
<script setup>
import {
ref
} from 'vue'
//
function draw() {
const ctx = uni.createCanvasContext('canvas') // canvas
//
ctx.beginPath() //
ctx.arc(100, 100, 80, 0, Math.PI * 2) // (100, 100)80
ctx.setFillStyle('rgba(0, 0, 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() // canvas
}
//
const handleDraw = () => {
draw(); //
}
</script>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20rpx;
height: 100vh;
background-color: #f5f5f5;
}
.screen {
width: 80%;
height: 40rpx;
background: linear-gradient(to bottom, #ccc, #fff);
margin-bottom: 40rpx;
text-align: center;
font-size: 28rpx;
color: #333;
border-radius: 8rpx;
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}
.seat-canvas {
width: 100%;
height: 500rpx;
background-color: #fff;
margin-bottom: 20rpx;
border-radius: 8rpx;
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}
.legend {
display: flex;
justify-content: center;
margin-bottom: 20rpx;
}
.legend-item {
display: flex;
align-items: center;
margin: 0 20rpx;
}
.seat-icon {
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
border-radius: 4rpx;
}
.available {
background-color: #4CAF50;
}
.selected {
background-color: #2196F3;
}
.sold {
background-color: #9E9E9E;
}
.selected-seats {
padding: 20rpx;
background-color: #fff;
border-radius: 8rpx;
width: 90%;
text-align: center;
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}
<style scoped>
/* 样式部分 */
button {
margin-top: 10px;
/* 给按钮设置一些上边距以避免过于紧凑 */
}
</style>

View File

@ -1,428 +0,0 @@
<template>
<view class="container">
<canvas
canvas-id="selectCanvas"
id="selectCanvas"
type="2d"
disable-scroll="true"
@touchstart="handleTouchStart"
:style="{
width: canvasWidth + 'px',
height: canvasHeight + 'px'
}"
></canvas>
<view class="selection-info" v-if="selectedArea">
当前选中{{selectedArea.areaname}} (剩余:{{selectedArea.remain}})
</view>
</view>
</template>
<script>
export default {
data() {
return {
canvasWidth: 300,
canvasHeight: 400,
ctx: null,
areas: [], //
selectedArea: null,
colorMap: {
'A区': '#FF5252',
'B区': '#4CAF50',
'C区': '#2196F3',
'D区': '#FFC107'
}
}
},
async onLoad() {
// API
await this.loadAreaData();
},
onReady() {
setTimeout(() => {
this.initCanvas().catch(e => {
console.error('初始化失败:', e);
uni.showToast({
title: '画布初始化失败',
icon: 'none'
});
});
}, 300);
},
methods: {
//
async loadAreaData() {
try {
// API
const data = [{
"areacode": "lg0umpjukrdn",
"areaname": "C4区",
"description": "C4区",
"remain": 94,
"polygon": [131, 184, 130, 196, 146, 201, 174, 208, 174, 215, 215, 215, 258, 215, 258, 205, 257, 192, 258, 184, 215, 184, 174, 184, 131, 184]
}, {
"areacode": "pnk4022gt71m",
"areaname": "A4区-一层",
"description": "A4区-一层",
"remain": 0,
"polygon": [490, 464, 490, 475, 490, 488, 490, 499, 532, 499, 572, 499, 614, 499, 614, 488, 599, 480, 586, 474, 572, 464, 532, 464, 490, 464]
}, {
"areacode": "e0jhx1sa8194",
"areaname": "D1区-一层",
"description": "D1区-一层",
"remain": 247,
"polygon": [604, 345, 603, 385, 604, 396, 624, 439, 643, 437, 644, 417, 643, 396, 644, 367, 644, 344, 616, 345, 644, 346, 630, 344, 604, 345]
}, {
"areacode": "qxhs4574ffrh",
"areaname": "D1区-二层",
"description": "D1区-二层",
"remain": 191,
"polygon": [648, 349, 648, 386, 648, 425, 648, 452, 668, 452, 668, 462, 674, 462, 674, 425, 674, 386, 674, 349, 666, 349, 656, 349, 648, 349]
}, {
"areacode": "ar2q2e74ffrj",
"areaname": "D2区-二层",
"description": "D2区-二层",
"remain": 122,
"polygon": [647, 240, 648, 270, 648, 309, 648, 350, 657, 350, 665, 350, 673, 350, 673, 309, 673, 270, 673, 229, 667, 229, 667, 239, 647, 240]
}, {
"areacode": "qar2r374ffrl",
"areaname": "D2区-一层",
"description": "D2区-一层",
"remain": 153,
"polygon": [617, 266, 605, 285, 606, 303, 606, 342, 626, 341, 645, 342, 643, 341, 642, 302, 642, 278, 642, 263, 642, 249, 626, 248, 617, 266]
}, {
"areacode": "fpfaxmsa816f",
"areaname": "A2区-一层",
"description": "A2区-一层",
"remain": 0,
"polygon": [269, 463, 269, 476, 269, 488, 269, 501, 301, 501, 332, 501, 364, 501, 364, 488, 364, 476, 364, 463, 332, 463, 301, 463, 269, 463]
}, {
"areacode": "tse56pjukrdx",
"areaname": "C3区",
"description": "C3区",
"remain": 215,
"polygon": [279, 141, 279, 174, 266, 173, 265, 180, 308, 180, 339, 180, 369, 180, 369, 167, 369, 154, 369, 141, 339, 141, 308, 141, 279, 141]
}, {
"areacode": "lpkym7ej0kmd",
"areaname": "B1区-一层",
"description": "B1区-一层",
"remain": 248,
"polygon": [104, 250, 104, 282, 104, 313, 104, 345, 118, 345, 131, 345, 145, 345, 145, 313, 145, 288, 138, 276, 131, 263, 123, 250, 104, 250]
}, {
"areacode": "r6xrfc2gt71x",
"areaname": "C3区",
"description": "C3区",
"remain": 143,
"polygon": [269, 186, 269, 196, 269, 207, 269, 217, 300, 217, 333, 217, 364, 217, 364, 207, 364, 196, 364, 186, 333, 186, 300, 186, 269, 186]
}, {
"areacode": "h84jstej0kmf",
"areaname": "C1区",
"description": "C1区",
"remain": 337,
"polygon": [477, 133, 476, 168, 491, 168, 491, 179, 519, 178, 690, 179, 689, 170, 660, 170, 659, 140, 670, 140, 670, 134, 530, 134, 477, 133]
}, {
"areacode": "tqaegcej0kmg",
"areaname": "A2区-二层",
"description": "A2区-二层",
"remain": 0,
"polygon": [278, 514, 277, 526, 256, 525, 256, 542, 289, 542, 311, 542, 311, 531, 364, 533, 364, 525, 352, 525, 352, 513, 303, 513, 278, 514]
}, {
"areacode": "606fa9ej0kmh",
"areaname": "A3区-一层",
"description": "A3区-一层",
"remain": 0,
"polygon": [384, 466, 384, 477, 384, 489, 384, 500, 416, 500, 447, 500, 479, 500, 479, 489, 479, 477, 479, 466, 447, 466, 416, 466, 384, 466]
}, {
"areacode": "2x9j4bej0km8",
"areaname": "B1区-二层",
"description": "B1区-二层",
"remain": 192,
"polygon": [74, 231, 73, 270, 73, 304, 73, 340, 84, 340, 91, 340, 101, 340, 101, 304, 101, 283, 100, 239, 80, 238, 80, 230, 74, 231]
}, {
"areacode": "81mj022gt723",
"areaname": "A4区-二层",
"description": "A4区-二层",
"remain": 0,
"polygon": [513, 511, 513, 525, 493, 525, 493, 547, 556, 547, 624, 547, 657, 546, 657, 513, 687, 513, 688, 501, 489, 500, 490, 511, 513, 511]
}, {
"areacode": "f217dy2gt72f",
"areaname": "C2区",
"description": "C2区",
"remain": 136,
"polygon": [372, 144, 372, 156, 372, 168, 372, 180, 403, 180, 434, 180, 481, 180, 481, 175, 467, 175, 467, 144, 434, 144, 403, 144, 372, 144]
}, {
"areacode": "crxllrjukre8",
"areaname": "A3区-二层",
"description": "A3区-二层",
"remain": 0,
"polygon": [386, 515, 387, 528, 376, 527, 376, 535, 436, 533, 436, 545, 486, 545, 486, 534, 486, 526, 463, 526, 464, 515, 411, 515, 386, 515]
}, {
"areacode": "kb8wtgjukre9",
"areaname": "C2区",
"description": "C2区",
"remain": 144,
"polygon": [386, 186, 386, 197, 386, 206, 386, 217, 416, 217, 448, 217, 478, 217, 478, 206, 478, 197, 478, 186, 448, 186, 416, 186, 386, 186]
}, {
"areacode": "0wrt1djukrea",
"areaname": "C1区",
"description": "C1区",
"remain": 60,
"polygon": [496, 184, 496, 194, 496, 205, 496, 215, 571, 214, 572, 204, 587, 205, 598, 202, 614, 194, 614, 184, 574, 184, 536, 184, 496, 184]
}, {
"areacode": "hya95p74ffs3",
"areaname": "B2区-二层",
"description": "B2区-二层",
"remain": 191,
"polygon": [73, 337, 73, 378, 72, 415, 73, 457, 78, 457, 78, 449, 100, 449, 101, 415, 100, 394, 101, 337, 92, 337, 82, 337, 73, 337]
}, {
"areacode": "rrw413jukre2",
"areaname": "A1区-一层",
"description": "A1区-一层",
"remain": 0,
"polygon": [256, 465, 256, 476, 256, 489, 256, 499, 213, 499, 172, 499, 129, 499, 129, 485, 144, 479, 158, 473, 172, 465, 213, 465, 256, 465]
}, {
"areacode": "sagsr1sa816m",
"areaname": "C4区",
"description": "C4区",
"remain": 490,
"polygon": [88, 139, 89, 171, 61, 172, 60, 181, 224, 181, 259, 182, 259, 174, 273, 173, 272, 154, 273, 131, 77, 132, 77, 139, 88, 139]
}, {
"areacode": "eqk4nyjukre4",
"areaname": "B2区一层",
"description": "B2区一层",
"remain": 247,
"polygon": [104, 344, 104, 376, 104, 406, 104, 438, 123, 438, 128, 425, 134, 415, 143, 399, 144, 376, 144, 344, 130, 344, 118, 344, 104, 344]
}, {
"areacode": "rrtc9e2gt72d",
"areaname": "A1区-二层",
"description": "A1区-二层",
"remain": 0,
"polygon": [62, 501, 62, 509, 90, 510, 89, 549, 250, 548, 250, 527, 231, 528, 230, 510, 254, 509, 254, 501, 191, 501, 125, 501, 62, 501]
}]
this.areas = data.map(area => ({
...area,
color: this.getAreaColor(area.areaname),
//
path: this.parsePolygon(area.polygon)
}));
} catch (error) {
console.error('数据加载失败:', error);
}
},
//
getAreaColor(name) {
for (const [key, value] of Object.entries(this.colorMap)) {
if (name.includes(key)) return value;
}
return '#9E9E9E'; //
},
//
parsePolygon(points) {
const path = [];
//
if (!points || !Array.isArray(points) || points.length % 2 !== 0) {
console.error('无效的多边形数据:', points);
return path;
}
for (let i = 0; i < points.length; i += 2) {
//
const x = Number(points[i]);
const y = Number(points[i+1]);
if (!isNaN(x) && !isNaN(y)) {
path.push({ x, y });
} else {
console.warn('忽略无效坐标:', points[i], points[i+1]);
}
}
//
if (path.length > 0 &&
(path[0].x !== path[path.length-1].x ||
path[0].y !== path[path.length-1].y)) {
path.push({...path[0]});
}
return path;
},
async initCanvas() {
try {
// Canvas
const canvasNode = await new Promise((resolve, reject) => {
const query = uni.createSelectorQuery().in(this);
query.select('#selectCanvas')
.fields({ node: true, size: true })
.exec(res => {
res[0]?.node ? resolve(res[0].node) : reject('Canvas节点获取失败');
});
});
//
const systemInfo = uni.getSystemInfoSync();
// CanvasCSS
this.canvasWidth = systemInfo.windowWidth;
this.canvasHeight = systemInfo.windowHeight * 0.8;
// Canvas
const dpr = systemInfo.pixelRatio || 1;
canvasNode.width = this.canvasWidth * dpr;
canvasNode.height = this.canvasHeight * dpr;
//
this.ctx = uni.createCanvasContext('selectCanvas', this);
//
this.ctx.scale(dpr, dpr);
//
this.drawAllAreas();
} catch (error) {
console.error('初始化失败:', error);
this.useFallbackRender();
}
},
//
drawAllAreas() {
//
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
//
this.ctx.setFillStyle('#f5f5f5');
this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
//
this.areas.forEach(area => {
this.drawArea(area);
});
this.ctx.draw();
},
//
drawArea(area) {
this.ctx.beginPath();
this.ctx.moveTo(area.path[0].x, area.path[0].y);
for (let i = 1; i < area.path.length; i++) {
this.ctx.lineTo(area.path[i].x, area.path[i].y);
}
this.ctx.closePath();
this.ctx.setFillStyle(area.color);
this.ctx.fill();
//
if (this.selectedArea === area) {
this.ctx.setStrokeStyle('#000000');
this.ctx.setLineWidth(2);
this.ctx.stroke();
}
},
//
async checkAreaSelection(x, y) {
return new Promise((resolve) => {
const query = uni.createSelectorQuery().in(this);
query.select('#selectCanvas')
.boundingClientRect(rect => {
if (!rect) return resolve(null);
// Canvas
const canvasX = x - rect.left;
const canvasY = y - rect.top;
// 使isPointInPath
const clickedArea = this.areas.find(area =>
this.isPointInPolygon(canvasX, canvasY, area.path)
);
resolve(clickedArea);
})
.exec();
});
},
//
isPointInPolygon(x, y, polygon) {
//
if (!polygon || !Array.isArray(polygon) || polygon.length < 3) {
console.warn('无效的多边形数据', polygon);
return false;
}
let inside = false;
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
const xi = polygon[i].x, yi = polygon[i].y;
const xj = polygon[j].x, yj = polygon[j].y;
//
if (isNaN(xi) || isNaN(yi) || isNaN(xj) || isNaN(yj)) {
console.warn('无效的坐标点', {xi, yi, xj, yj});
return false;
}
const intersect = ((yi > y) !== (yj > y))
&& (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
if (intersect) inside = !inside;
}
return inside;
},
//
async handleTouchStart(e) {
const touch = e.touches[0];
const clickedArea = await this.checkAreaSelection(touch.clientX, touch.clientY);
if (clickedArea) {
this.selectedArea = clickedArea;
this.drawAllAreas();
uni.showToast({
title: `选中: ${clickedArea.areaname}`,
icon: 'none'
});
//
this.$emit('area-selected', {
areacode: clickedArea.areacode,
areaname: clickedArea.areaname,
remain: clickedArea.remain
});
}
}
}
}
</script>
<style>
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
canvas {
width: 100%;
height: 80%;
background-color: #f5f5f5;
border: 1px solid #ccc;
}
.selection-info {
padding: 15px;
background-color: #fff;
border-top: 1px solid #eee;
font-size: 14px;
color: #666;
}
</style>

View File

@ -1,11 +0,0 @@
var __getOwnPropNames = Object.getOwnPropertyNames;
var __commonJS = (cb, mod) => function __require() {
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
};
var require_app_css = __commonJS({
"app.css.js"(exports) {
const _style_0 = {};
exports.styles = [_style_0];
}
});
export default require_app_css();

View File

@ -1,2 +0,0 @@
Promise.resolve("./app.css.js").then(() => {
});

View File

@ -1 +0,0 @@
{"version":3,"names":["canvasWidth","common_vendor","ref","canvasHeight","draw","ctx","index","createCanvasContext","__f__","beginPath","arc","Math","PI","setFillStyle","fill","setTimeout","handleDraw","onMounted"],"sources":["index.vue"],"sourcesContent":["<template>\n\t<view>\n\t\t<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->\n\t\t<canvas canvas-id=\"canvas\" id=\"canvas\" style=\"width: 200px; height: 200px;border: 1px solid red;\" :width=\"canvasWidth\" :height=\"canvasHeight\"></canvas>\n\n\t\t<!-- 添加一个按钮,用于触发绘图 -->\n\t\t<button @click=\"handleDraw\">点击绘制圆形</button>\n\t</view>\n</template>\n\n<script setup>\n\timport { ref, onMounted } from 'vue'\n\n\tconst canvasWidth = ref(200) // 动态设置Canvas宽度\n\tconst canvasHeight = ref(200) // 动态设置Canvas高度\n\n\t// 定义绘图函数\n\tfunction draw() {\n\t\tconst ctx = uni.createCanvasContext('canvas',this) // 创建canvas绘图上下文\r\n\t\tconsole.log(ctx,'12');\r\n\t\t// 绘制外圆\n\t\tctx.beginPath() // 开始路径\n\t\tctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形\n\t\tctx.setFillStyle('rgba(0, 0, 0, 1)') // 设置填充颜色为黑色,无透明度\n\t\tctx.fill() // 填充所创建的路径\n\t\t\n\t\t// 绘制内圆以形成环形效果\n\t\tctx.beginPath() // 开始新的路径\n\t\tctx.arc(100, 100, 75, 0, Math.PI * 2) // 在相同中心点(100, 100)但半径为60的圆形\n\t\tctx.setFillStyle('white') // 设置填充颜色为白色\n\t\tctx.fill() // 填充以“清除”内部区域,形成环形\r\n\t\tctx.draw(false, setTimeout(()=>{\r\n\t\t console.log(3)\r\n\t\t},300))\r\n\t}\n\n\t// 按钮点击事件处理函数\n\tconst handleDraw = () => {\r\n\t\tconsole.log('111111');\n\t\tdraw(); // 调用绘图函数\r\n\t\tconsole.log('222222222');\n\t}\n\n\tonMounted(() => {\r\n\t\t// 确保在组件挂载后可以获取到Canvas元素\n\t})\n</script>\n\n<style scoped>\n\tbutton {\n\t\tmargin-top: 10px;\n\t}\n</style>"],"mappings":";;;;;;;IAaC,IAAMA,WAAA,GAAcC,aAAA,CAAGC,GAAA,CAAC,GAAG;IAC3B,IAAMC,YAAA,GAAeF,aAAA,CAAGC,GAAA,CAAC,GAAG;IAG5B,SAASE,KAAA,EAAO;MACf,IAAMC,GAAA,GAAMJ,aAAA,CAAGK,KAAA,CAACC,mBAAA,CAAoB,UAAS,IAAI;MACjDN,aAAA,CAAAK,KAAA,CAAAE,KAAA,uCAAYH,GAAA,EAAI,IAAI;MAEpBA,GAAA,CAAII,SAAA,EAAW;MACfJ,GAAA,CAAIK,GAAA,CAAI,KAAK,KAAK,IAAI,GAAGC,IAAA,CAAKC,EAAA,GAAK,CAAC;MACpCP,GAAA,CAAIQ,YAAA,CAAa,kBAAkB;MACnCR,GAAA,CAAIS,IAAA,EAAM;MAGVT,GAAA,CAAII,SAAA,EAAW;MACfJ,GAAA,CAAIK,GAAA,CAAI,KAAK,KAAK,IAAI,GAAGC,IAAA,CAAKC,EAAA,GAAK,CAAC;MACpCP,GAAA,CAAIQ,YAAA,CAAa,OAAO;MACxBR,GAAA,CAAIS,IAAA,EAAM;MACVT,GAAA,CAAID,IAAA,CAAK,OAAOW,UAAA,CAAW,YAAI;QAC3Bd,aAAA,CAAAK,KAAA,CAAYE,KAAA,wCAAC;MAChB,GAAC,GAAG,CAAC;IACN;IAGD,IAAMQ,UAAA,GAAa,SAAbA,WAAA,EAAmB;MACxBf,aAAA,CAAAK,KAAA,CAAYE,KAAA,+CAAQ;MACpBJ,IAAA;MACAH,aAAA,CAAAK,KAAA,CAAAE,KAAA,uCAAY,WAAW;IACvB;IAEDP,aAAA,CAAAgB,SAAA,CAAU,YAAM,CAEjB,CAAE","ignoreList":[]}

View File

@ -1 +1 @@
{"version":3,"names":["wx","createPage","index","MiniProgramPage"],"sources":["cGFnZXMvaW5kZXgvaW5kZXgudnVl"],"sourcesContent":["import MiniProgramPage from 'C:/Users/hp/Desktop/app/canvas/pages/index/index.vue'\nwx.createPage(MiniProgramPage)"],"mappings":";;;;AACAA,EAAA,CAAGC,UAAA,CAAWC,KAAA,CAAeC,eAAA","ignoreList":[]}
{"version":3,"names":["draw","ctx","common_vendor","index","createCanvasContext","beginPath","arc","Math","PI","setFillStyle","setFillRule","fill","onMounted","wx","createPage","_sfc_main"],"sources":["index.vue","cGFnZXMvaW5kZXgvaW5kZXgudnVl"],"sourcesContent":["<template>\n\t<view>\n\t\t<canvas \n\t\t\tcanvas-id=\"canvas\" \n\t\t\tstyle=\"width: 100px; height: 100px;\"\n\t\t></canvas>\n\t</view>\n</template>\n\n<script setup>\nimport { onMounted } from 'vue'\n\nfunction draw() {\n\tconst ctx = uni.createCanvasContext('canvas')\n\n\tctx.beginPath()\n\tctx.arc(50, 50, 30, 0, Math.PI * 2, true)\n\tctx.arc(50, 50, 15, 0, Math.PI * 2, true)\n\tctx.setFillStyle('black')\n\tctx.setFillRule('evenodd') // 设置填充规则\n\tctx.fill()\n\n\tctx.draw()\n}\n\nonMounted(() => {\n\tdraw()\n})\n</script>\n\n<style scoped>\n</style>","import MiniProgramPage from 'C:/Users/hp/Desktop/app/canvas/pages/index/index.vue'\nwx.createPage(MiniProgramPage)"],"mappings":";;;;;;;IAYA,SAASA,KAAA,EAAO;MACf,IAAMC,GAAA,GAAMC,aAAA,CAAAC,KAAA,CAAIC,mBAAA,CAAoB,QAAQ;MAE5CH,GAAA,CAAII,SAAA,EAAW;MACfJ,GAAA,CAAIK,GAAA,CAAI,IAAI,IAAI,IAAI,GAAGC,IAAA,CAAKC,EAAA,GAAK,GAAG,IAAI;MACxCP,GAAA,CAAIK,GAAA,CAAI,IAAI,IAAI,IAAI,GAAGC,IAAA,CAAKC,EAAA,GAAK,GAAG,IAAI;MACxCP,GAAA,CAAIQ,YAAA,CAAa,OAAO;MACxBR,GAAA,CAAIS,WAAA,CAAY,SAAS;MACzBT,GAAA,CAAIU,IAAA,EAAM;MAEVV,GAAA,CAAID,IAAA,EAAM;IACX;IAEAE,aAAA,CAAAU,SAAA,CAAU,YAAM;MACfZ,IAAA,EAAM;IACP,CAAC;;;;;;AC1BDa,EAAA,CAAGC,UAAA,CAAWC,SAAe","ignoreList":[]}

View File

@ -1 +1 @@
{"version":3,"file":"app.js","sources":["App.vue","main.js"],"sourcesContent":["<script>\r\n\texport default {\r\n\t\tonLaunch: function() {\r\n\t\t\tconsole.log('App Launch')\r\n\t\t},\r\n\t\tonShow: function() {\r\n\t\t\tconsole.log('App Show')\r\n\t\t},\r\n\t\tonHide: function() {\r\n\t\t\tconsole.log('App Hide')\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<style>\r\n\t/*每个页面公共css */\r\n</style>\n","import App from './App'\n\n// #ifndef VUE3\nimport Vue from 'vue'\nimport './uni.promisify.adaptor'\nVue.config.productionTip = false\nApp.mpType = 'app'\nconst app = new Vue({\n ...App\n})\napp.$mount()\n// #endif\n\n// #ifdef VUE3\nimport { createSSRApp } from 'vue'\nexport function createApp() {\n const app = createSSRApp(App)\n return {\n app\n }\n}\n// #endif"],"names":["uni","createSSRApp","App"],"mappings":";;;;;;;AACC,MAAK,YAAU;AAAA,EACd,UAAU,WAAW;AACpBA,kBAAAA,MAAA,MAAA,OAAA,gBAAY,YAAY;AAAA,EACxB;AAAA,EACD,QAAQ,WAAW;AAClBA,kBAAAA,MAAY,MAAA,OAAA,gBAAA,UAAU;AAAA,EACtB;AAAA,EACD,QAAQ,WAAW;AAClBA,kBAAAA,MAAY,MAAA,OAAA,iBAAA,UAAU;AAAA,EACvB;AACD;ACIM,SAAS,YAAY;AAC1B,QAAM,MAAMC,cAAY,aAACC,SAAG;AAC5B,SAAO;AAAA,IACL;AAAA,EACD;AACH;AACC,YAAO,IAAA,MAAA,MAAA;;"}
{"version":3,"file":"app.js","sources":["App.vue","main.js"],"sourcesContent":["<script>\r\n\texport default {\r\n\t\tonLaunch: function() {\r\n\t\t\tconsole.log('App Launch')\r\n\t\t},\r\n\t\tonShow: function() {\r\n\t\t\tconsole.log('App Show')\r\n\t\t},\r\n\t\tonHide: function() {\r\n\t\t\tconsole.log('App Hide')\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<style>\r\n\t/*每个页面公共css */\r\n</style>\n","import App from './App'\n\n// #ifndef VUE3\nimport Vue from 'vue'\nimport './uni.promisify.adaptor'\nVue.config.productionTip = false\nApp.mpType = 'app'\nconst app = new Vue({\n ...App\n})\napp.$mount()\n// #endif\n\n// #ifdef VUE3\nimport { createSSRApp } from 'vue'\nexport function createApp() {\n const app = createSSRApp(App)\n return {\n app\n }\n}\n// #endif"],"names":["uni","createSSRApp","App"],"mappings":";;;;;;AACC,MAAK,YAAU;AAAA,EACd,UAAU,WAAW;AACpBA,kBAAAA,MAAA,MAAA,OAAA,gBAAY,YAAY;AAAA,EACxB;AAAA,EACD,QAAQ,WAAW;AAClBA,kBAAAA,MAAY,MAAA,OAAA,gBAAA,UAAU;AAAA,EACtB;AAAA,EACD,QAAQ,WAAW;AAClBA,kBAAAA,MAAY,MAAA,OAAA,iBAAA,UAAU;AAAA,EACvB;AACD;ACIM,SAAS,YAAY;AAC1B,QAAM,MAAMC,cAAY,aAACC,SAAG;AAC5B,SAAO;AAAA,IACL;AAAA,EACD;AACH;AACC,YAAO,IAAA,MAAA,MAAA;;"}

File diff suppressed because one or more lines are too long

View File

@ -1 +0,0 @@
{"version":3,"file":"index.js","sources":["pages/index/index.vue"],"sourcesContent":["<template>\n\t<view>\n\t\t<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->\n\t\t<canvas canvas-id=\"canvas\" id=\"canvas\" style=\"width: 200px; height: 200px;border: 1px solid red;\" :width=\"canvasWidth\" :height=\"canvasHeight\"></canvas>\n\n\t\t<!-- 添加一个按钮,用于触发绘图 -->\n\t\t<button @click=\"handleDraw\">点击绘制圆形</button>\n\t</view>\n</template>\n\n<script setup>\n\timport { ref, onMounted ,getCurrentInstance } from 'vue'\n\n\tconst canvasWidth = ref(200) // 动态设置Canvas宽度\n\tconst canvasHeight = ref(200) // 动态设置Canvas高度\n\tconst instance = getCurrentInstance() \n\t// 定义绘图函数\n\tfunction draw() {\n\t\tconst ctx = uni.createCanvasContext('canvas',instance) // 创建canvas绘图上下文\r\n\t\tconsole.log(ctx,'12');\r\n\t\t// 绘制外圆\n\t\tctx.beginPath() // 开始路径\n\t\tctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形\n\t\tctx.setFillStyle('rgba(0, 0, 0, 1)') // 设置填充颜色为黑色,无透明度\n\t\tctx.fill() // 填充所创建的路径\n\t\t\n\t\t// 绘制内圆以形成环形效果\n\t\tctx.beginPath() // 开始新的路径\n\t\tctx.arc(100, 100, 75, 0, Math.PI * 2) // 在相同中心点(100, 100)但半径为60的圆形\n\t\tctx.setFillStyle('white') // 设置填充颜色为白色\n\t\tctx.fill() // 填充以“清除”内部区域,形成环形\r\n\t\tctx.draw()\r\n\t}\n\n\t// 按钮点击事件处理函数\n\tconst handleDraw = () => {\r\n\t\tconsole.log('111111');\n\t\tdraw(); // 调用绘图函数\r\n\t\tconsole.log('222222222');\n\t}\n\n\tonMounted(() => {\r\n\t\t// 确保在组件挂载后可以获取到Canvas元素\n\t})\n</script>\n\n<style scoped>\n\tbutton {\n\t\tmargin-top: 10px;\n\t}\n</style>"],"names":["ref","getCurrentInstance","uni","onMounted"],"mappings":";;;;;AAaC,UAAM,cAAcA,cAAG,IAAC,GAAG;AAC3B,UAAM,eAAeA,cAAG,IAAC,GAAG;AAC5B,UAAM,WAAWC,cAAAA,mBAAoB;AAErC,aAAS,OAAO;AACf,YAAM,MAAMC,cAAG,MAAC,oBAAoB,UAAS,QAAQ;AACrDA,oBAAA,MAAA,MAAA,OAAA,+BAAY,KAAI,IAAI;AAEpB,UAAI,UAAW;AACf,UAAI,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;AACpC,UAAI,aAAa,kBAAkB;AACnC,UAAI,KAAM;AAGV,UAAI,UAAW;AACf,UAAI,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;AACpC,UAAI,aAAa,OAAO;AACxB,UAAI,KAAM;AACV,UAAI,KAAM;AAAA,IACV;AAGD,UAAM,aAAa,MAAM;AACxBA,oBAAAA,MAAY,MAAA,OAAA,+BAAA,QAAQ;AACpB;AACAA,oBAAAA,MAAA,MAAA,OAAA,+BAAY,WAAW;AAAA,IACvB;AAEDC,kBAAAA,UAAU,MAAM;AAAA,IAEjB,CAAE;;;;;;;;;;;;"}

View File

@ -1 +1 @@
{"version":3,"file":"index.js","sources":["../../HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvaW5kZXgvaW5kZXgudnVl"],"sourcesContent":["import MiniProgramPage from 'C:/Users/hp/Desktop/app/canvas/pages/index/index.vue'\nwx.createPage(MiniProgramPage)"],"names":["MiniProgramPage"],"mappings":";;AACA,GAAG,WAAWA,MAAe,eAAA;"}
{"version":3,"file":"index.js","sources":["pages/index/index.vue","../../HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvaW5kZXgvaW5kZXgudnVl"],"sourcesContent":["<template>\r\n\t<view>\r\n\t\t<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->\r\n\t\t<canvas canvas-id=\"canvas\" id=\"canvas\" style=\"width: 200px; height: 200px;\"></canvas>\r\n\r\n\t\t<!-- 添加一个按钮,用于触发绘图 -->\r\n\t\t<button @click=\"handleDraw()\">点击绘制圆形</button>\r\n\t</view>\r\n</template>\r\n\r\n<script setup>\r\n\timport {\r\n\t\tref\r\n\t} from 'vue'\r\n\r\n\t// 定义绘图函数\r\n\tfunction draw() {\r\n\t\tconst ctx = uni.createCanvasContext('canvas') // 创建canvas绘图上下文\r\n\r\n\t\t// 绘制外圆\r\n\t\tctx.beginPath() // 开始路径\r\n\t\tctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形\r\n\t\tctx.setFillStyle('rgba(0, 0, 0, 1)') // 设置填充颜色为黑色,无透明度\r\n\t\tctx.fill() // 填充所创建的路径\r\n\t\t\r\n\t\t// 绘制内圆以形成环形效果\r\n\t\tctx.beginPath() // 开始新的路径\r\n\t\tctx.arc(100, 100, 75, 0, Math.PI * 2) // 在相同中心点(100, 100)但半径为60的圆形\r\n\t\tctx.setFillStyle('white') // 设置填充颜色为白色\r\n\t\tctx.fill() // 填充以“清除”内部区域,形成环形\r\n\t\tctx.draw() // 将上述所有操作提交到canvas进行渲染\r\n\t}\r\n\r\n\t// 按钮点击事件处理函数\r\n\tconst handleDraw = () => {\r\n\t\tdraw(); // 调用绘图函数\r\n\t}\r\n</script>\r\n\r\n<style scoped>\r\n\t/* 样式部分 */\r\n\tbutton {\r\n\t\tmargin-top: 10px;\r\n\t\t/* 给按钮设置一些上边距以避免过于紧凑 */\r\n\t}\r\n</style>","import MiniProgramPage from 'C:/Users/hp/Desktop/app/canvas/pages/index/index.vue'\nwx.createPage(MiniProgramPage)"],"names":["uni"],"mappings":";;;;;AAgBC,aAAS,OAAO;AACf,YAAM,MAAMA,cAAAA,MAAI,oBAAoB,QAAQ;AAG5C,UAAI,UAAW;AACf,UAAI,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;AACpC,UAAI,aAAa,kBAAkB;AACnC,UAAI,KAAM;AAGV,UAAI,UAAW;AACf,UAAI,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;AACpC,UAAI,aAAa,OAAO;AACxB,UAAI,KAAM;AACV,UAAI,KAAM;AAAA,IACV;AAGD,UAAM,aAAa,MAAM;AACxB;IACA;;;;;;;;;ACnCF,GAAG,WAAW,eAAe;"}

View File

@ -1 +0,0 @@
{"version":3,"file":"index2.js","sources":["../../HBuilderX/plugins/uniapp-cli-vite/uniPage:/QzovVXNlcnMvaHAvRGVza3RvcC9hcHAvY2FudmFzL3BhZ2VzL2luZGV4L2luZGV4LnZ1ZQ"],"sourcesContent":["import MiniProgramPage from 'C:/Users/hp/Desktop/app/canvas/pages/index/index.vue'\nwx.createPage(MiniProgramPage)"],"names":["MiniProgramPage"],"mappings":";;AACA,GAAG,WAAWA,MAAe,eAAA;"}

View File

@ -1 +0,0 @@
{"version":3,"file":"indexFu.js","sources":["pages/index/indexFu.vue","../../HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvaW5kZXgvaW5kZXhGdS52dWU"],"sourcesContent":["<template>\r\n\t<view>\r\n\t<indexZi></indexZi>\r\n\t</view>\r\n</template>\r\n\r\n<script setup>\r\n\timport indexZi from \"./index.vue\" \r\n\timport {\r\n\t\tref\r\n\t} from 'vue'\r\n\r\n</script>\r\n\r\n<style scoped>\r\n\r\n</style>","import MiniProgramPage from 'C:/Users/hp/Desktop/app/canvas/pages/index/indexFu.vue'\nwx.createPage(MiniProgramPage)"],"names":["MiniProgramPage"],"mappings":";;;;;AAOC,MAAM,UAAU,MAAW;;;;;;;;;ACN5B,GAAG,WAAWA,SAAe;"}

View File

@ -1 +0,0 @@
{"version":3,"file":"step2.js","sources":["pages/index/step2.vue","../../HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvaW5kZXgvc3RlcDIudnVl"],"sourcesContent":["<template>\r\n\t<view>\r\n\t<indexstep2></indexstep2>\r\n\t</view>\r\n</template>\r\n\r\n<script setup>\r\n\timport indexstep2 from \"./index.vue\" \r\n\timport {\r\n\t\tref\r\n\t} from 'vue'\r\n\r\n</script>\r\n\r\n<style scoped>\r\n\r\n</style>","import MiniProgramPage from 'C:/Users/hp/Desktop/app/canvas/pages/index/step2.vue'\nwx.createPage(MiniProgramPage)"],"names":["MiniProgramPage"],"mappings":";;;;;AAOC,MAAM,aAAa,MAAW;;;;;;;;;ACN/B,GAAG,WAAWA,SAAe;"}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.7 KiB

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -1,24 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>View</title>
<link rel="icon" href="data:,">
<link rel="stylesheet" href="app.css" />
<script>var __uniConfig = {"globalStyle":{},"darkmode":false}</script>
<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>
</head>
<body>
<div id="app"></div>
<script src="uni-app-view.umd.js"></script>
</body>
</html>

View File

@ -1,11 +0,0 @@
;(function(){
let u=void 0,isReady=false,onReadyCallbacks=[],isServiceReady=false,onServiceReadyCallbacks=[];
const __uniConfig = {"pages":[],"globalStyle":{"backgroundColor":"#F8F8F8","navigationBar":{"backgroundColor":"#F8F8F8","titleText":"uni-app","type":"default","titleColor":"#000000"},"isNVue":false},"nvue":{"compiler":"uni-app","styleCompiler":"uni-app","flex-direction":"column"},"renderer":"auto","appname":"canvas","splashscreen":{"alwaysShowBeforeRender":true,"autoclose":true},"compilerVersion":"4.57","entryPagePath":"pages/index/step2","entryPageQuery":"","realEntryPagePath":"","networkTimeout":{"request":60000,"connectSocket":60000,"uploadFile":60000,"downloadFile":60000},"locales":{},"darkmode":false,"themeConfig":{}};
const __uniRoutes = [{"path":"pages/index/step2","meta":{"isQuit":true,"isEntry":true,"navigationBar":{"titleText":"fu","type":"default"},"isNVue":false}},{"path":"pages/index/index","meta":{"navigationBar":{"titleText":"uni-app","type":"default"},"isNVue":false}}].map(uniRoute=>(uniRoute.meta.route=uniRoute.path,__uniConfig.pages.push(uniRoute.path),uniRoute.path='/'+uniRoute.path,uniRoute));
__uniConfig.styles=[];//styles
__uniConfig.onReady=function(callback){if(__uniConfig.ready){callback()}else{onReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"ready",{get:function(){return isReady},set:function(val){isReady=val;if(!isReady){return}const callbacks=onReadyCallbacks.slice(0);onReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});
__uniConfig.onServiceReady=function(callback){if(__uniConfig.serviceReady){callback()}else{onServiceReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"serviceReady",{get:function(){return isServiceReady},set:function(val){isServiceReady=val;if(!isServiceReady){return}const callbacks=onServiceReadyCallbacks.slice(0);onServiceReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});
service.register("uni-app-config",{create(a,b,c){if(!__uniConfig.viewport){var d=b.weex.config.env.scale,e=b.weex.config.env.deviceWidth,f=Math.ceil(e/d);Object.assign(__uniConfig,{viewport:f,defaultFontSize:16})}return{instance:{__uniConfig:__uniConfig,__uniRoutes:__uniRoutes,global:u,window:u,document:u,frames:u,self:u,location:u,navigator:u,localStorage:u,history:u,Caches:u,screen:u,alert:u,confirm:u,prompt:u,fetch:u,XMLHttpRequest:u,WebSocket:u,webkit:u,print:u}}}});
})();

View File

@ -1 +0,0 @@
(function(){})();

View File

@ -1,636 +0,0 @@
if (typeof Promise !== "undefined" && !Promise.prototype.finally) {
Promise.prototype.finally = function(callback) {
const promise = this.constructor;
return this.then(
(value) => promise.resolve(callback()).then(() => value),
(reason) => promise.resolve(callback()).then(() => {
throw reason;
})
);
};
}
;
if (typeof uni !== "undefined" && uni && uni.requireGlobal) {
const global = uni.requireGlobal();
ArrayBuffer = global.ArrayBuffer;
Int8Array = global.Int8Array;
Uint8Array = global.Uint8Array;
Uint8ClampedArray = global.Uint8ClampedArray;
Int16Array = global.Int16Array;
Uint16Array = global.Uint16Array;
Int32Array = global.Int32Array;
Uint32Array = global.Uint32Array;
Float32Array = global.Float32Array;
Float64Array = global.Float64Array;
BigInt64Array = global.BigInt64Array;
BigUint64Array = global.BigUint64Array;
}
;
if (uni.restoreGlobal) {
uni.restoreGlobal(Vue, weex, plus, setTimeout, clearTimeout, setInterval, clearInterval);
}
(function(vue) {
"use strict";
function formatAppLog(type, filename, ...args) {
if (uni.__log__) {
uni.__log__(type, filename, ...args);
} else {
console[type].apply(console, [...args, filename]);
}
}
const _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const _sfc_main$2 = {
data() {
return {
canvasWidth: 300,
canvasHeight: 400,
ctx: null,
areas: [],
// 从接口获取的区域数据
selectedArea: null,
colorMap: {
"A区": "#FF5252",
"B区": "#4CAF50",
"C区": "#2196F3",
"D区": "#FFC107"
}
};
},
async onLoad() {
await this.loadAreaData();
},
onReady() {
setTimeout(() => {
this.initCanvas().catch((e) => {
formatAppLog("error", "at pages/index/step2.vue:47", "初始化失败:", e);
uni.showToast({
title: "画布初始化失败",
icon: "none"
});
});
}, 300);
},
methods: {
// 模拟加载区域数据
async loadAreaData() {
try {
const data = [{
"areacode": "lg0umpjukrdn",
"areaname": "C4区",
"description": "C4区",
"remain": 94,
"polygon": [131, 184, 130, 196, 146, 201, 174, 208, 174, 215, 215, 215, 258, 215, 258, 205, 257, 192, 258, 184, 215, 184, 174, 184, 131, 184]
}, {
"areacode": "pnk4022gt71m",
"areaname": "A4区-一层",
"description": "A4区-一层",
"remain": 0,
"polygon": [490, 464, 490, 475, 490, 488, 490, 499, 532, 499, 572, 499, 614, 499, 614, 488, 599, 480, 586, 474, 572, 464, 532, 464, 490, 464]
}, {
"areacode": "e0jhx1sa8194",
"areaname": "D1区-一层",
"description": "D1区-一层",
"remain": 247,
"polygon": [604, 345, 603, 385, 604, 396, 624, 439, 643, 437, 644, 417, 643, 396, 644, 367, 644, 344, 616, 345, 644, 346, 630, 344, 604, 345]
}, {
"areacode": "qxhs4574ffrh",
"areaname": "D1区-二层",
"description": "D1区-二层",
"remain": 191,
"polygon": [648, 349, 648, 386, 648, 425, 648, 452, 668, 452, 668, 462, 674, 462, 674, 425, 674, 386, 674, 349, 666, 349, 656, 349, 648, 349]
}, {
"areacode": "ar2q2e74ffrj",
"areaname": "D2区-二层",
"description": "D2区-二层",
"remain": 122,
"polygon": [647, 240, 648, 270, 648, 309, 648, 350, 657, 350, 665, 350, 673, 350, 673, 309, 673, 270, 673, 229, 667, 229, 667, 239, 647, 240]
}, {
"areacode": "qar2r374ffrl",
"areaname": "D2区-一层",
"description": "D2区-一层",
"remain": 153,
"polygon": [617, 266, 605, 285, 606, 303, 606, 342, 626, 341, 645, 342, 643, 341, 642, 302, 642, 278, 642, 263, 642, 249, 626, 248, 617, 266]
}, {
"areacode": "fpfaxmsa816f",
"areaname": "A2区-一层",
"description": "A2区-一层",
"remain": 0,
"polygon": [269, 463, 269, 476, 269, 488, 269, 501, 301, 501, 332, 501, 364, 501, 364, 488, 364, 476, 364, 463, 332, 463, 301, 463, 269, 463]
}, {
"areacode": "tse56pjukrdx",
"areaname": "C3区",
"description": "C3区",
"remain": 215,
"polygon": [279, 141, 279, 174, 266, 173, 265, 180, 308, 180, 339, 180, 369, 180, 369, 167, 369, 154, 369, 141, 339, 141, 308, 141, 279, 141]
}, {
"areacode": "lpkym7ej0kmd",
"areaname": "B1区-一层",
"description": "B1区-一层",
"remain": 248,
"polygon": [104, 250, 104, 282, 104, 313, 104, 345, 118, 345, 131, 345, 145, 345, 145, 313, 145, 288, 138, 276, 131, 263, 123, 250, 104, 250]
}, {
"areacode": "r6xrfc2gt71x",
"areaname": "C3区",
"description": "C3区",
"remain": 143,
"polygon": [269, 186, 269, 196, 269, 207, 269, 217, 300, 217, 333, 217, 364, 217, 364, 207, 364, 196, 364, 186, 333, 186, 300, 186, 269, 186]
}, {
"areacode": "h84jstej0kmf",
"areaname": "C1区",
"description": "C1区",
"remain": 337,
"polygon": [477, 133, 476, 168, 491, 168, 491, 179, 519, 178, 690, 179, 689, 170, 660, 170, 659, 140, 670, 140, 670, 134, 530, 134, 477, 133]
}, {
"areacode": "tqaegcej0kmg",
"areaname": "A2区-二层",
"description": "A2区-二层",
"remain": 0,
"polygon": [278, 514, 277, 526, 256, 525, 256, 542, 289, 542, 311, 542, 311, 531, 364, 533, 364, 525, 352, 525, 352, 513, 303, 513, 278, 514]
}, {
"areacode": "606fa9ej0kmh",
"areaname": "A3区-一层",
"description": "A3区-一层",
"remain": 0,
"polygon": [384, 466, 384, 477, 384, 489, 384, 500, 416, 500, 447, 500, 479, 500, 479, 489, 479, 477, 479, 466, 447, 466, 416, 466, 384, 466]
}, {
"areacode": "2x9j4bej0km8",
"areaname": "B1区-二层",
"description": "B1区-二层",
"remain": 192,
"polygon": [74, 231, 73, 270, 73, 304, 73, 340, 84, 340, 91, 340, 101, 340, 101, 304, 101, 283, 100, 239, 80, 238, 80, 230, 74, 231]
}, {
"areacode": "81mj022gt723",
"areaname": "A4区-二层",
"description": "A4区-二层",
"remain": 0,
"polygon": [513, 511, 513, 525, 493, 525, 493, 547, 556, 547, 624, 547, 657, 546, 657, 513, 687, 513, 688, 501, 489, 500, 490, 511, 513, 511]
}, {
"areacode": "f217dy2gt72f",
"areaname": "C2区",
"description": "C2区",
"remain": 136,
"polygon": [372, 144, 372, 156, 372, 168, 372, 180, 403, 180, 434, 180, 481, 180, 481, 175, 467, 175, 467, 144, 434, 144, 403, 144, 372, 144]
}, {
"areacode": "crxllrjukre8",
"areaname": "A3区-二层",
"description": "A3区-二层",
"remain": 0,
"polygon": [386, 515, 387, 528, 376, 527, 376, 535, 436, 533, 436, 545, 486, 545, 486, 534, 486, 526, 463, 526, 464, 515, 411, 515, 386, 515]
}, {
"areacode": "kb8wtgjukre9",
"areaname": "C2区",
"description": "C2区",
"remain": 144,
"polygon": [386, 186, 386, 197, 386, 206, 386, 217, 416, 217, 448, 217, 478, 217, 478, 206, 478, 197, 478, 186, 448, 186, 416, 186, 386, 186]
}, {
"areacode": "0wrt1djukrea",
"areaname": "C1区",
"description": "C1区",
"remain": 60,
"polygon": [496, 184, 496, 194, 496, 205, 496, 215, 571, 214, 572, 204, 587, 205, 598, 202, 614, 194, 614, 184, 574, 184, 536, 184, 496, 184]
}, {
"areacode": "hya95p74ffs3",
"areaname": "B2区-二层",
"description": "B2区-二层",
"remain": 191,
"polygon": [73, 337, 73, 378, 72, 415, 73, 457, 78, 457, 78, 449, 100, 449, 101, 415, 100, 394, 101, 337, 92, 337, 82, 337, 73, 337]
}, {
"areacode": "rrw413jukre2",
"areaname": "A1区-一层",
"description": "A1区-一层",
"remain": 0,
"polygon": [256, 465, 256, 476, 256, 489, 256, 499, 213, 499, 172, 499, 129, 499, 129, 485, 144, 479, 158, 473, 172, 465, 213, 465, 256, 465]
}, {
"areacode": "sagsr1sa816m",
"areaname": "C4区",
"description": "C4区",
"remain": 490,
"polygon": [88, 139, 89, 171, 61, 172, 60, 181, 224, 181, 259, 182, 259, 174, 273, 173, 272, 154, 273, 131, 77, 132, 77, 139, 88, 139]
}, {
"areacode": "eqk4nyjukre4",
"areaname": "B2区一层",
"description": "B2区一层",
"remain": 247,
"polygon": [104, 344, 104, 376, 104, 406, 104, 438, 123, 438, 128, 425, 134, 415, 143, 399, 144, 376, 144, 344, 130, 344, 118, 344, 104, 344]
}, {
"areacode": "rrtc9e2gt72d",
"areaname": "A1区-二层",
"description": "A1区-二层",
"remain": 0,
"polygon": [62, 501, 62, 509, 90, 510, 89, 549, 250, 548, 250, 527, 231, 528, 230, 510, 254, 509, 254, 501, 191, 501, 125, 501, 62, 501]
}];
this.areas = data.map((area) => ({
...area,
color: this.getAreaColor(area.areaname),
// 转换多边形为绘制路径
path: this.parsePolygon(area.polygon)
}));
} catch (error) {
formatAppLog("error", "at pages/index/step2.vue:213", "数据加载失败:", error);
}
},
// 根据区域名称获取颜色
getAreaColor(name) {
for (const [key, value] of Object.entries(this.colorMap)) {
if (name.includes(key))
return value;
}
return "#9E9E9E";
},
// 解析多边形数据
parsePolygon(points) {
const path = [];
if (!points || !Array.isArray(points) || points.length % 2 !== 0) {
formatAppLog("error", "at pages/index/step2.vue:230", "无效的多边形数据:", points);
return path;
}
for (let i = 0; i < points.length; i += 2) {
const x = Number(points[i]);
const y = Number(points[i + 1]);
if (!isNaN(x) && !isNaN(y)) {
path.push({ x, y });
} else {
formatAppLog("warn", "at pages/index/step2.vue:241", "忽略无效坐标:", points[i], points[i + 1]);
}
}
if (path.length > 0 && (path[0].x !== path[path.length - 1].x || path[0].y !== path[path.length - 1].y)) {
path.push({ ...path[0] });
}
return path;
},
async initCanvas() {
try {
const canvasNode = await new Promise((resolve, reject) => {
const query = uni.createSelectorQuery().in(this);
query.select("#selectCanvas").fields({ node: true, size: true }).exec((res) => {
var _a;
((_a = res[0]) == null ? void 0 : _a.node) ? resolve(res[0].node) : reject("Canvas节点获取失败");
});
});
const systemInfo = uni.getSystemInfoSync();
this.canvasWidth = systemInfo.windowWidth;
this.canvasHeight = systemInfo.windowHeight * 0.8;
const dpr = systemInfo.pixelRatio || 1;
canvasNode.width = this.canvasWidth * dpr;
canvasNode.height = this.canvasHeight * dpr;
this.ctx = uni.createCanvasContext("selectCanvas", this);
this.ctx.scale(dpr, dpr);
this.drawAllAreas();
} catch (error) {
formatAppLog("error", "at pages/index/step2.vue:289", "初始化失败:", error);
this.useFallbackRender();
}
},
// 绘制所有区域
drawAllAreas() {
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
this.ctx.setFillStyle("#f5f5f5");
this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
this.areas.forEach((area) => {
this.drawArea(area);
});
this.ctx.draw();
},
// 绘制单个区域
drawArea(area) {
this.ctx.beginPath();
this.ctx.moveTo(area.path[0].x, area.path[0].y);
for (let i = 1; i < area.path.length; i++) {
this.ctx.lineTo(area.path[i].x, area.path[i].y);
}
this.ctx.closePath();
this.ctx.setFillStyle(area.color);
this.ctx.fill();
if (this.selectedArea === area) {
this.ctx.setStrokeStyle("#000000");
this.ctx.setLineWidth(3);
this.ctx.stroke();
}
},
// 检查点击了哪个区域
async checkAreaSelection(x, y) {
return new Promise((resolve) => {
const query = uni.createSelectorQuery().in(this);
query.select("#selectCanvas").boundingClientRect((rect) => {
if (!rect)
return resolve(null);
const canvasX = x - rect.left;
const canvasY = y - rect.top;
const clickedArea = this.areas.find(
(area) => this.isPointInPolygon(canvasX, canvasY, area.path)
);
resolve(clickedArea);
}).exec();
});
},
// 判断点是否在多边形内
isPointInPolygon(x, y, polygon) {
if (!polygon || !Array.isArray(polygon) || polygon.length < 3) {
formatAppLog("warn", "at pages/index/step2.vue:360", "无效的多边形数据", polygon);
return false;
}
let inside = false;
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
const xi = polygon[i].x, yi = polygon[i].y;
const xj = polygon[j].x, yj = polygon[j].y;
if (isNaN(xi) || isNaN(yi) || isNaN(xj) || isNaN(yj)) {
formatAppLog("warn", "at pages/index/step2.vue:371", "无效的坐标点", { xi, yi, xj, yj });
return false;
}
const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
if (intersect)
inside = !inside;
}
return inside;
},
// 处理触摸开始
async handleTouchStart(e) {
const touch = e.touches[0];
const clickedArea = await this.checkAreaSelection(touch.clientX, touch.clientY);
if (clickedArea) {
this.selectedArea = clickedArea;
this.drawAllAreas();
uni.showToast({
title: `选中: ${clickedArea.areaname}`,
icon: "none"
});
this.$emit("area-selected", {
areacode: clickedArea.areacode,
areaname: clickedArea.areaname,
remain: clickedArea.remain
});
}
}
}
};
function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("view", { class: "container" }, [
vue.createElementVNode(
"canvas",
{
"canvas-id": "selectCanvas",
id: "selectCanvas",
type: "2d",
"disable-scroll": "true",
onTouchstart: _cache[0] || (_cache[0] = (...args) => $options.handleTouchStart && $options.handleTouchStart(...args)),
style: vue.normalizeStyle({
width: $data.canvasWidth + "px",
height: $data.canvasHeight + "px"
})
},
null,
36
/* STYLE, NEED_HYDRATION */
),
$data.selectedArea ? (vue.openBlock(), vue.createElementBlock(
"view",
{
key: 0,
class: "selection-info"
},
" 当前选中:" + vue.toDisplayString($data.selectedArea.areaname) + " (剩余:" + vue.toDisplayString($data.selectedArea.remain) + ") ",
1
/* TEXT */
)) : vue.createCommentVNode("v-if", true)
]);
}
const PagesIndexStep2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$1], ["__file", "/Users/sunmeng/Desktop/wx/canvas/pages/index/step2.vue"]]);
const _sfc_main$1 = {
data() {
return {
ctx: null,
canvasWidth: 0,
canvasHeight: 0,
seatSize: 30,
gap: 10,
rows: 8,
cols: 10,
seats: [],
selectedSeats: [],
touchStartX: 0,
touchStartY: 0,
offsetX: 0,
offsetY: 0,
scale: 1
};
},
onReady() {
this.initSeats();
this.initCanvas();
},
methods: {
initSeats() {
for (let i = 0; i < this.rows; i++) {
this.seats[i] = [];
for (let j = 0; j < this.cols; j++) {
const isSold = Math.random() < 0.2;
this.seats[i][j] = {
row: i,
col: j,
status: isSold ? "sold" : "available",
// available, selected, sold
x: 0,
y: 0
};
}
}
},
async initCanvas() {
const { canvas, width, height } = await this.getCanvasNode("seatCanvas");
this.canvasWidth = width;
this.canvasHeight = height;
this.ctx = canvas.getContext("2d");
const totalWidth = this.cols * (this.seatSize + this.gap) - this.gap;
const totalHeight = this.rows * (this.seatSize + this.gap) - this.gap;
this.offsetX = (this.canvasWidth - totalWidth) / 2;
this.offsetY = (this.canvasHeight - totalHeight) / 2;
this.drawSeats();
},
getCanvasNode(id) {
return new Promise((resolve) => {
const query = uni.createSelectorQuery().in(this);
query.select(`#${id}`).fields({ node: true, size: true }).exec((res) => {
formatAppLog("log", "at pages/index/index.vue:94", "给我看看", res);
formatAppLog("log", "at pages/index/index.vue:95", "给我看看", res);
formatAppLog("log", "at pages/index/index.vue:96", "给我看看", res);
formatAppLog("log", "at pages/index/index.vue:97", "给我看看", res);
formatAppLog("log", "at pages/index/index.vue:98", "给我看看", res);
formatAppLog("log", "at pages/index/index.vue:99", "给我看看", res);
const canvas = res[0].node;
const width = res[0].width;
const height = res[0].height;
canvas.width = width * uni.getSystemInfoSync().pixelRatio;
canvas.height = height * uni.getSystemInfoSync().pixelRatio;
resolve({ canvas, width, height });
});
});
},
drawSeats() {
if (!this.ctx)
return;
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
this.ctx.save();
this.ctx.translate(this.offsetX, this.offsetY);
this.ctx.scale(this.scale, this.scale);
for (let i = 0; i < this.rows; i++) {
for (let j = 0; j < this.cols; j++) {
const seat = this.seats[i][j];
const x = j * (this.seatSize + this.gap);
const y = i * (this.seatSize + this.gap);
seat.x = x;
seat.y = y;
switch (seat.status) {
case "available":
this.ctx.fillStyle = "#4CAF50";
break;
case "selected":
this.ctx.fillStyle = "#2196F3";
break;
case "sold":
this.ctx.fillStyle = "#9E9E9E";
break;
}
this.ctx.beginPath();
this.ctx.roundRect(x, y, this.seatSize, this.seatSize, 4);
this.ctx.fill();
this.ctx.fillStyle = "#FFFFFF";
this.ctx.font = "12px Arial";
this.ctx.textAlign = "center";
this.ctx.textBaseline = "middle";
this.ctx.fillText(
`${String.fromCharCode(65 + i)}${j + 1}`,
x + this.seatSize / 2,
y + this.seatSize / 2
);
}
}
this.ctx.restore();
},
handleTouchStart(e) {
this.touchStartX = e.touches[0].x;
this.touchStartY = e.touches[0].y;
},
handleTouchMove(e) {
const touchX = e.touches[0].x;
const touchY = e.touches[0].y;
const dx = touchX - this.touchStartX;
const dy = touchY - this.touchStartY;
this.offsetX += dx;
this.offsetY += dy;
const minX = this.canvasWidth - (this.cols * (this.seatSize + this.gap) - this.gap) * this.scale;
const minY = this.canvasHeight - (this.rows * (this.seatSize + this.gap) - this.gap) * this.scale;
this.offsetX = Math.max(minX, Math.min(0, this.offsetX));
this.offsetY = Math.max(minY, Math.min(0, this.offsetY));
this.touchStartX = touchX;
this.touchStartY = touchY;
this.drawSeats();
},
handleTouchEnd(e) {
const touchX = e.changedTouches[0].x;
const touchY = e.changedTouches[0].y;
const canvasX = (touchX - this.offsetX) / this.scale;
const canvasY = (touchY - this.offsetY) / this.scale;
for (let i = 0; i < this.rows; i++) {
for (let j = 0; j < this.cols; j++) {
const seat = this.seats[i][j];
if (canvasX >= seat.x && canvasX <= seat.x + this.seatSize && canvasY >= seat.y && canvasY <= seat.y + this.seatSize) {
this.toggleSeatSelection(seat);
return;
}
}
}
},
toggleSeatSelection(seat) {
if (seat.status === "sold")
return;
if (seat.status === "available") {
seat.status = "selected";
this.selectedSeats.push(`${String.fromCharCode(65 + seat.row)}${seat.col + 1}`);
} else {
seat.status = "available";
this.selectedSeats = this.selectedSeats.filter(
(s) => s !== `${String.fromCharCode(65 + seat.row)}${seat.col + 1}`
);
}
this.drawSeats();
}
}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("view", { class: "container" }, [
vue.createElementVNode("view", { class: "screen" }, "银幕"),
vue.createElementVNode(
"canvas",
{
"canvas-id": "seatCanvas",
type: "2d",
class: "seat-canvas",
onTouchstart: _cache[0] || (_cache[0] = (...args) => $options.handleTouchStart && $options.handleTouchStart(...args)),
onTouchmove: _cache[1] || (_cache[1] = (...args) => $options.handleTouchMove && $options.handleTouchMove(...args)),
onTouchend: _cache[2] || (_cache[2] = (...args) => $options.handleTouchEnd && $options.handleTouchEnd(...args))
},
null,
32
/* NEED_HYDRATION */
),
vue.createElementVNode("view", { class: "legend" }, [
vue.createElementVNode("view", { class: "legend-item" }, [
vue.createElementVNode("view", { class: "seat-icon available" }),
vue.createElementVNode("text", null, "可选")
]),
vue.createElementVNode("view", { class: "legend-item" }, [
vue.createElementVNode("view", { class: "seat-icon selected" }),
vue.createElementVNode("text", null, "已选")
]),
vue.createElementVNode("view", { class: "legend-item" }, [
vue.createElementVNode("view", { class: "seat-icon sold" }),
vue.createElementVNode("text", null, "已售")
])
]),
vue.createElementVNode("view", { class: "selected-seats" }, [
vue.createElementVNode(
"text",
null,
"已选座位:" + vue.toDisplayString($data.selectedSeats.join(", ") || "无"),
1
/* TEXT */
)
])
]);
}
const PagesIndexIndex = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render], ["__file", "/Users/sunmeng/Desktop/wx/canvas/pages/index/index.vue"]]);
__definePage("pages/index/step2", PagesIndexStep2);
__definePage("pages/index/index", PagesIndexIndex);
const _sfc_main = {
onLaunch: function() {
formatAppLog("log", "at App.vue:4", "App Launch");
},
onShow: function() {
formatAppLog("log", "at App.vue:7", "App Show");
},
onHide: function() {
formatAppLog("log", "at App.vue:10", "App Hide");
}
};
const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/sunmeng/Desktop/wx/canvas/App.vue"]]);
function createApp() {
const app = vue.createVueApp(App);
return {
app
};
}
const { app: __app__, Vuex: __Vuex__, Pinia: __Pinia__ } = createApp();
uni.Vuex = __Vuex__;
uni.Pinia = __Pinia__;
__app__.provide("__globalStyles", __uniConfig.styles);
__app__._component.mpType = "app";
__app__._component.render = () => {
};
__app__.mount("#app");
})(Vue);

File diff suppressed because one or more lines are too long

View File

@ -1,113 +0,0 @@
{
"@platforms": [
"android",
"iPhone",
"iPad"
],
"id": "__UNI__EBE2302",
"name": "canvas",
"version": {
"name": "1.0.0",
"code": "100"
},
"description": "",
"developer": {
"name": "",
"email": "",
"url": ""
},
"permissions": {
"UniNView": {
"description": "UniNView原生渲染"
}
},
"plus": {
"useragent": {
"value": "uni-app",
"concatenate": true
},
"splashscreen": {
"target": "id:1",
"autoclose": true,
"waiting": true,
"delay": 0
},
"popGesture": "close",
"launchwebview": {
"render": "always",
"id": "1",
"kernel": "WKWebview"
},
"canvas2d": true,
"optimization": {
"subPackages": true
},
"usingComponents": {
"canvas": true
},
"nvueStyleCompiler": "uni-app",
"compilerVersion": 3,
"distribute": {
"google": {
"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\"/>"
]
},
"apple": {},
"plugins": {
"audio": {
"mp3": {
"description": "Android平台录音支持MP3格式文件"
}
}
}
},
"statusbar": {
"immersed": "supportedDevice",
"style": "dark",
"background": "#F8F8F8"
},
"uniStatistics": {
"enable": false
},
"allowsInlineMediaPlayback": true,
"uni-app": {
"control": "uni-v3",
"vueVersion": "3",
"compilerVersion": "4.57",
"nvueCompiler": "uni-app",
"renderer": "auto",
"nvue": {
"flex-direction": "column"
},
"nvueLaunchMode": "normal",
"webView": {
"minUserAgentVersion": "49.0"
}
}
},
"app-harmony": {
"useragent": {
"value": "uni-app",
"concatenate": true
},
"uniStatistics": {
"enable": false
}
},
"launch_path": "__uniappview.html"
}

View File

@ -1,61 +0,0 @@
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.625rem;
height: 100vh;
background-color: #f5f5f5;
}
.screen {
width: 80%;
height: 1.25rem;
background: linear-gradient(to bottom, #ccc, #fff);
margin-bottom: 1.25rem;
text-align: center;
font-size: 0.875rem;
color: #333;
border-radius: 0.25rem;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}
.seat-canvas {
width: 100%;
height: 15.625rem;
background-color: #fff;
margin-bottom: 0.625rem;
border-radius: 0.25rem;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}
.legend {
display: flex;
justify-content: center;
margin-bottom: 0.625rem;
}
.legend-item {
display: flex;
align-items: center;
margin: 0 0.625rem;
}
.seat-icon {
width: 0.9375rem;
height: 0.9375rem;
margin-right: 0.3125rem;
border-radius: 0.125rem;
}
.available {
background-color: #4CAF50;
}
.selected {
background-color: #2196F3;
}
.sold {
background-color: #9E9E9E;
}
.selected-seats {
padding: 0.625rem;
background-color: #fff;
border-radius: 0.25rem;
width: 90%;
text-align: center;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}

View File

@ -1,19 +0,0 @@
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
uni-canvas {
width: 100%;
height: 80%;
background-color: #f5f5f5;
border: 1px solid #ccc;
}
.selection-info {
padding: 15px;
background-color: #fff;
border-top: 1px solid #eee;
font-size: 14px;
color: #666;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.9 KiB

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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

View File

@ -1,6 +1,5 @@
{
"pages": [
"pages/index/step2",
"pages/index/index"
],
"window": {

View File

@ -7787,9 +7787,6 @@ const createSubpackageApp = initCreateSubpackageApp();
}
exports._export_sfc = _export_sfc;
exports.createSSRApp = createSSRApp;
exports.getCurrentInstance = getCurrentInstance;
exports.index = index;
exports.o = o;
exports.onMounted = onMounted;
exports.ref = ref;
//# sourceMappingURL=../../.sourcemap/mp-weixin/common/vendor.js.map

View File

@ -1,40 +0,0 @@
"use strict";
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 instance = common_vendor.getCurrentInstance();
function draw() {
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.draw();
}
const handleDraw = () => {
common_vendor.index.__f__("log", "at pages/index/index.vue:37", "111111");
draw();
common_vendor.index.__f__("log", "at pages/index/index.vue:39", "222222222");
};
common_vendor.onMounted(() => {
});
return (_ctx, _cache) => {
return {
a: canvasWidth.value,
b: canvasHeight.value,
c: 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

View File

@ -1,4 +1,30 @@
"use strict";
const index = require("../../index.js");
wx.createPage(index.MiniProgramPage);
const common_vendor = require("../../common/vendor.js");
const _sfc_main = {
__name: "index",
setup(__props) {
function draw() {
const ctx = common_vendor.index.createCanvasContext("canvas");
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.draw();
}
const handleDraw = () => {
draw();
};
return (_ctx, _cache) => {
return {
a: common_vendor.o(($event) => handleDraw())
};
};
}
};
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-1cf27b2a"]]);
wx.createPage(MiniProgramPage);
//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/index/index.js.map

View File

@ -1 +1 @@
<view class="data-v-1cf27b2a"><canvas class="data-v-1cf27b2a" canvas-id="canvas" id="canvas" style="width:200px;height:200px;border:1px solid red" width="{{a}}" height="{{b}}"></canvas><button class="data-v-1cf27b2a" bindtap="{{c}}">点击绘制圆形</button></view>
<view class="data-v-1cf27b2a"><canvas class="data-v-1cf27b2a" canvas-id="canvas" id="canvas" style="width:200px;height:200px"></canvas><button class="data-v-1cf27b2a" bindtap="{{a}}">点击绘制圆形</button></view>

View File

@ -1,4 +1,6 @@
/* 样式部分 */
button.data-v-1cf27b2a {
margin-top: 10px;
/* 给按钮设置一些上边距以避免过于紧凑 */
}

View File

@ -1,4 +0,0 @@
"use strict";
const index = require("../../index.js");
wx.createPage(index.MiniProgramPage);
//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/index/index2.js.map

View File

@ -1,16 +0,0 @@
"use strict";
require("../../common/vendor.js");
if (!Math) {
indexZi();
}
const indexZi = () => "./index2.js";
const _sfc_main = {
__name: "indexFu",
setup(__props) {
return (_ctx, _cache) => {
return {};
};
}
};
wx.createPage(_sfc_main);
//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/index/indexFu.js.map

View File

@ -1,6 +0,0 @@
{
"navigationBarTitleText": "fu",
"usingComponents": {
"index-zi": "./index"
}
}

View File

@ -1 +0,0 @@
<view><index-zi u-i="51b35b8e-0" bind:__l="__l"></index-zi></view>

View File

@ -1,16 +0,0 @@
"use strict";
require("../../common/vendor.js");
if (!Math) {
indexstep2();
}
const indexstep2 = () => "./index2.js";
const _sfc_main = {
__name: "step2",
setup(__props) {
return (_ctx, _cache) => {
return {};
};
}
};
wx.createPage(_sfc_main);
//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/index/step2.js.map

View File

@ -1,6 +0,0 @@
{
"navigationBarTitleText": "fu",
"usingComponents": {
"indexstep2": "./index"
}
}

View File

@ -1 +0,0 @@
<view><indexstep2 u-i="41bebd5e-0" bind:__l="__l"></indexstep2></view>