Рисование линий на холсте с замерами IE9

Я недавно попытался создать простой художник с использованием холста. Я использовал mousedown, чтобы захватить отправную точку. На mousemove я нарисовал линию от начальной точки до текущей точки и заменил начальную точку текущей точкой. Наконец, я удалил обработчики событий в mouseup. Это решение отлично работало на Chrome, Firefox и Safari, но когда я тестировал его на IE9, я столкнулся с раздражающей ошибкой. Линии, которые я рисую, появляются только после события mouseup. Любые идеи относительно того, почему это происходит, и как мне его исправить?Рисование линий на холсте с замерами IE9

Я добавил простую тестовую страницу, чтобы продемонстрировать этот вопрос http://kfirg.com/rage/main.htm Попробуйте нарисовать длинную линию или круг или что-то подобное. На хром он будет работать отлично, но на IE9 он будет отставать, как сумасшедший.

Примечания: Я использовал jQuery и jCanvas для этого простого художника. Я также попытался реализовать его сам, используя canvas api напрямую, и я столкнулся с той же проблемой.

Обновлено jsFiddle: http://jsfiddle.net/t5QpN/1/

источник

2012-04-13 kfir

Я нашел демо онлайн http://ie.microsoft.com/testdrive/Graphics/CanvasPad/Default.html Посмотрите на демо-мыши, и он работает как очарование в IE там, но я не могу найти разницу между этим кодом и моим.Если бы кто-нибудь мог помочь мне разобраться в различии, это было бы здорово. – kfir

После некоторого разыгрывания я обнаружил, что если я очищаю полотно так, то ctx.fillStyle = "rgba (0,0,0,0.05)"; ctx.fillRect (0, 0, canvas.width, canvas.height); Чем производительность на IE намного лучше, кто-нибудь может объяснить, почему? Другой способ делает canvas.width = canvas.width; canvas.height = canvas.height; – kfir

Вы на самом деле имеют больше ошибок, чем в IE. Из моих тестов линии спорадически нарисованы.

I made a jsFiddle of this to test.

У меня нет ответов только идей. Я никогда не использовал приложение для рисования с карандашом, как это, я сделал это с опросом, когда мышь не работает. Очевидно, что ваш код розыгрыша работает, как вы ожидали в IE, если вы посмотрите на консоль. Движение мыши должно стрелять столько, сколько вы хотите.

Так что же может быть сделка. Я думаю, одна из двух вещей

IE слишком занят чем-то другим в потоке не рисовать холст, пока после мыши вверх
(относящиеся к 1) Возможно, вы рисуете слишком часто и перегрузки его

Если любой из этих двух правильных значений, я думаю, вам нужно переключиться на опрос каждые X миллисекунд для позиции мыши. Это не даст вам гладкой линии, но вы можете настроить X, пока это не будет выглядеть хорошо.

Надеюсь, это поможет!

источник

2012-04-13 14:39:25 scottheckel

Это похоже на трюк! один вопрос, хотя, какую функцию вы использовали для объединения? setTimeout, setInterval, requestAnimationFrame – kfir

Я использовал setTimeout, а затем, при необходимости, сбросил его. Я не уверен, имеет ли это значение в любом случае. – scottheckel

Ну, к сожалению, я проверил с более старой версией ie и работал на flashcanvas вместо native-ie. Кажется, что на flashcanvas это работает, как должно, но на обычном, то есть это не так :( – kfir

Я думаю, что ваш код тяжелым для MouseMove события:

var fncMouseMoveHandler = function (e) { 
     console.log('Move!', 'e', { x: e.offsetX, y: e.offsetY }, 'prev', prev); 
     $main_canvas.drawLine({ 
      strokeStyle: settings.color, 
      strokeWidth: 2, 
      strokeCap: "round", 
      strokeJoin: "miter", 
      x1: prev.x, 
      y1: prev.y, 
      x2: e.offsetX, 
      y2: e.offsetY 
     }); 
     prev = { x: e.offsetX, y: e.offsetY }; 
    }

Вы используете API, применяя стиль и вычисления не нужны вещи. Код для рисования должно быть так просто: Вы получаете координаты, и рисовать:

context.lineTo(x, y); 
context.stroke();

стили штриха не должны быть определены в вашем случае MouseMove, холст запомнит настройки.

Отличный учебник доступен в оперном Dev центре: http://dev.opera.com/articles/view/html5-canvas-painting/

источник

2012-04-13 18:23:06 jazzytomato

спасибо за подсказку :) – kfir

Рисование линий на холсте с замерами IE9

ответ

Смежные вопросы