canvas使用

最新推荐文章于 2024-11-21 09:41:52 发布

原创最新推荐文章于 2024-11-21 09:41:52 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css

javascript 专栏收录该内容

3 篇文章

订阅专栏

该代码示例展示了如何使用HTML5的CanvasAPI创建一个矩形，并允许用户通过拖动四个顶点来改变矩形的大小和位置。代码中定义了拖拽和鼠标事件处理函数，实现了图形的动态交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 功能描述

拖拽四个顶点放大缩小，点击框内部可以拖拽位置。使用的是canvas。

2. 效果图

3. 代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    <style>
      .bg {
        opacity: 0.2;
        width: 500px;
        height: 500px;
      }
      .bg img {
        width: 100%;
        height: 100%;
      }
      .canvas-box {
        margin-left: 100px;
        position: absolute;
        left: 0;
        top: 0;
        text-align: center;
      }
      #tutorial {
      }
    </style>
  </head>
  <body>
    <div class="bg">
      <img src="./images/wangge.png" />
    </div>
    <div class="canvas-box">
      <canvas id="tutorial" width="300" height="300">
        <img src="./images/1.jpg" />
      </canvas>
    </div>
    <script type="text/javascript">
      var lineArr = [
        { x: 100, y: 100, text: 'A' },
        { x: 100, y: 250, text: 'B' },
        { x: 400, y: 250, text: 'C' },
        { x: 400, y: 100, text: 'D' }
      ]
      let mouseDown = false,
        isMoving = false,
        draggedEntity = null,
        draggedPoint = null,
        canvas = null,
        cvsCtx = null,
        selectionRadius = 6 * 6

      function resizeDraw(params) {
        clearDraw()
        draw()
      }

      function clearDraw(params) {
        $('#tutorial').attr({ width: 500, height: 500 })
        canvas = document.getElementById('tutorial')
      }

      function isPointInPath(Polygon, Point) {
        var CrossNum = 0
        for (let i = 0; i < Polygon.length; i++) {
          var p1 = Polygon[i],
            p2 = Polygon[(i + 1) % Polygon.length]
          if (p1.y == p2.y || Point.y < Math.min(p1.y, p2.y) || Point.y >= Math.max(p1.y, p2.y)) {
            continue
          }
          var x = ((Point.y - p1.y) * (p2.x - p1.x)) / (p2.y - p1.y) + p1.x
          if (x > Point.x) {
            CrossNum++
          }
        }
        return CrossNum % 2 == 1
      }

      function draw(params) {
        if (!canvas.getContext) return false
        cvsCtx = canvas.getContext('2d')
        cvsCtx.lineWidth = 2
        cvsCtx.strokeStyle = '#e2a62b'

        cvsCtx.save()
        cvsCtx.moveTo(100, 100)
        cvsCtx.beginPath()
        for (let i = 0; i < lineArr.length; i++) {
          cvsCtx.lineTo(lineArr[i].x, lineArr[i].y)
        }
        cvsCtx.closePath()
        cvsCtx.stroke()

        for (let i = 0; i < lineArr.length; i++) {
          cvsCtx.beginPath()
          cvsCtx.arc(lineArr[i].x, lineArr[i].y, 6, 0, Math.PI * 2, true)
          cvsCtx.fillStyle = '#0053d9'
          cvsCtx.fill()
          cvsCtx.closePath()
          cvsCtx.stroke()
          cvsCtx.restore()

          cvsCtx.font = '20px Arial'
          cvsCtx.fillStyle = '#2f71ad'
          cvsCtx.textAlign = 'left'
          cvsCtx.fillText(lineArr[i].text, lineArr[i].x, lineArr[i].y)
        }
      }
      ;(function () {
        resizeDraw()

        $('#tutorial').on('mousemove', e => {
          e.stopPropagation()
          if (mouseDown && draggedEntity) {
            for (let i = 0; i < lineArr.length; i++) {
              if (lineArr[i].text == draggedEntity.text) {
                // let off = canvas.getBoundingClientRect() || getClientRect()
                let tmpPoint = { ...lineArr[i] }
                lineArr[i].x = e.offsetX
                lineArr[i].y = e.offsetY
                let preIndex = i - 1 >= 0 ? i - 1 : lineArr.length - 1
                let nextIndex = i + 1 <= lineArr.length - 1 ? i + 1 : 0
                lineArr[preIndex].y == tmpPoint.y
                  ? (lineArr[preIndex].y = e.offsetY)
                  : (lineArr[preIndex].x = e.offsetX)
                lineArr[nextIndex].y == tmpPoint.y
                  ? (lineArr[nextIndex].y = e.offsetY)
                  : (lineArr[nextIndex].x = e.offsetX)
                break
              }
            }
            resizeDraw()
          }
          if (isMoving && draggedPoint) {
            lineArr.forEach(point => {
              point.x += e.offsetX - draggedPoint.x
              point.y += e.offsetY - draggedPoint.y
            })
            draggedPoint = { x: e.offsetX, y: e.offsetY }
            resizeDraw()
          }
        })
        $('#tutorial').on('mousedown', e => {
          mouseDown = true
          let entity = null

          // 判断是否在圆角内或圆角上
          for (let i = 0; i < lineArr.length; i++) {
            let x = e.offsetX - lineArr[i].x
            let y = e.offsetY - lineArr[i].y
            if (x * x + y * y <= selectionRadius) {
              entity = lineArr[i]
              continue
            }
          }
          draggedEntity = entity
          if (!draggedEntity && isPointInPath(lineArr, { x: e.offsetX, y: e.offsetY })) {
            isMoving = true
            draggedPoint = { x: e.offsetX, y: e.offsetY }
          }
        })
        $('#tutorial').on('mouseup', e => {
          mouseDown = false
          draggedEntity = null
          isMoving = false
          draggedPoint = null
        })
      })()
    </script>
  </body>
</html>

<!-- 
canvas简易版 已知四个点绘制矩形，并且顶点拖动
https://blog.youkuaiyun.com/weixin_43843679/article/details/115867883

canvas 多个图形可视化操作:拖拽、缩放、旋转
https://juejin.cn/post/6894433110491201543

canvas四个点画矩形，中垂线，以及顶点拖拽
https://blog.youkuaiyun.com/weixin_43843679/article/details/115867385

canvas简易版 已知四个点绘制矩形，并且顶点拖动
https://blog.youkuaiyun.com/weixin_43843679/article/details/115867883
 -->

4. 资料图片

images/wangge.jpg