Регистрация | Войти
Lisp — программируемый язык программирования

Введение

Данная библиотека предоставляет полного доступа к каждому уголку функциональности SVG формата. Для этого лучше бы вам использовать полноценную библиотеку для работы с XML. Моя цель сделать библиотеку легкой без обеспечения экзотической функциональности. Предоставлены все фигуры и элементы группировки.

Библиотека нацелена на создание читабельного XML. Это увеличивает размер результата, особенно при глубокой вложенности элементов. Форматирование зависит от корректности реализации ~< директивы для format.

Для большей информации смотрите спецификацию SVG версии 1.1. К тому же W3 Schools содержит неплохой туториал.

Обработка атрибутов

Библиотека также делает некоторые дополнительные проверки атрибутов. Когда элемент SVG фигуры не содержит определенных атрибутов, просмоторщики просто игнорируют элемент. Чаще всего я хочу знать, в чем проблема. Однако, бывают ситуации, когда, например, пропущенный атрибут мог быть унаследован от родительских элементов FIXME. Макрос WITHOUT-ATTRIBUTE-CHECK позволяет вам указать библиотеке не делать проверку атрибутов.

Авторы SVG спецификации были не в состоянии сделать выбор между lisp стилем именования и camelCase'ом. Эта библиотека отлично принимает атрибуты вида :marker-units и преобразует из в markerUnits. Так как SVG стандарт слегка намешан, преобразование осуществляется с помощью таблицы. Если я забыл какой-нибудь атрибут, вы можете пользоваться строками.

Наконец, в SVG стандарте можно ссылаться на другие объекты. Это обычно выглядит как ссылка на свойство элемента id. Поиск элементов по другим свойствам требует javascript'а. Если в элементе используется :id :generate результатом свойства id будет случайная строка, которую вы можете получить с помощью generic функции xlink-href. Смотрите gradient или symbol примеры для шаблонов использования.

Пакет

Имя пакета cl-svg с одним синонимом :svg.

Библиотека не имеет зависимостей

Условия и перезапуски

condition missing-attributes

Генерируется, когда необходимый для элемента атрибут пропущен. Если вы уверены, что не нуждаетесь в данном атрибуте, вы можете выключить проверку макросом WITHOUT-ATTRIBUTE-CHECKCHECK.

Перезапусков нет.

SVG Toplevel and Utilities

Класс svg-toplevel (не доступен напрямую) хранит шаблон XML и предоставляет XML контейнер для графических и других элементов.

function make-svg-toplevel class &rest attributes => svg-toplevel object

Создает корневой SVG контейнер. Первый аргумент - это закавыченный класс отображающий версию SVG. Сейчас доступно только одно значение: svg-1.1-toplevel (версия 1.2 мая 2008 года еще в разработке). Атрибуты - это пары keyword/value, в данном случае необходимо задать :height и :width. Пространства имен xmlns и xmlns:xlink имеют значения по умолчанию. Свойство id устанавливается в "toplevel", если вы не зададите что-то другое.

