Относительное положение холста - PullRequest
Новая
       45

Относительное положение холста

2 голосов
/ 21 марта 2011

Я поигрался с элементом canvas в HTML5 и пытаюсь получить относительное положение холста.

Я использую layerX и layerY, которые кажутся наиболее очевидным решением, но по какой-то причине, и, возможно, именно так и работает точка, которую layerX / Y видит в левом углу указателя. мой код выглядит следующим образом 

function ev_canvas (ev) {
    if (ev.layerX || ev.layerX == 0) { // Firefox
      ev._x = ev.layerX;
      ev._y = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 0) { // Opera
      ev._x = ev.offsetX;
      ev._y = ev.offsetY;
    }

Он просто добавляет элементы _x / y к объекту ev, чтобы я мог использовать их на поверхности рисования.

вот видео того, что со мной происходит.

http://img.zobgib.com/2011-03-21_1413.swf

Если вы хотите поиграть с ним сами, вы можете на http://research.zobgib.com/beta

Мне просто нужно установить ручное смещение, или слой X / Y неправильный?

Edit:

Я могу добавить ручное смещение, но, похоже, это НЕПРАВИЛЬНЫЙ способ поставить позиции x / y в пропорциональном месте

код смещения просто 

...
ev._x = ev.layerX-10;
ev._y = ev.layerY-13;
...

РЕДАКТИРОВАТЬ 2:

В опере курсор является указателем, и по умолчанию его позиция правильная.

В chrome и safari при нажатии (по умолчанию, без возврата false) курсор превращается в текстовый селектор, а позиция находится внизу текстового селектора.

В Firefox курсор является указателем, но позиция находится в центре руки.

  • Какой return false;

    • Safari на mousedown / move курсор остается указателем, но позиция выключена
    • Firefox остается таким же, как и без возврата false
    • Опра все еще выигрывает
    • Chrome курсор остается «курсором мыши», а позиция отключена.

  • со смещением

    • Safari близок к правильному (чуть выше)
    • Firefox чуть выше
    • Опра ВИН
    • Хром правильный

Должен быть лучший способ

PS Я не могу проверить IE, поэтому любые результаты по этому поводу были бы хорошими

Ответы [ 2 ]

2 голосов
/ 21 марта 2011

Координаты указаны относительно страницы, но они строятся относительно холста.

Таким образом, точки смещены на расстояние от верхнего левого угла холста до верхнего левого угластраница.Вы должны исправить это, вычтя значения canvas.offset (). Left и canvas.offset (). Top из координат X и Y.

2 голосов
/ 21 марта 2011

layerX и layerY возвращают смещения относительно всего документа, если только событие не происходит внутри размещенного элемента.Самое простое решение - добавить: 

#beta {
    position: absolute;
}

В качестве альтернативы, вы можете сначала получить позицию canvas в документе и рассчитать смещения относительно этих координат, как описано в предыдущем ответе:

...