当画布大小相对时，在画布上获得正确的鼠标位置

Getting correct mouse position on Canvas when canvas size is relative?

本文关键字：鼠标 位置 相对 布大小      更新时间：2023-09-26

问题如下，我的画布的宽度和高度是相对于它的父。在css中，它的宽度和高度设置为95%。这导致我的getMousePosition函数不能正常工作，这意味着当我单击画布点时，实际绘制矩形的点离观察到的单击点很远。

这是html的内容

<div class="Container">
            <div id = 'left-div'>
                <canvas class = "Blackboard" id = "blackboard-canvas" >
                </canvas>
            </div>                  
            <div id='right-div'>
                <div id = 'tools-div'>
                    <ul>
                        <li><a href='#colorOption'>Color Options</a></li>
                        <li><a href='#toolbar-option'>Tool Bar</a></li>
                    </ul>
                    <div id='colorOption'>
                        <canvas id='color-option-canvas' >
                        </canvas>
                    </div>
                    <div id='toolbar-option'>
                        Tool bar options goes here
                    </div>
                </div>
            </div>
            <br style="clear:both;"/>
        </div>

和相关的css

.Blackboard{
border-style: ridge;
border-color: gray;
border-width: 5px; 
width: 96%;
height: 96%;
cursor: crosshair;
position: relative;
-webkit-border-radius: 16px;
-webkit-box-shadow: 0px 6px 7px #0a0505;
  };
 .Blackboard:active{
cursor: crosshair;
  }
 .Container{
border-color: #666;
border-width: 10px;
border-style: inset;
background-color: gray;
width: 700px;
height: 400px;
 }
 #right-div, #left-div{
height: 100%;
 }
 #left-div{
float: left;
width: 60%;
 }
 #right-div{
float: right;
background-color: black;
width: 40%;
 }

有办法让它"正常化"吗?

编辑:

这里是一个jfiddle http://jsfiddle.net/EZktE/

您的问题是您的画布假设width=300 height=150的默认<canvas>大小属性。这些属性设置画布的坐标系统，独立于任何css派生的宽度和高度属性。

要解决这个问题，把它放在找到canvas元素的那行后面:

this.canvas.width = this.canvas.offsetWidth;
this.canvas.height = this.canvas.offsetHeight;

这也处理了96%的比例系数。

见http://jsfiddle.net/alnitak/9JtfW/

NB:你自己的小提琴不工作，因为你的Blackboard类是在jsfiddle的默认$(document).ready()处理程序中创建的，所以当从HTML中的内联处理程序调用时不在范围内。

当然，只需用您检索到的x和y减去画布DOMElement的OffsetX和OffsetY属性。

在用户开始放大之前，这将正常工作，这是一个相当困难的问题。

相关文章：