javascript - 为什么我无法在画布上正确绘制
问题描述
我正在开发一个油漆应用程序。当我将画板放置在屏幕的左侧时,我能够正确绘制。但是当我将它放在屏幕的右侧时,鼠标不会在它所在的位置绘制,而是在它右侧 100 px 之外。我开发了一个拖动功能,它可以让我将绘图应用程序的窗口拖动到屏幕中的不同位置。我正在使用香草 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
}
解决方案
// 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;
为我工作,希望它对你有用。
e.pageX
/e.pageY
将获得鼠标在整个页面上的坐标。
window.pageXOffset
/window.pageYOffset
将为您提供用户到目前为止滚动的数量。
rect.left
/会给你元素rect.top
左上角的坐标canvas
e.pageY - window.pageYOffset
= 鼠标在窗口中的位置
e.pageY - window.pageYOffset - rect.top
= 鼠标在画布内的位置
推荐阅读
- java - 从 pentaho Kettle 到 Java 的自定义错误代码
- arduino - 需要使2个伺服无线移动
- c# - 通过 volatile 引用类型的值传递
- c++ - C ++何时检查异步方法的异常
- html - 如何在 Angular 2 中将 App 组件中的图像绑定到 HTML 文件
- reactjs - 从 ADFS 2016、react、ADAL.js 获取用户信息
- c++ - 默认构造函数如何知道在哪里初始化内存中数据成员的默认值
- android - 录制视频时仅录制设备声音并静音麦克风录制的声音
- python - Scapy 和 tcp syn 泛洪攻击
- c# - amazonS3client.SelectObjectContentAsync - 下载大型 jsonline 格式文件 - 不需要的换行符