javascript - Sketch.js - 画笔从鼠标指针下方开始

Question

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

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

检查工作 fiddle 。如果您按住左键并开始拖动鼠标，画笔标记将从鼠标指针的尖端开始。

但在我尝试的"new" fiddle 中，画笔标记开始于指针尖端下方的某处。

如何解决这个问题。

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

它与 Canvas 和高/宽样式有关。你最好为此使用属性。将您的 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/