引导偏移和 HTML5 画布

Question

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

col-lg-offset-4

在我的课堂上，画布停止响应我的点击。

这是 Bootply：

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

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

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

谢谢。

Answer 1

只使用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 带有偏移量的代码。