vue实现图片标注

最新推荐文章于 2024-06-18 15:23:28 发布

qq_2417580538

最新推荐文章于 2024-06-18 15:23:28 发布

阅读量1.8k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_2417580538/article/details/128385423

版权

js 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML5 canvas在网页上实现鼠标拖拽绘图，通过JavaScript监听mousedown和mouseup事件，实现在画布上绘制矩形的功能。读者将学习到基础的前端交互与图形处理技术。

摘要由CSDN通过智能技术生成

<template>
  <div style="display: flex;justify-content: center;margin: 20px">
    <canvas
      id="myCanvas"
      style="border:1px solid #d3d3d3;"
      @mousedown="handleMousedown"
      @mouseup="handleMouseup"
    />
  </div>
</template>

<script>
export default {
  name: 'Home',
  components: {},
  data() {
    return {
      down: ''
    }
  },
  mounted() {
    var canvas = document.getElementById('myCanvas')
    var ctx = canvas.getContext('2d')
    var img = new Image()
    ctx.width = 400
    ctx.height = 400
    img.src = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.huachenyuanyang.com%2Fuploads%2Fallimg%2F160506%2F1-160506102043158.jpg&refer=http%3A%2F%2Fwww.huachenyuanyang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674111147&t=a8c60e306bf49d32038208dc8630864f' // 图片地址示例
    img.onload = function() {
      document.getElementById('myCanvas').width = img.width
      document.getElementById('myCanvas').height = img.height
      ctx.drawImage(img, 0, 0, img.width, img.height)
    }
  },
  methods: {
    handleMousedown(e) {
      if (e.button === 0) {
        this.down = e
      }
    },
    handleMouseup(e) {
      if (e.button === 0) {
        // console.log('松开', e)
        var c = document.getElementById('myCanvas')
        var ctx = c.getContext('2d')
        ctx.strokeStyle = '#EB3324'
        // 绘制矩形
        var { offsetX, offsetY } = this.down
        var width = offsetX - e.offsetX
        var height = offsetY - e.offsetY
        if (width < 0) {
          width *= -1
        }
        if (height < 0) {
          height *= -1
        }
        ctx.strokeRect(offsetX > e.offsetX ? e.offsetX : offsetX, offsetY > e.offsetY ? e.offsetY : offsetY, width, height)
      }
    }
  }
}
</script>

<style scoped>
</style>