參考畫布位置的問題

不幸的是，jsfiddle今天似乎很糟糕，所以我會盡我所能來描述我所追求的。參考畫布位置的問題

我確實有兩個div是固定大小（100px乘100px）。這些是jQuery UI可拖動的。

標記看起來像這樣：

<body> 
<div class="touch" id="front"><img src="front.png" /></div> 
<div class="touch" id="back"><img src="back.png" /></div> 
<canvas id="connect"></canvas> 
</body>

和CSS看起來像這樣：

.touch{ 
width: 100px; 
height: 100px; 
background-color: red; 
} 
#connect{ 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
}

現在我試圖用畫布繪製通過執行以下兩個div連接線對drag：

var ctx = canvas.getContext('2d'); 
ctx.beginPath(); 
ctx.moveTo($('#front').offset().left,$('#front').offset().top); 
ctx.lineTo($('#back').offset().left,$('#back').offset().top); 
ctx.stroke();

這是作爲一條線繪製accordin g到div s的變動，但它完全超出比例，即起始點和終點似乎被乘以某個因子。然而，當我通過硬編碼值繪製一個元素時，它似乎工作正常，當我記錄這些值時，它們似乎是合理的。任何人都可以告訴我我在這裏做錯了什麼？

來源

2012-02-09 m90

因爲您正在通過CSS設置畫布寬度和高度，而不是通過寬度和高度屬性。帆布是這樣特別的。

默認情況下，該畫布的尺寸爲300x150，並且仍然是，它只是被CSS「拉伸」爲100％/ 100％。

我強烈建議不要在CSS中定義畫布的大小，因爲您只能將其從「真實」大小縮放。

在代碼中設置過程中，你將不得不做

// silly pseudocode 
canvas.width = theCanvasParent.clientWidth; // or whatever attribute it is, I'd reccomend putting all of those things in one giant container div 
canvas.height = theCanvasParent.clientHeight;

因爲當父DIV改變大小大多數瀏覽器不觸發一個事件，你只需要第二檢查，也就是說，每半用計時器來查看div是否改變了大小。如果有，則相應地調整畫布大小。

來源

2012-02-09 17:38:10

我結束了使用'canvas.width = document.width; canvas.height = document.height;'完美的作品。感謝您的解釋！ – m90 2012-02-10 08:11:25

只是一個簡單的說明，它可以在用戶調整窗口大小之前一直工作，但如果用戶安裝了像StumbleUpon工具欄之類的東西，就會被破壞，因爲該欄爲''元素添加了一個空白。雖然這很少見。 – 2012-02-10 14:31:27

有趣的提示，但因爲這將用於基於Phonegap的Android應用程序鎖定方向，在這種情況下可能陷阱的數量大大減少。幸運的我。謝謝。 – m90 2012-02-10 17:37:10

參考畫布位置的問題

回答

相關問題