Bootstrap偏移和HTML5畫布

我有一個畫布，我可以使用jQuery繪製，但我有一個問題與bootstrap集成。更確切地說，當我在課堂上放置一個Bootstrap偏移和HTML5畫布

col-lg-offset-4

時，畫布停止響應我的點擊。

這裏是Bootply：

http://www.bootply.com/QmRU7dDF58#

請注意，如果您刪除的偏移量，然後再次運行它，它開始工作的罰款。在Bootply上試試。

任何幫助將不勝感激。我一直試圖解決這個問題太久。

謝謝。

來源

2014-09-19 user4052205

只需使用col-lg-offset-4而非col-lg-4 col-lg-offset-4。快速修復。

<div class="row"> 
    <div class="col-lg-offset-4"> 
     <div class="example" id="drawing"> 
      <h1>Drawing with the mouse</h1> 
      <canvas></canvas> 
      <button id="erase">Erase</button> 
     </div> 
    </div> 
</div>

在您的代碼中，它實際上是在畫布上繪製，但距離它的右邊很遠。例如，如果它是這樣的：

<div class="col-lg-4 col-lg-offset-1">

你會注意到這個偏移圖。

好的，我們如何保持<div class="col-lg-4 col-lg-offset-4">？那麼注意什麼是抵消是div元素，而不是畫布。所以我們需要根據div，也就是canvas的父母來調整繪圖位置。因此，在比this.offset其他代碼，我們需要像這樣偏移父母.left和.top（和變化得到它在中間）：與偏移

var offsetL = $(this).parent().offset().left; 
var offsetT = this.offsetTop + $(this).parent().offset().top - this.offsetLeft; 
addClick(e.pageX - offsetL, e.pageY - offsetT, true); 
redraw();

Here is your working代碼。

來源

2014-09-19 13:11:10

非常感謝。只有一個問題，col-lg-offset-4會自動爲畫布本身設置「col-lg-4」嗎？如果我在該行中有多個事物並希望他們具有專門分配的列，該怎麼辦？ – user4052205 2014-09-19 13:15:18

最初，我有1的偏移量，然後是3的div，然後是4的畫布，然後是3的另一個div，最後是1的偏移量。我怎樣才能確保我繪製的是在畫布上，而不是在某處它不可見？謝謝 – user4052205 2014-09-19 13:22:11

它沒有。一秒鐘，我將提供一個解決方案。基本上你只需要調整你在JavaScript中的鼠標位置。 – 2014-09-19 13:22:22

Bootstrap偏移和HTML5畫布

回答

相關問題