草图.js - 画笔从鼠标指针下方开始

Sketch.js - the brush starts below the mouse pointer

本文关键字：方开始 开始 鼠标指针 js 画笔 草图      更新时间：2023-09-26

工作 ：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;
}

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

相关文章：