70 lines
1.6 KiB
Vue
70 lines
1.6 KiB
Vue
<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()
|
||
|
||
|
||
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,
|
||
})
|
||
|
||
ctx.drawImage(res.path, 0, 0);
|
||
ctx.beginPath();
|
||
ctx.moveTo(50, 50); // 左下角点
|
||
ctx.lineTo(150, 50); // 右下角点
|
||
ctx.lineTo(200, 100); // 右上角点
|
||
ctx.lineTo(100, 100); // 左上角点
|
||
ctx.closePath(); // 闭合路径
|
||
ctx.stroke(); // 绘制边框
|
||
|
||
ctx.draw()
|
||
}
|
||
|
||
// 处理canvas触摸事件
|
||
function handleCanvasTouch(event) {
|
||
// 获取触摸点的坐标
|
||
const x = event.touches[0].x;
|
||
const y = event.touches[0].y;
|
||
console.log(x,y,'12');
|
||
|
||
}
|
||
|
||
|
||
|
||
// 按钮点击事件处理函数
|
||
const handleDraw = () => {
|
||
draw(); // 调用绘图函数
|
||
}
|
||
|
||
onMounted(() => {
|
||
draw()
|
||
// 确保在组件挂载后可以获取到Canvas元素
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
button {
|
||
margin-top: 10px;
|
||
}
|
||
</style> |