Sketch.js -从鼠标指针下面开始刷子

Question

工作：http://jsfiddle.net/3rxvnrLp/1/

新：http://jsfiddle.net/g3sTL/229/

看看工作上的小提琴。如果您按住鼠标左键并开始拖动鼠标，则笔刷标记将从鼠标指针的顶端开始。

但是在我试过的“新”小提琴中，笔刷标记开始于指针顶端的某个地方。

如何解决这个问题。

HTML:

<div>
    <div id="content">
        <img src="http://www.lynnecalder.com/house_clipart.gif">                 
    </div>
</div>

JS:

$(document).ready(function () {
    var body = $('body');
    body.css({
        'position': 'relative',
        'top': '70px'
   }).append('<div id="MarkerTools"></div><canvas id="simple_sketch"></canvas>');
    $('#simple_sketch').sketch();
})

CSS:

* {
    margin: 0;
    padding: 0;
}
#MarkerTools {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0;
    background: #2b539a;
}
#simple_sketch {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left:0;
    border:1px solid green;
}

Answer 1

它与画布和高度/宽度风格有关。您最好将这些属性用于此。将您的js更改为：

$(document).ready(function () {
    var body = $('body'), height = 200, width = 200; # You can calculate height and width here. DONT USE % or em for a canvas!!!.
    body.css({
        'position': 'relative',
        'top': '70px'
    }).append('<div id="MarkerTools"></div><canvas id="simple_sketch" height=' + height + ' width=' + width + '></canvas>');
    $('#simple_sketch').sketch();
})

http://jsfiddle.net/g3sTL/230/