當畫布大小相對時，在Canvas上獲取正確的鼠標位置？

問題在於，我的畫布寬度和高度是相對於它的父母。在CSS中，其寬度和高度設置爲95％。這會導致我的getMousePosition函數無法正常工作，這意味着當我單擊畫布點時，繪製矩形的實際點遠離觀察點擊點。當畫布大小相對時，在Canvas上獲取正確的鼠標位置？

下面是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>

和relavent 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/

來源

2011-10-17 dchhetri

...和'getMousePosition'函數？也許爲此做一個[fiddle]（http://jsfiddle.net/），這樣人們就不必將所有這些東西都複製到一些測試環境中。 – Yoshi

您的問題是，您的畫布將採用width=300 height=150的默認<canvas>尺寸屬性。這些屬性設置畫布的座標系，與CSS派生的任何寬度和高度屬性無關。

要解決這個問題，把這個說發現畫布元素的行後立即：

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

這也與相對於其父的96％比例因子對應。

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

NB：從HTML內嵌處理程序調用時自己搗鼓不工作的範圍，因爲你Blackboard類是的jsfiddle的默認$(document).ready()處理程序中創建的，因此沒有。

來源

2011-10-17 15:33:06 Alnitak

謝謝。所以this.canvasOffset *是畫布的實際尺寸？ – dchhetri

嚴格來說它也包含了邊距，邊框和填充。你應該實際上使用'$（this.canvas）.width（）'等，但是你需要改變你的鼠標位置計算來減去邊界和邊距的大小。 – Alnitak

當然，只要你的。減去帆布一個DOMElement的OFFSETX和OFFSETY性能與x和y您檢索。

這將工作正常，直到用戶開始放大，這是一個相當困難的問題來解決。

來源

2011-10-17 15:24:37 TJHeuvel

當畫布大小相對時，在Canvas上獲取正確的鼠標位置？

回答

相關問題