我正在尝试使用 Paper.js 构建一个简单的绘图应用程序。我可以用鼠标绘图,但光标和 Canvas 上绘制的线条之间有间隙。
我意识到网页顶部的导航菜单正在按下光标(100px)我假设鼠标坐标是从窗口的左上角(0-0)获取的,并且在从其左上角测量这些点的 Canvas (参见屏幕截图)。我尝试将 Canvas 位置设置为绝对位置,这有助于将其放置在左上角核心器上,但我需要将其放置在窗口的中心。
我该如何解决这个问题?
谢谢!
脚本:
...
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();
}
最佳答案
我可以使用 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>
关于javascript - Paper.js,光标和 Canvas 之间的间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33068419/