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画布

回答

相关问题