SVG/VML Графика и JavaScript


Здесь я опишу одну интересную библиотеку для создания графики при помощи JavaScript.
Называется она Raphaël

Примеры работы:
  • Отражение картинки
  • Вращение картинки
  • Построение графика

    Что такое Raphael?

    Raphael – Это маленькая JavaScript библиотека, которая упрощает работу с графикой в вэбе, при помощи JavaScript. Допустим вы хотите создать свою специфическую диаграмму, или небольшой виджет, позволяющий обрезать или вращать картинку – вы все это можете с легкостью сделать при помощи этой библиотеки.

    Raphaël использует SVG и VML как основу для создания графики. Так как каждый созданный объект является объектом DOM, вы можете модифицировать элементы при помощи JavaScript, и использовать обработчики событий JavaScript для каждого элемента. Цель библиотеки Raphaël – позволять легко и кросс-браузерно создавать графику.

    В настоящий момент библиотека поддерживает браузеры Firefox 3.0+, Safari 3.0+, Opera 9.5+ и Internet Explorer 6.0+.

    Как использовать Raphael?

    Просто скачайте и подгрузите на страницу скрипт raphael.js, далее просто используйте ее:
    // Creates canvas 320 × 200 at 10, 50
    var paper = Raphael(10, 50, 320, 200);
    // Creates circle at x = 50, y = 40, with radius 10
    var circle = paper.circle(50, 40, 10);
    // Sets the fill attribute of the circle to red (#f00)
    circle.attr("fill", "#f00");
    // Sets the stroke attribute of the circle to white (#fff)
    circle.attr("stroke", "#fff");
    

    Описание методов

    Каждый метод возвращает объект-обертку для SVG/VML элемента - массив Element, для последующего доступа к этому элементу посредством JavaScript.

    Raphael

    Метод создает холст для будущего рисования на нем

    Параметры
    1. Контейнер HTMLElement или строка
    2. width number
    3. height number

    ИЛИ
    1. x number
    2. y number
    3. width number
    4. height number

    Использование
    // Creates canvas 320 × 200 at 10, 50
    var paper = Raphael(10, 50, 320, 200);
    var paper = Raphael(document.getElementById("notepad"), 320, 200);
    var paper = Raphael("notepad", 320, 200);
    

    Element[0]

    Является ссылкой для DOM объект, что дает возможность определять для него обработчики событий и получать/изменять свойства объекта

    Использование
    var c = paper.circle(10, 10, 10);
    c[0].onclick = function () { c.attr("fill", "red"); };
    

    Element.rotate

    Поворачивает объект на заданный угол относительно центра

    Параметры
    degree number

    Использование
    var c = paper.circle(10, 10, 10);
    c.rotate(45);
    

    Element.translate

    Перемещает объект по холсту

    Параметры
    dx number
    dy number

    Использование
    var c = paper.circle(10, 10, 10);
    c.translate(10, 10);
    

    Element.matrix

    Позволяет трансформировать объект путем наложение матрицы на свойства объекта (матричное преобразование)

    Параметры
    xx number
    xy number
    yx number
    yy number
    dx number
    dy number

    Использование
    var c = paper.circle(10, 10, 10);
    // reflects circle down
    c.matrix(1, 0, 0, -1, 0, 0);
    

    Element.scale

    Увеличивает объект в заданное количество раз (по ширине и высоте отдельно). Если коэффициенты увеличения меньше 1, то происходит уменьшение объекта

    Параметры
    Xtimes number
    Ytimes number

    Использование
    var c = paper.circle(10, 10, 10);
    c.scale(1.5, 1.5);
    

    Element.attr

    Устанавливает атрибуты элемента

    Параметры
    params object

    ИЛИ

    attribute string
    value string

    Возможные Параметры
    cx
    cy
    dasharray
    fill-opacity
    fill
    font-family
    font-size
    font-weight
    font
    gradient
    height
    joinstyle
    opacity
    r
    rx
    ry
    stroke-opacity
    stroke-width
    stroke
    width
    x
    y

    Использование
    var c = paper.circle(10, 10, 10);
    c.attr("fill", "black");
    c.attr({fill: "#000", stroke: "#f00", opacity: 0.5});
    

    Element.getBBox

    Возвращает размеры элемента

    Параметры
    n/a

    Использование
    var c = paper.circle(10, 10, 10);
    var width = c.getBBox().width;
    

    Element.toFront

    Передвигает слой, в котором находится элемент, на первую позицию (используется для исключения перекрытия объекта другим объектом)

    Параметры
    n/a

    Использование
    var c = paper.circle(10, 10, 10);
    c.toFront();
    

    circle

    Создает объект круг (рисует круг)

    Параметры
    x number
    y number
    r number

    Использование
    var c = paper.circle(10, 10, 10);
    

    rect

    Создает прямоугольник

    Параметры
    x number
    y number
    width number
    height number
    r number [optional]

    Использование
    // regular rectangle
    var c = paper.rect(10, 10, 10, 10);
    // rounded rectangle
    var c = paper.rect(10, 10, 100, 50, 10);
    

    ellipse

    Создает эллипс.

    Параметры
    x number
    y number
    rx number
    ry number

    Использование
    var c = paper.ellipse(100, 100, 30, 40);
    

    path

    Инициализирует рисование ломаной линии (пути, или мультилинии). По умолчанию возвращает пустой объект ломаной линии. Для рисования ломаной используйте встроенные методы объекта, такие как lineTo и curveTo.

    Параметры
    params object Похож на объект для метода attr
    pathString string [optional] – Путь в формате SVG. Воспользуйтесь документацией SVG.

    Использование
    var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);
    

    absolutely

    Устанавливает флаг позиционирования всех следующих объектов абсолютно, т.е. каждый в отдельном слое, пока не будет сказано обратное – при помощи relatively. (Sets trigger to count all following units as absolute ones, unless said otherwise)
    [По умолчанию установлен]

    Использование
    var c = paper.path({stroke: "#036"}).absolutely()
        .moveTo(10, 10).lineTo(50, 50);
    

    relatively

    Устанавливает флаг позиционирования всех следующих объектов относительно, т.е. каждый следующий объект в том же слое, пока не будет сказано обратное – при помощи absolutely. (Sets trigger to count all following units as relative ones, unless said otherwise)

    Использование
    var c = paper.path({stroke: "#036"}).relatively()
        .moveTo(10, 10).lineTo(50, 50);
    

    redraw

    Перерисовывает мультилинию. Следует использовать когда точки(вершины) были изменены. Это возможно потеем доступа к свойствам объекта path (мультилинии)

    Использование
    c.path[3].arg[2] = 20;
    c.redraw();
    

    moveTo

    Переносит перо в указанные координаты

    Параметры
    x number
    y number

    Использование
    var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);
    

    lineTo

    Рисует линию с точки нахождения пера в указанные координаты

    Параметры
    x number
    y number

    Использование
    var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);
    

    cplineTo

    Рисует линию с точки нахождения пера до указанных координат. Линия будет иметь горизонтальные привязки на старте и окончании.

    Параметры
    x number
    y number
    width number

    Использование
    var c = paper.path({stroke: "#036"}).moveTo(10, 10).cplineTo(50, 50);
    

    curveTo

    Рисует кривую от точки нахождения пера до указанных координат.

    Параметры
    x1 number
    y1 number
    x2 number
    y2 number
    x3 number
    y3 number

    Использование
    var c = paper.path({stroke: "#036"}).moveTo(10, 10)
        .curveTo(10, 15, 45, 45, 50, 50);
    

    addRoundedCorner

    Рисует четверть круга с текущей точки нахождения пера. Используется для рисования закругленных краев

    Параметры
    r number
    dir string – Направление (2 буквы)
    Возможные значения для dir:
    lu - left up
    ld - left down
    ru - right up
    rd - right down
    ur - up right
    ul - up left
    dr - down right
    dl - down left

    Использование
    var c = paper.path({stroke: "#036"}).moveTo(10, 10)
        .addRoundedCorner(10, "rd");
    

    andClose

    Закрывает мультилинию.

    Использование
    var c = paper.path({stroke: "#036"}).moveTo(10, 10).andClose();
    

    image

    Вставляет картинку в SVG/VML область

    Параметры
    src string
    x number
    y number
    width number
    height number

    Использование
    var c = paper.image("apple.png", 10, 10, 100, 100);
    

    group

    Создает группу. Может быть полезным, если вы хотите сгруппировать объекты в слоях, итд.

    Использование
    var c = paper.group();
    
  • SAPE все усложнил?

    MainLink - простая и прибыльная продажа ссылок!

    Последние поступления:

    Стишки пирожки про Олега⁠⁠

    Размещена 20 июня 2024 года

    Олег купил презервативы
    Проник в семидесятый год
    И подарил их папе с мамой
    Такой нелепый суицид

    читать далее…

    Размещена 10 августа 2020 года

    Я по ТВ видел, что через 10 лет мы будем жить лучше, чем в Германии...
    Я не понял, что это они с Германией сделать хотят?!

    читать далее…

    ТехЗадание на Землю

    Размещена 14 марта 2018 года

    Пpоект Genesis (из коpпоpативной пеpеписки)

    читать далее…

    Шпаргалка по работе с Vim

    Размещена 05 декабря 2017 года

    Vim довольно мощный редактор, но работа с ним не всегда наглядна.
    Например если нужно отредактировать какой-то файл например при помощи crontab, без знания специфики работы с viv никак.

    читать далее…

    Ошибка: Error: Cannot find a valid baseurl for repo

    Размещена 13 сентабря 2017 года

    Если возникает ошибка на centos 5 вида
    YumRepo Error: All mirror URLs are not using ftp, http[s] or file.
    Eg. Invalid release/

    читать далее…