我正在开发一个制作区域和绊网的工具,并且我正在与Raphael JS合作。问题是我想建立一条恐怖的路径而且我认为我得到了它,至少在Chrome中,因为在Firefox中它变得疯狂。
我的意思是疯狂的是点的位置与光标的实际位置不对应(我重复一遍,仅在Firefox中)。
你在这里做了一个小提琴。
http://jsfiddle.net/6dd2870b/4/
关于为什么会发生这种情况的任何想法?
提前谢谢。
小提琴的javascript代码是:
var canvas = document.getElementById('canvas'),
paper = new Raphael(canvas, canvas.height, canvas.width),
mousedown = false,
lastX, lastY, path, pathString, pathAux, pointsAux = [];
$(canvas).mousedown(function (e) {
var x = e.offsetX,
y = e.offsetY;
if (!mousedown) {
pathString = 'M ' + x + ' ' + y + ' ';
mousedown = true;
} else {
pathString += 'l ' + (x - lastX) + ' ' + (y - lastY) + ' ';
}
pointsAux.push({x: x, y: y});
path = paper.circle(x,y,9);
path = paper.path(pathString);
lastX = x;
lastY = y;
});
$(canvas).mousemove(function (e) {
if (!mousedown) {
return;
}
var x = e.offsetX,
y = e.offsetY;
pathAux = pathString + 'l ' + (x - lastX) + ' ' + (y - lastY);
path.attr('path', pathAux);
});
$('#finish').click(function (e) {
if ($('#type').val() != 1) {
pathAux = pathString + ' z';
path.attr('path', pathAux);
} else {
path.attr('path', pathString);
}
mousedown = false;
});
$('#cancel').click(function (e) {
paper.clear();
mousedown = false;
});