javascript - 如何在网格中画线？

Question

我需要有关如何制作事件和在网格中绘制鼠标线的建议。不知何故我不能这样做，所以我可以在网格中画直线。但是我仍然有一个网格，我不知道如何修复绘图错误。我在下面添加我的 Javascript 代码。我的鼠标绘图事件不起作用，它根本不吸引我。

网格的JS代码：

;(function () {
    let canvas, ctx, mouse
  
    class Mouse {
      constructor (ctx, x = 0, y = 0) {
        this.x = x
        this.y = y
        this.ctx = ctx
      }
  
      set pos (evt) {
        const canvasDimensions = canvas.getBoundingClientRect()
  
        this.x = Math.floor(evt.clientX - canvasDimensions.left)
        this.y = Math.floor(evt.clientY - canvasDimensions.top)
  
        const { x, y, ctx } = this
        const txt = `X: ${x}, Y: ${y}`
  
        ctx.font = '16px Poppins'

        const offsetX = x < canvas.width / 2 ? 15 : -ctx.measureText(txt).width - 15
        const offsetY = y < canvas.height / 2 ? 20 : -13
  
        ctx.fillText(txt, this.x + offsetX, this.y + offsetY)
      }
    }
  
    class Line {
      constructor (color, lineWidth, startX, startY, endX, endY) {
        this.color = color
        this.lineWidth = lineWidth
        this.startX = startX
        this.startY = startY
        this.endX = endX
        this.endY = endY
      }
  
      draw (ctx) {
        const { color, lineWidth, startX, startY, endX, endY } = this
  
        ctx.beginPath()
        ctx.strokeStyle = color
        ctx.lineWidth = lineWidth
        ctx.moveTo(startX, startY)
        ctx.lineTo(endX, endY)
        ctx.stroke()
      }
    }
  
    class Grid {
      constructor (
        color = 'black', lineWidth = 0.25, step = 25,
        boldNth = 5, boldColor = 'black', boldWidth = 0.25
      ) {
        this.color = color
        this.lineWidth = lineWidth
        this.step = step
        this.boldNth = boldNth
        this.boldColor = boldColor
        this.boldWidth = boldWidth
  
        this.lines = null
      }
  
      createLines () {
        const {
          color, lineWidth, step,
          boldNth, boldColor, boldWidth
        } = this
  
        const lines = []
  
        const div = boldNth * step
  
        for (let x = 0; x < canvas.width; x += step) {
          const isNth = x % div === 0
  
          lines.push(
            isNth
              ? new Line(boldColor, boldWidth, x, 0, x, canvas.height)
              : new Line(color, lineWidth, x, 0, x, canvas.height)
          )
        }
  
        for (let y = 0; y < canvas.height; y += step) {
          const isNth = y % div === 0
  
          lines.push(
            isNth
              ? new Line(boldColor, boldWidth, 0, y, canvas.width, y)
              : new Line(color, lineWidth, 0, y, canvas.width, y)
          )
        }
  
        this.lines = lines
      }
  
      drawText (ctx) {
        const { step, boldNth, boldColor } = this
  
        ctx.font = '16px Poppins'
        ctx.fillStyle = boldColor
  
        ctx.fillText('0', 1, 15)
  
        for (let x = step * boldNth; x < canvas.width; x += step * boldNth) {
          ctx.fillText(x, x, 15)
        }
  
        for (let y = step * boldNth; y < canvas.height; y += step * boldNth) {
          ctx.fillText(y, 0, y + 15)
        }
      }
  
      draw (ctx) {
        if (!this.lines) this.createLines()
  
        this.lines.forEach(line => line.draw(ctx))
        this.drawText(ctx)
      }
    }
  
    function init () {
      canvas = document.getElementById('Canvas')
      ctx = canvas.getContext('2d')
      mouse = new Mouse(ctx)
  
      const grid = new Grid('black', 0.25, 50, 1)
  
      grid.draw(ctx)
  
      canvas.addEventListener('mousemove', (evt) => {
        ctx.clearRect(0, 0, canvas.width, canvas.height)
  
        grid.draw(ctx)

        mouse.pos = evt
      })

      canvas.addEventListener('mouse:down', function(o){
        isDown = true;
        var pointer = canvas.getPointer(o.e);
        var points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
        line = new fabric.Line(points, {
        strokeWidth: 5,
        fill: 'red',
        stroke: 'red',
        originX: 'center',
        originY: 'center'
      });
    });

    canvas.addEventListener('mouse:move', function(o){
      if (!isDown) return;
      var pointer = canvas.getPointer(o.e);
      line.set({ x2: pointer.x, y2: pointer.y });
      canvas.renderAll();
      grid.draw(ctx)
      });
  
      canvas.on('mouse:up', function(o){
      isDown = false;
      grid.draw(ctx)
      });

    }
  
    document.addEventListener('DOMContentLoaded', init)
  })()

标签： javascriptcanvasmouseeventdrawing

Answer 1