iPad HTML5 Canvas не обновляется - PullRequest
Новая
       8

iPad HTML5 Canvas не обновляется

2 голосов
/ 24 февраля 2011

Редактировать: Демо-код находится на вкладке "Проводник параллелограмма" здесь: http://atmdev01.procloud.net/geometry_tools9/

Итак, я вызываю следующую функцию javascript при загрузке документа, чтобы нарисовать периметр параллелограмма, и это прекрасно работает. Проблема заключается в том, что когда я вызываю функцию из обработчика сенсорного перемещения, чтобы позволить пользователю iPad настраивать размер параллелограмма, холст неправильно перерисовывает фигуру. На самом деле это не отвечает вообще. Я запустил несколько предупреждений, чтобы убедиться, что эта функция действительно запущена и работает.

Может ли быть проблема с тем, как я очищаю холст (метод "canvas.width = canvas.width + 0") или просто с частотой обновления на iPad?

Интересно то, что он отлично работает в настольном браузере, использующем перемещение мыши, но не на iPad, использующем сенсорное движение. Пожалуйста, посоветуйте ...

(«углы» в коде - это области, где пользователь может коснуться и перетащить, чтобы изменить размер параллелограмма) 

this.drawSides = function() {
    var order = [1, 2, 4, 3];
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var firstCorner = this.getCornerObj(1);
    var secondCorner = this.getCornerObj(2);    
    var firstCornerOpp = this.getCornerObj(firstCorner.opp);
    var secondCornerOpp = this.getCornerObj(secondCorner.opp);      

    /* Clear the canvas and draw a parallelogram with the provided corners */
    canvas.width = canvas.width + 0; //clears the canvas faster than clearRect
    ctx.beginPath();
    for (i in order) {
        if (i < order.length) {
            var cornerObj = this.getCornerObj(order[i]);
            if (order[i] > 1) {
                var prevObj = this.getCornerObj(order[i-1]);
                ctx.moveTo(prevObj.x  + (prevObj.width)/2, prevObj.y + (prevObj.height)/2);
                ctx.lineTo(cornerObj.x + (cornerObj.width)/2, cornerObj.y + (cornerObj.height)/2);                  
            }
        }
    }

    ctx.lineTo(firstCorner.x + (firstCorner.width)/2, firstCorner.y + (firstCorner.height)/2);
    ctx.strokeStyle = "#300";
    ctx.stroke();
}

Ответы [ 3 ]

4 голосов
/ 24 февраля 2011

Холст не очищен должным образом с canvas.width = canvas.width; в сафари.

3 голосов
/ 17 сентября 2011

Имейте в виду, что очистка холста с помощью context.clearRect () менее затратна в вычислительном отношении, чем сброс размера холста. Это действительно важно для мобильных устройств и планшетов.

Ссылка: http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-clear-canvas

1 голос
/ 28 февраля 2011

Я решил эту проблему. Оказывается, проблема была в том, что я не обновлял должным образом координаты x и y своих угловых объектов при сенсорном перемещении. (приведенный выше фрагмент кода не имеет проблем)

Также, для дальнейшего использования, canvas.width = canvas.width + 0; отлично работает на Safari и iPad.

...