Задержки onmousemove
Приветствую, столкнулся с проблемой, когда при onmousemove быстро водить мышкой по экрану событие начинает пропускать некоторые промежуточные координаты, а мне нужно учитывать абсолютно все, как этого можно добиться?
Пример с canvas: Попробуйте быстро быстро поводить по холсту и круги начнут отделяться
<head>
<script type="text/javascript">
var brush = {size: 20};
function getOffset(elem) {
if (elem.getBoundingClientRect) {
// "правильный" вариант
return getOffsetRect(elem)
} else {
// пусть работает хоть как-то
return getOffsetSum(elem)
}
}
function getOffsetSum(elem) {
var top=0, left=0
while(elem) {
top = top + parseInt(elem.offsetTop)
left = left + parseInt(elem.offsetLeft)
elem = elem.offsetParent
}
return {top: top, left: left}
}
function getOffsetRect(elem) {
// (1)
var box = elem.getBoundingClientRect()
// (2)
var body = document.body
var docElem = document.documentElement
// (3)
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
// (4)
var clientTop = docElem.clientTop || body.clientTop || 0
var clientLeft = docElem.clientLeft || body.clientLeft || 0
// (5)
var top = box.top + scrollTop - clientTop
var left = box.left + scrollLeft - clientLeft
return { top: Math.round(top), left: Math.round(left) }
}
function radian(deegree) {
return (Math.PI / 180) * deegree;
}
function draw(coordinats) {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(coordinats.x, coordinats.y, brush.size, 0, radian(360), true);
ctx.closePath();
ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="600" height="300" style="border: 2px black solid; margin-left: 50px;">
Ваш браузер не поддерживает canvas.
</canvas>
<script type="text/javascript">
(function(){
var coordinats = {}, node = document.getElementById('canvas'), drag = false;
node.onmousedown = function (e) {
e = e || window.event; drag = true;
coordinats.x = e.clientX + document.body.scrollLeft - parseInt(getOffsetSum(node).left);
coordinats.y = e.clientY + document.body.scrollTop - parseInt(getOffsetSum(node).top);
draw({x: coordinats.x, y: coordinats.y});
}
node.onmousemove = function (e) {
e = e || window.event;
var change = {
x: e.clientX + document.body.scrollLeft - parseInt(getOffsetSum(node).left),
y: e.clientY + document.body.scrollTop - parseInt(getOffsetSum(node).top)
}
if(drag) draw({x: change.x, y: change.y});
}
document.body.onmouseup = function () {drag = false;}
})();
</script>
</body>
p.s. перепутал, тему не в том разделе создал |
делайте масив metki
добавляйте туда: а) текущий тиместамп,б)коорд. x в) коорд Y пре каждом onmousemove и проверяйте если разнеца между тикущем и предыдущим тиместамп слишком маленькак то отрисовывайт круги от коорд. указаных в предыдущей метке до коорд указаных в текущей метке
document.onmousemove=function()
{
metki.push([new Date ,event.pageX,event.pageY ]);
tek=metki[metki.length-1];
pred=metki[metki.length-2];
if(tek[0]-pred[0]<10)
for(t=pred[1];t <tek[1];t=t+1)
{код для отриовски круга}
}
|
не получится отрисовать круги от прошлой до текущей, т.к. пользователь может выбрать любую траектория рисования, а отрисовать можно будет только прямой линией
|
если пользователь нарисует кривую линию
то записаные в масиве точки будут ей соответсвовать ведь запись идет для каждого onmousemove |
Да вот именно что onmousemove пропускает некоторые координаты, они в массив не запишутся, если быстро вести onmousemove может пропустить 20-100 пикселей.
|
прямая линия влюбом случаи лутше чем совсем ничего
попробуйте в своем скрипте нарисовать параболу быстро проволя мышкой будут пропуски,но если оставшиися круги соединить прямой линией,то получиться чтото похожее на параболу для наглятности приведу скрин http://s011.radikal.ru/i315/1101/59/0f6611113552.jpg линиями обозначены места,где будут круги,отрисованые не пользователем,а скриптом если попробовать моим способом дорисовать синусоиду или чтото посложнее то получиться ломаная линия но покажите мне человека,который может нарисовать синусоиду быстро водя мышкой |
Нет, это совсем не подойдёт проще заставить событие учитывать все точки.
|
попробуй код укоротить по максу. и возможно придётся обратить внимание на быстродействие участков кода и по возможности заменить их на более быстрые.
других проблем по идее нет.Есть книга-по моему её название "Моя бабушка кодирует быстрее чем ты" где всё внимание уделяться проблеме быстродействия кода. не найдёшь её маякни -скину тебе её |
dmitriymar, если банальным alert проверять всё равно показывает пропуски.
|
в код твой я не вчитывался-но наверное здесь проблема постановки событий в очередь-точнее наверное в том что эта очередь ограничена и старые события не выполнившиеся затираются более свежими(это вопрос конечно философский как браузер "думает").попробуй просто убрать рисование и проверь алертом только изменение координат-по идее должно теряться меньше или совсем не теряться-если так будет-то только сокращением кода
Или попробуй ввести конструкцию-пока событие он маусдаун-просто запоминай координаты а по окончанию события уже отрисовывай по собранным координатам-по идее это должно сработать по полной-но наверное в твоём случае это не вариант-рисовать когда не видишь что рисуешь. |
| Часовой пояс GMT +3, время: 16:57. |