(let ((scene (make-svg-toplevel 'svg-1.1-toplevel :height 300 :width 300)))
  (draw scene (:rect :x 5 :y 5 :height 30 :width 30))
...
macro with-svg-to-file (svg &rest svg-attributes) (filename &rest open-options) &body body

Для удобства оборачивает создание SVG сцены и создание файла. open-options будут переданы в WITH-OPEN-FILE, кроме этого макросом уже установлено :direction :output.

(with-svg-to-file
    (scene 'svg-1.1-toplevel :height 20 :width 20)
    (#p"pale-blue-dot.svg" :if-exists :supersede)
  (draw scene (:circle :cx 10 :cy 10 :r 5) :fill "cyan")
)

generic function add-element svg-element string

Если вам необходимо добавить вручную составленные XML строки в любой SVG элемент, верхнего уровня или другого, используйте эту функцию.

generic function add-stylesheet svg-toplevel stylesheet-url

Добавляет URL таблицы стилей XML в SVG файл. CSS может также быть добавлен "по месту" с помощью функции style.

generic function add-namespace svg-toplevel prefix namespace-url

Добавляет XML пространство имен в SVG файл. Префикс будет иметь автоматически добавленный "xmlns:" FIXME

(add-namespace "clsvggui" "http://www.lingweenie.org/lisp/cl-svg-gui")

превратится в

xmlns:clsvggui="http://www.lingweenie.org/lisp/cl-svg-gui"

generic function xlink-href svg-element => url-string

Возвращает свойство id из любого элемента и генерирует XML URL ссылку на него, например, url(#radialGradientOne).

generic function stream-out stream svg-element

Посылает XML содержимое SVG элемента в выходной поток.

Рисование фигур

Синтаксис макроса для рисования фигур создан для того чтобы выделить свойства присущие для фигур. Это можно считать артефактом, так как XML сторона не имеет аналогичного специального синтаксиса.

macro draw canvas (:SHAPE { required properties }) {other properties} => svg-element object

Добавляет новую фигуру на канву. keyword'ы для фигур идентичны именам SVG фигур:

Фигура Необходимые параметры
:line :x1 :y1 :x2 :y2
:rect :x :y :height :width
:polyline :points
:polygon :points
:ellipse :cx :cy :rx :ry
:circle :cx :cy :r
:path :d
:use :xlink-href
:image :x :y :height :width :xlink-href

Если необходимые атрибуты пропущены будет сгенерировано условие missing-attribute, если, конечно, не был использован макрос WITHOUT-ATTRIBUTE-CHECK.

Смотрите Paths для, того чтобы читабельно описать path FIXME.

macro without-attribute-check body

Отключает необходимую проверку наличия атрибутов во всех командах рисования в body.

Определение элементов

Элементы, которые не будут показаны, но на которые ссылаются другие элементы, должны быть указаны в SVG элементе <defs>. Это не требование стандарта, но вежливая просьба. Однако, эта библиотека располагать кучу групп элементов в элементе <defs>.

На эти элементы будут ссылаться другие элементы с помощью свойства :xlink-href. В рамках этой библиотеки свойство :xlink-href будет доступно с помощью вызова generic функции xlink-href FIXME. Смотрите примеры ниже.

Все функции и макросы, что делают группы элементов, которые содержат элементы фигур (например, не цветовые градиенты или текстовые элементы) доступны через удобный макрос:

macro draw* (:SHAPE { required properties }) {other properties} => svg-element object

То же, что и draw, за исключением того, что вам не надо указывает канву. Элемент фигуры будет помещен в группу. Будет сгенерирована ошибка, если вы попытаетесь вызвать его вне макроса определения группы.

Есть четыре элемента для группировки, которые данная библиотека помещает в элемент <defs>. Каждый должен содержать свойство :id.

macro make-svg-symbol scene (&rest attributes) &body shapes => svg-element

Создает SVG symbol, коллекцию фигур и групп, которые могут быть использованы с помощью <use> в главном теле SVG.

(let* ((scene (make-svg-toplevel 'svg-1.1-toplevel :height 700 :width 700))
       ;;; draw a nice picture
      (columns (make-svg-symbol scene (:id :generate :view-box "0 0 20 20")
                  (draw* (:rect :x 5 :y 5 :height 10 :width 3) :opacity 1.0)
                  (draw* (:rect :x 10 :y 5 :height 10 :width 3) :opacity 0.7)
                  (draw* (:rect :x 15 :y 5 :height 10 :width 3) :opacity 0.3)
)
)
)

  ;;; Next, instantiate like mad.
 (dotimes (i 400)
    (let ((size (+ 5 (random 95))))
      (draw scene (:use :xlink-href (xlink-href columns))
            :x (- (random 750) 25)
            :y (- (random 700) 25)
            :height size :width size
            :stroke "rgb(232, 229, 148)"
            :stroke-width 0.3
            :fill "purple"
)
)
)

  (title scene "SVG test: using symbols")
  ...
macro make-marker scene (&rest attributes) &body shapes => svg-element

Создает маркеры для линии.

macro make-pattern scene (&rest attributes) &body shapes => svg-element

Создает шаблоны заливок.

macro make-mask scene (&rest attributes) &body shapes => svg-element

Создает альфа-маски.

Градиентные заливки

Элементы градиентных заливок также вставляются в элемент <defs>, но не предоставляеют макрос draw*, который не имеет здесь смысла. Тело обоих определений градиента должно содержать вызовы для "цветовых барьеров" FIXME.

macro make-linear-gradient scene (&rest attributes) &body color-stops => svg-element

Создает элементы линейного градиенты. Должны быть определены следующие атрибуты: :id, :x1, :y2, :x2 и :y2.

macro make-radial-gradient scene (&rest attributes) &body color-stops => svg-element

Создает элемент радиального градиенты. Должны быть определены следующие атрибуты: :id, :cx, :cy и :r.

macro stop &key color offset (opacity 1.0)

Создает "цветовой барьер" для радиальных градиентов. Может быть использовано только в макросах, что создают градиенты.

Вот пример использования линейного градиента:

(let* ((scene (make-svg-toplevel 'svg-1.1-toplevel :height 700 :width 700))
       (lg1 (make-linear-gradient scene (:id :generate
                                         :x1 "0%" :y1 "0%" :x2 "100%" :y2 "100%"
)

            (stop :color "black" :offset "0%")
            (stop :color "purple" :offset "50%")
            (stop :color "red" :offset "100%")
)
)
)

  (title scene "SVG test: gradients")
  (draw scene (:rect :x 10 :y 10 :height 200 :width 200)
        :fill (xlink-href lg1)
)

Другие элементы группировок

Данные группировочные элементы вставляются в SVG в порядке, в котором они определены.

macro make-group scene (&rest attributes) &body shapes => svg-element

Создает SVG <g> группу. Это полезно использовать для группировки фигур, которые могут управляться, как одна группа.

macro make-foreign-object scene (&rest attributes) => svg-element

Вставляет не-SVG XML конетент в SVG файл. Посмотрите SVG спецификацию для использования, для понимания вопросов пространства имен.

macro link scene (&rest attributes) &body shapes => svg-element

Делает элементы, обозначенные внутри, кликабельными. Атрибут :xlink-href должен быть установлен в URL, по которому будет осуществлять переход.

macro text scene (&rest attributes) &body elements => svg-element

Вставляет текст в SVG документ. Элементы должны быть или текстовыми строками или вызовами к tspan FIXME.

macro tspan scene (&rest attributes) text => svg-element

Используется для добавления изменений стилей в часть текста в текстовом элементе. Например:

(let* ((scene (make-svg-toplevel 'svg-1.1-toplevel :height 40 :width 250)))
  (draw scene (:rect :x 0 :y 0 :height 40 :width 250) :fill "#CCCCCC")
  (text scene (:x 25 :y 25)
    "Mouse over a "
    (tspan (:fill "orange" :font-weight "bold") "circle")
)

  (draw scene (:circle :cx 200 :cy 20 :r 10) :fill "blue")
  (with-open-file (s #p"test.svg" :direction :output :if-exists :supersede)
    (stream-out s scene)
)
)

Выполнится в: Изображение

Модификаторы элементов

Любая фигура эли группа элементов, включая корневой элемент SVG, могуут быть модифицированы с помощью следующих функций:

function title scene text

Добавляет элементу заголовок. Заголовок корневого SVG элемента обычно отображается в загловке браузера.

function desc scene text

Добавляет SVG desc ("description") элемент к элементу.

function comment scene text

Добавляет XML комментарий в элемент.

function script scene script

Добавляет Javascript, обернутный в CDATA.

function script-link scene script-url

Добавляет ссылку на внешний сценарий.

function style scene css

Добавляет в элемент внутренный CSS.

В SVG геометрические преобразования кумулятивны: вы можете поместить их в атрибут transform в большом количестве, и они будут применены, как задумывалось.

macro transform (transformations) element => svg-element

Добавляет транфирмации в атрибут transform. Одна транформация имеет короткую запись:

(transform (scale 33)
  (draw scene (:rect ...))
)

Но:

(transform ((scale 33))
  (draw scene (:rect ...))
)

(transform ((rotate 90 15 15) (scale 1.36) (skew-x 30))
  (draw scene (:rect ...))
)

Функции транформации:

function scale sx &optional sy

Масштабирует изображение. Если sy не задано, оно принимает значение sx.

function translate tx &optional ty

Перемещение. Если ty не задано, оно принимает значение tx.

function rotate angle &optional (cx 0) (cy 0)

Поворачивает изображение на angle градусов относительно точки cx, cy. По умолчанию поворот осуществляется относительно начала координат текущей системы, что не частно вами будет использоваться. Вы должны рассчитать центр фигуры самостоятельно.

function skew-x angle

Наклоняет относительно оси X на angle градусов.

function skew-y angle

Наклоняет относительно оси Y на angle градусов.

function matrix a b c d e f

Переворачивает вашу матрицу транформаций. Смотрите 7.4 "Определение матрицы преобразования."

@2009-2013 lisper.ru