Paper.js，光标和画布之间的间隙答案

【问题标题】：Paper.js, gap between cursor and canvasPaper.js，光标和画布之间的间隙
【发布时间】：2016-01-09 04:22:25
【问题描述】：

我正在尝试使用 Paper.js 构建一个简单的绘图应用程序。我可以用鼠标绘图，但光标和画布上绘制的线条之间存在间隙。

我已经意识到网页顶部的导航菜单正在按下光标（100px）我假设鼠标坐标取自窗口的左上角（0-0）并且使用相同的坐标从左上角测量这些点的画布（见截图）。我尝试将画布位置设置为绝对位置，这有助于将其置于左上角的核心，但我需要将它放在窗口的中心。

我该如何解决这个问题？

谢谢！

脚本：

...
    var doc = $(document),
            win = $(window),
            canvas = $('#paper'),
            ctx = canvas[0].getContext('2d')

    doc.on('mousemove',function(e){
            if($.now() - lastEmit > 30){
                socket.emit('mousemove',{
                    'x': e.pageX,
                    'y': e.pageY,
                    'drawing': drawing,
                    'id': id                
                });

                lastEmit = $.now();
            }

            // Draw a line for the current user's movement, as it is
            // not received in the socket.on('moving') event above
            // (because he only broadcats (not receiving))

            if(drawing){

                drawLine(prev.x, prev.y, e.pageX, e.pageY);

                prev.x = e.pageX;
                prev.y = e.pageY;
            }
        });




        function drawLine(fromx, fromy, tox, toy){
            console.log(fromy + ' ' + toy);

            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.stroke();
        }

【问题讨论】：

您的脚本使用的是纯 JavaScript/DOM 代码；我看不到paperjs的任何用途。我怀疑问题出在您在事件中使用的 (x, y) 位置。除非画布和整个文档相同，否则 pageX 和 pageY 将被偏移。您需要将坐标转换为画布坐标。

标签： javascript canvas drawing coordinates paperjs

【解决方案1】：

我可以通过使用 paperjs 的早期版本来重现您的问题 - 特别是这个版本是 jsfiddle 上的版本。我看到线条偏移了您使用 v 0.22 的方式，然后使用版本 0.9.25 正确渲染。这是我的代码：

<!-- fails -->
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js'></script>

<!-- works --> <!--
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.25/paper-full.js'></script>
-->

<style type='text/css'>
    #canvas1{
        height: 400px;
        width: 400px;
        border: 1px solid black;
    }
</style>

<script type='text/javascript'>
    paper.install(window);

    window.onload = function() {
        paper.setup('canvas1');
        var path = new Path();
        var tool = new Tool();
        path.strokeColor = 'black';
        tool.onMouseMove = function(event) {
            path.add(event.point);
        }

    }
</script>

【讨论】：