<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

Форум сайта MyRusakov.ru

Интересное о HTML5 Canvas. Первые шаги в использовании Fabric.js
18.11.2013 15:16:01 Интересное о HTML5 Canvas. Первые шаги в использовании Fabric.js Сообщение #1
tikkiwiki

tikkiwiki

Модератор

Модератор

Дата регистрации:
15.11.2013 15:36:59

Сообщений: 194

Здравствуйте уважаемые читатели данного форума!

Сегодня я хочу Вам рассказать об достаточно интересной вещи, такой как тег Canvas. В новой, современной, пятой версии стандарта HTML появились множество новых тегов, которые позволяют вставлять еще больше различного медиа-контента на Ваш сайт. Остановимся на самом интересном из них, как я выше и писал, это тег Canvas. Этот тег создает область, в которой при помощи JS, можно создавать различные объекты, выводить видео/изображения/, создавать различную реалистичную 3D-анимацию и рисовать рисунки.
Синтаксис данного тега очень простой, как впрочем и любой другой в HTML.

<canvas id="идентификатор">
</canvas>

Так же тег имеет всего 2 атрибута, это height и width
К примеру:
<canvas id="myrusakov" width="200" height="200"></canvas>
Эти атрибуты не обязательны, если ширина(width) и высота (height) не заданы, то canvas будет создан с автоматическими параметрами в 300 ширину и 150 пикселей в высоту соответственно. Размер элемента можно задать так же в CSS.

Перейдем к практической части.

Прежде чем начать урок рисования, давайте заготовим минимальный шаблон и назовем его canvas.html
<html>
<head>
<title>myrusakov</title>
<style>
#myrusakov{
border: 2px #000 solid;
}
</style>
</head>
<body>
<canvas height='320' width='480' id='myrusakov'>http://myrusakov.ru/</canvas>
<script>
var myrusakov= document.getElementById("myrusakov";
var ctx = myrusakov.getContext('2d');
</script>
</body>
</html>


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

Приступим к рисованию.

Использовать стандартные методы, довольно глупо и вовсе не стоит, их очень мало и они ужасно не доработанные, поэтому будем использовать готовую библиотеку, библиотека называется Fabric.js. На сегодняшний день, последней версией является 1.3, скачать можно тут:

https://github.com/kangax/fabric.js/downloads

Использовать стандартное API Canvas лишь стоит, если нужно нарисовать несколько простых фигур или графиков, и забыть о них. Другое — интерактивность, изменение картинки в какой-то момент, или рисование более сложных фигур наполненных различной анимацией и прочими красивостями. Подключим данную библиотеку. Предварительно скачав fabric.js-1.3.0 положим его в папку с нашим canvas.html, в файл canvas.html добавим следующее:


<html>
<head>
<title>myrusakov</title>
<style>
#myrusakov {
border: 1px #000 solid;
}
</style>
<meta charset="utf-8"/>
<!-- подключаем скачанный Fabric.js -->
<script src="min.js"></script>
</head>
<body>
<canvas height='320' width='480' id='myrusakov'>http://myrusakov.ru/</canvas>
<script>
// создаем "оболочку" вокруг canvas элемента (id="myrusakov"
var myrusakov = new fabric.Canvas('myrusakov');
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: '#000',
width: 100,
height: 60
});
// добавляем прямоугольник, чтобы он отобразился
myrusakov.add(rect);
</script>
</body>
</html>


Сохраним и проверим, что у нас получилось, а должно получиться вот такое:

http://hkar.ru/m3uh

Рисовать прямоугольник — это конечно легко и не серьезно. Давайте хоть немного усложним задачу и что-то с ним сделаем, например повернем на 70 градусов. Делается это элементарно просто. В параметры мы добавляем новый критерий, это angle(градус).


