<MyRusakov.ru />

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

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

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Что такое SVG? Основы.

Что такое SVG? Основы.

Поздравляю всех с Днём Победы! А сегодня я пишу первую статью из серии, в которой мы узнаем, что такое SVG и как его использовать.

SVG(Scalable Vector Graphic) - это язык для описания двумерной графики, основанный на XML. Данная технология постепенно набирает обороты, а связано это вот с чем:

  • При изменении масштаба svg фигуры всегда перерисовываются, благодаря чему вы всегда будете видеть гладкое и красивое изображение без пикселизации
  • Браузеру не нужно запрашивать картинку у сервера, т.к. он сам её рисует, следовательно, производительность повышается
  • Можно стилизовать объекты с помощью CSS, как обычные html элементы, или с помощью JavaScript
  • Можно редактировать или анимировать с помощью CSS и JavaScript
  • Меньший размер

Итак, зачем он нужен и почему лучше обычного изображения, думаю, вы уже поняли, а теперь перейдём к тому, как его использовать.

Для начала стоит отметить, что все наши фигуры должны быть в теге svg, а теперь давайте нарисуем линию. Для отображения линии служит тег line, который имеет следующие атрибуты:

  • x1 - Начальная x координата
  • x2 - Конечная x координата
  • y1 - Начальная y координата
  • y2 - Конечная y координата
  • stroke-width - Ширина линии
  • stroke - Цвет линии
<svg>
  <line x1="10" y1="10" x2="170" y2="170" stroke-width="1" stroke="#0f0">
</svg>

Линия на SVG

Но что, если нам нужно нарисовать сразу несколько линий? Использовать несколько тегов line было бы не очень красиво. Для этого существует тег polyline.

<svg>
  <polyline points="10,10 50,10 100,100 10, 100 10, 10" stroke-width="1" stroke="rgb(0,0,0)" fill="rgba(100,170,10,.3)">
</svg>

Трапеция на SVG

У тега polyline есть атрибут points, где мы указываем координаты x и y через запятую, затем делаем пробел и пишем координаты следующей точки и так далее. Заметьте, что тут есть атрибут fill, в котором мы можем указать цвет в любом из форматов css, которым будет залито пространство между линиями. Если же вы хотите, чтобы пространство между линиями было пустым, то укажите значение none.

Перейдём к более сложным фигурам и нарисуем прямоугольник.

<svg>   <rect width="300" height="100" fill="green" stroke-width="1" stroke="#000"> </svg>

Прямоугольник на SVG

Для того, чтобы нарисовать прямоугольник, нужно использовать тег rect, где в атрибутах width и height указать ширину и высоту соотвественно, а остальные атрибуты вам уже знакомы и выполняют абсолютно те же функции, что и с линиями.

Переходим дальше и попробуем нарисовать круг

<svg>
  <circle cx="100" cy="75" r="70" fill="rgba(10,70,10, .7)">
</svg>

Круг на SVG

Для отрисовки круга служит тег circle и атрибуты cx, cy и r для задания координат центра круга и его радиуса.

Другой элемент - эллипс рисуется точно так же, как и круг, но там мы можем сами задавать радиусы по оси x и по оси y. Для его отрисовки служит тег ellipse

<svg>
  <ellipse cx="100" cy="75" rx="50" ry="30" fill="rgba(10,70,10, .7)">
</svg>

Эллипс на SVG

Если вам нужно выводить многогранные фигуры, такие как пятиугольник, то воспользуйтесь тегом polygon

<svg>
  <polygon points="50,50 100,100 150,100 100,50 150," fill="#ccc" stroke-width="1" stroke="rgb(0,0,0)">
</svg>

Параллелограмм на SVG

Атрибут points у тега polygon работает так же, как и атрибут points у тега polyline.

Если объект очень сложный, то вы можете воспользоваться любым редактором векторной графики и нарисовать его там, а затем просто вставить вот таким образом

<object data="myimage.svg" type="image/svg+xml"></object>

SVG поддерживается IE c 9 версии, Mozilla Firefox с 1.5, Google Chrome с 3.0 и оперой с 8.0.

На этом статья подошла к концу. Получилась она большой, но простой. В следующей мы продолжим изучать эту интересную технологию, а на этом всё. Удачи!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (5):

kjuby kjuby 10.05.2014 00:29:09

...интересно но не совсем понятно ...

Ответить

php_programmer php_programmer 10.05.2014 00:46:42

Что именно Вам непонятно? Вы можете задать вопрос, относящийся к этой статье, здесь.

Ответить

татьяна татьяна 27.06.2015 15:03:26

странно. я делаю табличную страницу. рисую линию над текстом в столбце. в итоге ПОД линией образуется огромное лишнее пространство сантиметра в четыре????

Ответить

php_programmer php_programmer 27.06.2015 18:36:09

Если Вы хотите, чтобы Вам помогли, то залейте код на http://jsfiddle.net/

Ответить

tryk tryk 20.07.2015 17:38:51

Михаил,вопрос не по теме. Как в notepad ++ вставить код после определённого кода Например: есть код xxx и он повторяется сразу в нескольких местах Допустим мне нужно после каждого кода xxx вставить код ууу.Понимаю,что вручную можно проставить.Но можно ли не вручную?

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.