vue 手势解锁功能

不努力code

已于 2024-02-23 16:28:39 修改

阅读量813

点赞数 5

分类专栏： vue 文章标签： vue.js javascript 前端

于 2024-02-23 15:29:00 首次发布

本文链接：https://blog.csdn.net/qq_41144591/article/details/136257335

版权

效果

实现

<script setup lang="ts">
const canvasRef = ref<HTMLCanvasElement>()
const ctx = ref<CanvasRenderingContext2D | null>(null)
const width = px2px(600)
const height = px2px(700)
const radius = ref(px2px(50))

const init = () => {
  const canvas = canvasRef.value
  if (!canvas) return
  canvas.width = width
  canvas.height = height
  ctx.value = canvas.getContext('2d')
  render()
  
}
onMounted(init)

// 圆
type CircleType = { x: number; y: number; n: number }
const circlePointList = ref<CircleType[]>([])
const circleChooseList = ref<CircleType[]>([])
const circleSolidWidth = px2px(5)
const drawCircle = (x: number, y: number, r = radius.value) => {
  // 画圆
  const c = ctx.value
  if (!c) return
  c.strokeStyle = '#CFE6FF'
  c.lineWidth = circleSolidWidth
  c.beginPath()
  c.arc(x, y, r, 0, 2 * Math.PI, true)
  c.closePath()
  c.stroke()
}
const renderCircleList = () => {
  const c = ctx.value
  if (!c) return
  c.clearRect(0, 0, width, height)