var rect = new fabric.Rect({
left: 100,
top: 100,
fill: '#000',
width: 100,
height: 60,
angle: 70


Пример того, что получилось:

http://hkar.ru/m3uj

Используя Fabric, всё что надо было сделать, это добавить значение угла с углом наклона 70° градусов. Без использования данной библиотеки, обстояло бы не все так просто. Во первых, мы не можем управлять объектами напрямую. Вместо этого, приходится менять позицию и угол самого битмапа с помощью ctx.translate, ctx.rotate. Потом рисуем прямоугольник, при этом не забывая отодвинуть битмап соответственно (-50, -30), так, чтобы прямоугольник появился на 100,100. Ещё надо не забыть перевести угол из градусов в радианы при повороте битмапа. Очень много сложностей и различных мелочей требует стандартное API. Надеюсь я Вам кратко и понятно изъяснил, зачем используется данная библиотека. Я уже показывал, как можно нарисовать прямоугольник и работать с ним, используя средства Fabric.js, к счастью эта библиотека содержит в себе не только прямоугольник, но и другие геометрические фигуры, такие как круг, квадрат, треугольник, эллипс и т.д.(fabric.Circle, fabric.Triangle, fabric.Ellipse и т.д.)

Попробуем сделать простенькую анимацию.

Анимировать объект можно по такому же принципу и с такой же лёгкостью. Каждый объект в Fabric имеет метод animate (наследуя от fabric.Object) который анимирует этот объект.Первый аргумент это атрибут который хотим менять. Второй аргумент — финальное значение этого атрибута.
После,

myrusakov.add(rect);
Добавим:
rect.animate('angle', 0,{
onChange: myrusakov.renderAll.bind(myrusakov)
});

rect.animate('width', 760,{
onChange: myrusakov.renderAll.bind(myrusakov)
});

rect.animate('height', 480,{
onChange: myrusakov.renderAll.bind(myrusakov)
});


Например если прямоугольник находится под углом 70°, а мы применим значение 0°, то прямоугольник постепенно будет изменять свое значение от 70° до 0°.Ну а последний аргумент — опциональный объект для более детальных настроек (длительность, вызовы и т.д).
Что должно получиться в конечном итоге:


<html>
<head>
<title>myrusakov</title>
<style>
#myrusakov {
border: 1px #000 solid;
}
</style>
<meta charset="utf-8"/>
<!-- подключаем скачанный Fabric.js -->
<script src="min.js"></script>
</head>
<body>
<canvas height='320' width='480' id='myrusakov'>http://myrusakov.ru/</canvas>
<script>
// создаем "оболочку" вокруг canvas элемента (id="myrusakov"
var myrusakov = new fabric.Canvas('myrusakov');
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: '#D5002C',
width: 100,
height: 60,
angle: 70
});
// добавляем прямоугольник, чтобы он отобразился

myrusakov.add(rect);
rect.animate('angle', 0,{
onChange: myrusakov.renderAll.bind(myrusakov)
});

rect.animate('width', 760,{
onChange: myrusakov.renderAll.bind(myrusakov)
});

rect.animate('height', 480,{
onChange: myrusakov.renderAll.bind(myrusakov)
});
</script>
</body>
</html>


Официальная документация Fabric.js http://fabricjs.com/docs/

В следующем уроке, будем рисовать птицу с Angry Birds

Примеры работ сделанных с помощью Canvas:

http://web-master4ree.com/html-a-dhtml/838-10-isklyuchitelnyx-primerov-html5-canvas-i-prilozhenij.html

Надеюсь Вам понравилось, спасибо за внимание!
Профиль Ответить
22.11.2013 17:18:37 Интересное о HTML5 Canvas. Первые шаги в использовании Fabric.js Сообщение #2
KatiaS

KatiaS

Новичок

Новичок

Дата регистрации:
22.11.2013 17:09:11

Сообщений: 1

Очень интересная статья. Написана на доступном и понятном языке.Ничего лишнего, вся информация по-сути. Делать всё шаг за шагом очень легко. Главное, что понятно даже новичку. Спасибо автору!
Профиль Ответить
22.11.2013 23:10:37 Интересное о HTML5 Canvas. Первые шаги в использовании Fabric.js Сообщение #3
Дмитрий184

Дмитрий184

Мастер

Мастер

Дата регистрации:
29.06.2012 08:48:56

Сообщений: 225

Спасибо за статью - интересная информация!
Профиль Ответить