Как получить координаты (x, y, w, h) визуализированного элемента canvas? - PullRequest
Новая
       14

Как получить координаты (x, y, w, h) визуализированного элемента canvas?

1 голос
/ 23 марта 2009

Как я могу получить координаты визуализированного элемента canvas? Мне нужно, чтобы они применили clearRect, fillRect и т. Д. К своей области.

Я получаю холст: 

//html
<div><canvas id="canvas_id">some useless text..</canvas></div>

//javascript   
var ctx = document.getElementById('canvas_id').getContext('2d');

Тогда? есть способ получить верхний левый x, верхний левый y, ширину и высоту этого?

@ обновить после ответа луны :

спасибо за ответ, я знаю, что операции относятся к холсту, но я задал вопрос, потому что я не объясняю это поведение: я сделал тестовый файл с объектом холста (http://avastreg.ilbello.com/canvas/test.html).

Здесь я поместил форму, в которой размеры для clearRect могут быть отправлены через форму. Когда вы запускаете указатель мыши на холсте (NEWS), он применяет clearRect с этими координатами. При наведении мышки он пополняет.

Начальное значение:

x = 0, y = 0, w = 200, h = 200. Обратите внимание, что это не работает.

Тогда попробуйте что-то вроде

x: -10000, y: -10000, w: 50000000, h: 50000000 => это кажется шуткой, но это работает!

С другими значениями он частично очищается. Почему это происходит?

1 Ответ

3 голосов
/ 23 марта 2009

Ширина и высота холста указаны в его offsetWidth и offsetHeight.

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

var canvasTop = 0;
var canvasLeft = 0;
var c = document.getElementById('canvas_id');
while( c && ( c != document.body ) )
{
  canvasTop += c.offsetTop;
  canvasLeft += c.offsetLeft;
  c = c.offsetParent;
}

В общем, quirksmode.org имеет большой список того, как называются эти свойства и какие браузеры поддерживают какие.

Имейте в виду, что координаты для операций с графическим контекстом, такими как fillRect, clearRect и т. Д., По умолчанию относятся к холсту, а не ко всему документу, поэтому вам не нужно добавлять холст сверху и слева от координат, которые вы хотите нарисовать.

...