View
1.389
Download
2
Category
Preview:
DESCRIPTION
Дисциплина "Моделирование и анализ программного обеспечения"
Citation preview
Фабрика Blockly
Гудаев О.А.
2013
2
Операторные схемы теоретическая основа Blockly
Лавров С.С. Программирование. Математические основы, средства, теория. – СПб: БХВ-Петербург, 2001. – 320 с.
3
4
5
6
7
8
9
Тестовое задание
• Использовать фабрику конструирования блоков Blockly для описания WebGL-сцены и документа в формате HTML5.
• Реализовать функции 2D-анимации средствами технологии Canvas в виде блоков Blockly.
10
Подготовка файлов1. Создайте папку «webgl» в корне каталога demos;
2. В папке «webgl» создайте файл в имени которого содержится буква учебной группы и номер по журналу: “webgl.<буква><номер по журналу>.js”. Буква строчная, а имя номера с 1 по 9 имеют ведущий ноль. Например, “webgl.a01.js”, “webgl.a05.js”, “webgl.a09.js”, “webgl.a17.js”;
3. Все создаваемые Вами функции описания блоков должны иметь префикс “webgl_<буква><номер>_<имя функции>”. Например, “webgl_a17_headerhtml5”;
4. В терминологии технологии Blockly примеры имен функций:
Blockly.Language.webgl_a17_headerhtml5
Blockly.JavaScript.webgl_a17_headerhtml5 = function()
11
Подключение файла с блоками webgl
В папке «demos\code» размещается файл «frame.html».
В файле «frame.html» после строчки:<script type="text/javascript" src="../../language/common/procedures.js"></script>
Добавьте строчку с подключением Вашего файла блоков «webgl»: <script type="text/javascript" src="../webgl/webgl.a17.js"></script>
12
Пример создания блока Введём JavaScript-код в тестовый файл «webgl.a17.js»:'use strict';
if (!Blockly.Language) Blockly.Language = {};
Blockly.Language.webgl_a17_headerhtml5 = { category: 'WebGL', helpUrl: 'file://localhost/C:/blockly/demos/webgl/ webgl_a17_headerhtml5.help.html',
init: function() { this.appendValueInput("VALUE") .appendTitle("Header HTML5 document. Tag <HTML>"); }};
Blockly.JavaScript.webgl_a17_headerhtml5 = function() { var code = '<HTML>' return code;};
13
Откройте в браузере файл «demos\code\index.html». В результате получим новую категорию «WebGL».
14
Генерация кода
Важно заметить, что генератор кода из строчкиcode = '<HTML>‘ сделает тег <HTML>
15
Справка о блоке
16
Справочный файл о блоке «headerhtml5» file://localhost/C:/blockly/demos/webgl/
webgl_a17_headerhtml5.help.html
17
SVG-редактор
18
Свойства документа
19
Размер изображения 64 х 48
20
Текстовый формат файла SVG
21
Подключаем SVG-файлизображение, текст. Имеем
прозрачный фон
this.appendValueInput("VALUE")// .appendTitle("Header HTML5 document. Tag <HTML>");
.appendTitle(new Blockly.FieldImage("../../media/canvas.svg", 64, 48));
22
Результат
23
Масштаб 120%
24
Масштаб 140%
25
Спасибо за внимание
Recommended