jquery - Bootstrap 偏移量和 HTML5 Canvas

Question

我有一个可以使用 jQuery 绘制的 Canvas ，但我在将它与 Bootstrap 集成时遇到了问题。更准确地说，当我放一个

col-lg-offset-4

在我的类里面， Canvas 停止响应我的点击。

这是 Bootply:

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

请注意，如果您删除偏移量，然后再次运行它，它就会开始正常工作。在 Bootply 上试用。

任何帮助将不胜感激。我已经尝试解决这个问题太久了。

谢谢。

Answer 1

只需使用 col-lg-offset-4除了col-lg-4 col-lg-offset-4为类(class)。快速修复。

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

在您的代码中，它实际上是在 Canvas 上绘制，但在 Canvas 的右边很远。例如，如果它是这样的:

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

你会注意到这个偏移图。

好的，那么我们如何用 <div class="col-lg-4 col-lg-offset-4"> 保存它呢？ ？好吧，请注意被抵消的是 div元素而不是 Canvas 。所以我们需要根据那个 div 调整我们的绘图位置，换句话说 canvas 的父级.所以在你的代码中不是 this.offset我们需要 parent .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 带有偏移量的代码。