HTML5 Canvas: рисовать матрицу с фиксированной первой строкой и первым столбцом - PullRequest
0 голосов
/ 24 февраля 2012

Я использую холст HTML5 в своем приложении для визуализации большой матрицы (1000 * 1000) ячеек, которые либо заполнены, либо нет.

Однако мне не удается зафиксировать первый столбец и первую строку, покапозволяют прокручивать остальную часть матрицы.Вот изображение того, чего я хотел бы достичь:

http://i.stack.imgur.com/24kIV.png

Прокрутка может быть либо полосой прокрутки CSS / браузера, либо прокруткой на основе javascript_

Любые подсказкио том, как сохранить первую строку и столбец фиксированными?

Обновление: При прокрутке влево / вправо должна прокручиваться и первая строка, также как и при прокрутке вверх / вниз и по первому столбцу.

1 Ответ

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

Вы можете создать макет с тремя div с, каждый из которых содержит холст, и прокрутить фиксированный элемент при прокрутке основного элемента: http://jsfiddle.net/SjBE5/.

document.getElementById("maindiv").onscroll = ​​​​function() {
    document.getElementById("topdiv").scrollLeft = this.scrollLeft;
    document.getElementById("leftdiv").scrollTop = this.scrollTop;
};​
...