Question

问题如下，我的画布宽度和高度是相对于它的父母。在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/

Answer 1

您的问题是您的画布假定<canvas>的默认width=300 height=150尺寸属性。这些属性设置画布的坐标系，与任何CSS派生的宽度和高度属性无关。

要解决此问题，请将其放在找到canvas元素的行之后：

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

这也解决了相对于其父母的96％比例因子。

请参阅http://jsfiddle.net/alnitak/9JtfW/

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

Answer 2

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

这将正常工作，直到用户开始放大，这是一个相当难以解决的问题。

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

2 个答案: