Программный код, представленный в примере 22.5, призван решить единствен_ ную задачу – нарисовать гистограмму. Однако средствами CSS можно рисовать
и более сложные диаграммы, например деревья, как показано на рис. 22.2, при условии, что они будут состоять из прямоугольников, а также горизонтальных
и вертикальных линий.
В примере 22.6 приводится определение класса CSSDrawing, предоставляющего простой прикладной интерфейс для рисования прямоугольников и линий, а в при_ мере 22.7 – код, который использует класс CSSDrawing для воссоздания диаграм_ мы, представленной на рис. 22.2.
Пример 22.6. Класс CSSDrawing
/**
* Данная функция_конструктор создает элемент div, в котором средствами CSS
* может быть нарисована фигура. С помощью методов экземпляра можно рисовать
* линии и прямоугольники и вставлять полученные фигуры в документ.
*
* При вызове конструктора можно использовать две различные сигнатуры:
*
* new CSSDrawing(x, y, width, height, classname, id)
*
* В данном случае элемент <div> создается со стилем position:absolute
* в указанных координатах и с заданными размерами.
*
* Конструктор может также вызываться только с аргументами width и height:
*
* new CSSDrawing(width, height, classname, id)
*
* В этом случае элемент <div> создается с заданными шириной и высотой
* и со стилем position:relative (это необходимо, чтобы дочерние элементы,
* изображающие линии и прямоугольники, могли иметь абсолютное
* позиционирование).
*
* В обоих случаях аргументы classname и id являются необязательными.
* Если они определены, их значения используются в качестве
22.2. Графика и CSS
* значений атрибутов class и id созданного элемента <div> и могут
* использоваться, чтобы связать CSS_стили с фигурой.
*/
function CSSDrawing(/* переменное число аргументов */) {
// Создать и запомнить элемент <div>, предназначенный для рисования var d = this.div = document.createElement("div");
var next;
// Выяснить количество числовых аргументов _ четыре или два,
// это размеры и координаты элемента div соответственно
/** Вставляет рисунок в документ, замещая указанный элемент */ CSSDrawing.prototype.replace = function(elt) {
if (typeof elt == "string") elt = document.getElementById(elt); elt.parentNode.replaceChild(this.div, elt);
}
22.2. Графика и CSS
Конструктор CSSDrawing() создает новый объект CSSDrawing, который представля_ ет собой всего лишь обертку элемента <div>. Методы экземпляра box(), vertical()
и horizontal() рисуют средствами CSS прямоугольники, вертикальные линии
и горизонтальные линии соответственно. Каждый метод позволяет определить координаты и размеры прямоугольника или линии, а также значения атрибутов class и id создаваемого элемента прямоугольника или линии. Атрибуты class или id могут использоваться для связи рисуемых элементов со стилями CSS, опреде_ ляющими цвет, толщину линий и тому подобное. Чтобы сделать объект CSSDraw_ ing видимым, недостаточно создать его. Нужно еще вставить его в документ с по_ мощью метода insert() или replace().
В примере 22.7 демонстрируется порядок использования класса CSSDrawing. Обе части примера – и JavaScript_код в методе drawFigure(), и таблица стилей CSS – играют важную роль в создании рисунка. В программном коде определяются ко_ ординаты и размеры прямоугольников и линий, а в таблице стилей – цвет и тол_ щина линий. Обратите внимание, насколько тесно связаны между собой сцена_ рий JavaScript и таблицы стилей CSS: программный код метода drawFigure() дол_ жен учитывать толщину рамки и ширину отступов, заданных в таблице стилей. Это можно отнести к недостаткам прикладного интерфейса рисования, опреде_ ляемого классом CSSDrawing.
Пример 22.7. Рисование диаграммы с помощью класса CSSDrawing
<!DOCTYPE HTML PUBLIC "_//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!__ Без этого объявления DOCTYPE рисунок в IE получится неправильным __> <html>
<head>
<script src="CSSDrawing.js"></script> <!__ Подключить определение класса __> <style>
/* Стили для прямоугольника самого рисунка */
.figure { border: solid black 2px; background_color: #eee;} /* Стили для линий сетки */
.grid { border: dotted black 1px; opacity: .1; } /* Стили для прямоугольников на рисунке */
