为什么我无法在 canvas 上正确绘图

Question

I am developing a paint application.我正在开发一个油漆应用程序。 When I position the painting board on the left part of the screen, I am able to draw properly.当我 position 画板在屏幕左侧时，我能够正确绘制。 But when I position it on the right part of the screen, the mouse doesn't draw in the place where it is positioned, but like 100 px away on the right of it.但是，当我将它 position 它放在屏幕的右侧时，鼠标不会在它所在的位置绘制，而是在它右侧 100 px 处绘制。 I have developed a drag function, which lets me drag the window of the paint app to different locations in the screen.我开发了一个拖动 function，它可以让我将绘图应用程序的 window 拖动到屏幕中的不同位置。 I am using vanilla Javascript and custom elements.我正在使用香草 Javascript 和自定义元素。

const template = document.createElement('template')
template.innerHTML = `
<head>
<link rel="stylesheet" href="../css/paint-board.css">
</head>
<div id="board">
<div class="navbar">
<img id="pic" src="../image/tools.png" alt="paint" />
<img id="close" src="../image/error.png" alt="close window" />
</div>
<div id="bucketDiv" class="colour">
<img id="bucket" src="../image/paint-bucket.png" alt="bucket" />
</div>
</div>
<div id="paint">
<canvas id="canvasDrawing">
</canvas>
</div>
</div>
`
export class PaintBoard extends window.HTMLElement {
  constructor () {
    super()
    this.attachShadow({ mode: 'open' })
    this.shadowRoot.appendChild(template.content.cloneNode(true))
    this.x = 0
    this.y = 0
    window.colour = 'black'
    const canvas = this.shadowRoot.querySelector('#canvasDrawing')
    window.ctx = canvas.getContext('2d')
  }

  connectedCallback () {
    this.initialize()
    this.closeWindow()
    this.changeColour()
    this.changeLineWidth()
    this.changeBackground()
  }

  closeWindow () {
    const close = this.shadowRoot.querySelector('#board')
    close.addEventListener('click', event => {
      if (event.target === this.shadowRoot.querySelector('#close')) {
        close.classList.add('removed')
      }
    })
  }

  // intialize drawing on the board
  initialize () {
    const paintingBoard = this.shadowRoot.querySelector('#paint')
    this.size()
    paintingBoard.addEventListener('mousemove', event => {
      event.stopImmediatePropagation()
      this.draw(event)
    })
    paintingBoard.addEventListener('mousedown', event => {
      event.stopImmediatePropagation()
      this.setPosition(event)
    })
    paintingBoard.addEventListener('mouseenter', event => {
      this.setPosition(event)
    })
    dragElement(this.shadowRoot.querySelector('#board'))
  }

  draw (e) {
    if (e.buttons !== 1) return // if mouse is pressed.....
    window.ctx.beginPath() // begin the drawing path
    window.ctx.lineCap = 'round' // rounded end cap
    window.ctx.strokeStyle = window.colour // hex color of line
    window.ctx.moveTo(this.x, this.y) // from position
    this.x = e.clientX
    this.y = e.clientY
    window.ctx.lineTo(this.x, this.y) // to position
    window.ctx.stroke() // draw it!
  }

  // size canvas
  size () {
    window.ctx.canvas.width = 750
    window.ctx.canvas.height = 510
  }

  // new position from mouse events
  setPosition (e) {
    this.x = e.clientX
    this.y = e.clientY
  }

Answer 1

// where canvas is your canvas element
const rect = canvas.getBoundingClientRect();
this.x = e.pageX - window.pageXOffset - rect.left;
this.y = e.pageY - window.pageYOffset - rect.top;

Worked for me, hopefully it will work for you.为我工作，希望它对你有用。

e.pageX / e.pageY will get you the coordinates of the mouse on the page as a whole. e.pageX / e.pageY将获得鼠标在整个页面上的坐标。

window.pageXOffset / window.pageYOffset will get you the amount the user has scrolled so far. window.pageXOffset / window.pageYOffset将为您提供用户到目前为止滚动的数量。

rect.left / rect.top will give you the coordinates of the top left corner of your canvas element rect.left / rect.top将为您提供canvas元素左上角的坐标

e.pageY - window.pageYOffset = location of your mouse in the window e.pageY - window.pageYOffset - rect.top = location of your mouse inside the canvas e.pageY - window.pageYOffset = location of your mouse in the window e.pageY - window.pageYOffset - rect.top = location of your mouse inside the canvas

为什么我无法在 canvas 上正确绘图

问题描述

1 个解决方案

解决方案1
0 2021-12-23 03:20:54

为什么我无法在 canvas 上正确绘图

问题描述

1 个解决方案

解决方案1 0 2021-12-23 03:20:54

解决方案1
0 2021-12-23 03:20:54