Лабораторная работа №1 - Фабрика blockly
DESCRIPTION
TRANSCRIPT
Лабораторная работа 1«Фабрика Blockly»ВЫПОЛНИЛА СТУДЕНТКА ГРУППЫ ПОС-10БЛЫСАКОВА НАТАЛЬЯ
Работа с файлами SVG
Исходный код изображения<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg"> <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> <defs> <radialGradient cy="0.28125" cx="0.725281" spreadMethod="pad" id="svg_3"> <stop offset="0.135437" stop-opacity="0.996094" stop-color="#ffffaa"/> <stop offset="0.459656" stop-opacity="0.984375" stop-color="#a37e18"/> <stop offset="1" stop-opacity="0.984375" stop-color="#997106"/> </radialGradient> <radialGradient fy="0.183594" fx="0.811218" r="0.5" cy="0.550781" cx="0.490906" spreadMethod="pad" id="svg_4"> <stop offset="0" stop-opacity="0.996094" stop-color="#ffffaa"/> <stop offset="0.432312" stop-opacity="0.984375" stop-color="#a37e18"/> <stop offset="1" stop-opacity="0.984375" stop-color="#997106"/> </radialGradient> <radialGradient fy="0.183594" fx="0.811218" r="0.5" cy="0.550781" cx="0.490906" spreadMethod="pad" id="svg_5"> <stop offset="0" stop-opacity="0.996094" stop-color="#ffffaa"/> <stop offset="0.865906" stop-opacity="0.984375" stop-color="#a37e18"/> <stop offset="1" stop-opacity="0.984375" stop-color="#997106"/> </radialGradient> <radialGradient fy="0.175781" fx="0.772156" r="0.5" cy="0.550781" cx="0.490906" spreadMethod="reflect" id="svg_8"> <stop offset="0" stop-opacity="0.992188" stop-color="#f9f9e5"/> <stop offset="0.865906" stop-opacity="0.980469" stop-color="#a09986"/> <stop offset="1" stop-opacity="0.980469" stop-color="#068c99"/> </radialGradient> <radialGradient fy="0.457031" fx="0.588562" r="0.5" cy="0.632813" cx="0.463562" spreadMethod="reflect" id="svg_9"> <stop offset="0.029968" stop-opacity="0.992188" stop-color="#f9f9e5"/> <stop offset="0.584656" stop-opacity="0.980469" stop-color="#a09986"/> <stop offset="1" stop-opacity="0.980469" stop-color="#068c99"/> </radialGradient> <radialGradient fy="0.140625" fx="0.862" r="0.5" cy="0.503906" cx="0.553406" spreadMethod="reflect" id="svg_10"> <stop offset="0.029968" stop-opacity="0.992188" stop-color="#f9f9e5"/> <stop offset="0.584656" stop-opacity="0.980469" stop-color="#a09986"/> <stop offset="1" stop-opacity="0.980469" stop-color="#068c99"/> </radialGradient> <radialGradient fy="0.140625" fx="0.862" r="0.5" cy="0.507813" cx="0.545593" spreadMethod="reflect" id="svg_11"> <stop offset="0.029968" stop-opacity="0.992188" stop-color="#f9f9e5"/> <stop offset="0.932312" stop-opacity="0.980469" stop-color="#a09986"/> <stop offset="1" stop-opacity="0.980469" stop-color="#068c99"/> </radialGradient> <radialGradient fy="0.140625" fx="0.862" r="0.5" cy="0.507813" cx="0.545593" spreadMethod="reflect" id="svg_14"> <stop offset="0.029968" stop-opacity="0.988281" stop-color="#f9f9e5"/> <stop offset="0.932312" stop-opacity="0.976563" stop-color="#000000"/> <stop offset="1" stop-opacity="0.976563" stop-color="#c19315"/> </radialGradient> <radialGradient fy="0.394531" fx="0.647156" r="0.5" cy="0.484375" cx="0.545593" spreadMethod="reflect" id="svg_15"> <stop offset="0.029968" stop-opacity="0.988281" stop-color="#f9f9e5"/> <stop offset="0.248718" stop-opacity="0.976563" stop-color="#000000"/> <stop offset="0.444031" stop-opacity="0.976563" stop-color="#c19315"/> </radialGradient> <radialGradient r="0.5" cy="0.484375" cx="0.545593" spreadMethod="reflect" id="svg_16"> <stop offset="0.029968" stop-opacity="0.988281" stop-color="#f9f9e5"/> <stop offset="0.248718" stop-opacity="0.976563" stop-color="#000000"/> <stop offset="0.444031" stop-opacity="0.976563" stop-color="#c19315"/> </radialGradient> <radialGradient r="0.5" cy="0.484375" cx="0.545593" spreadMethod="reflect" id="svg_17"> <stop offset="0.033875" stop-opacity="0.984375" stop-color="#444444"/> <stop offset="0.51825" stop-opacity="0.976563" stop-color="#000000"/> <stop offset="1" stop-opacity="0.976563" stop-color="#c19315"/> </radialGradient> <radialGradient r="0.5" cy="0.484375" cx="0.545593" spreadMethod="reflect" id="svg_18"> <stop offset="0.033875" stop-opacity="0.984375" stop-color="#444444"/> <stop offset="0.975281" stop-opacity="0.976563" stop-color="#000000"/> <stop offset="1" stop-opacity="0.976563" stop-color="#c19315"/> </radialGradient> <radialGradient r="0.5" cy="0.484375" cx="0.545593" spreadMethod="reflect" id="svg_19"> <stop offset="0.033875" stop-opacity="0.984375" stop-color="#444444"/> <stop offset="1" stop-opacity="0.976563" stop-color="#000000"/> <stop offset="1" stop-opacity="0.976563" stop-color="#c19315"/> </radialGradient> </defs> <g> <title>Layer 1</title> <circle id="svg_7" r="26.028895" cy="34.108747" cx="28.907801" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0.3" stroke="#000000" fill="url(#svg_11)"/> <path id="svg_2" d="m8.931442,54.676121c0.354609,-4.846333 1.182033,-16.78487 4.846335,-27.304962c3.664304,-10.520092 9.219857,-21.867613 12.765958,-23.404256c3.546101,-1.536643 6.501183,1.182033 7.919621,5.200946c1.418438,4.018913 5.791962,11.938534 7.919621,19.976358c2.127659,8.037827 8.037827,31.205673 7.971634,31.139481c-0.066193,-0.066193 -7.971634,-12.463356 -11.635933,-14.35461c-3.664299,-1.891254 -29.432626,17.139481 -29.498819,17.073288c-0.066194,-0.066196 -0.288416,-8.326244 -0.288416,-8.326244z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0.3" stroke="#000000" fill="url(#svg_5)"/> <path id="svg_13" d="m25.59811,30.562651c0,0 2.60047,-11.702131 2.534279,-11.76832c-0.066198,-0.0662 1.13002,11.2955 1.13002,11.2955c0,0 5.319141,0.82745 5.252953,0.87944c-0.066181,0.052 -3.834511,2.193838 -3.834511,2.312048c0,0.118202 2.718678,4.84634 2.652489,4.78014c-0.0662,-0.066189 -5.016569,-3.952709 -5.437359,-3.9007c-0.420792,0.052002 -4.898352,3.612289 -4.898352,3.612289c0,0 1.65485,-4.84634 1.588661,-4.912529c-0.066191,-0.066189 -3.952721,-1.706879 -4.018909,-1.65485c-0.066191,0.052031 5.030729,-0.643019 5.030729,-0.643019z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0.3" stroke="#000000" fill="url(#svg_19)"/> </g></svg>
Масштабирование SVG файла
100% 160% 500%
Blockly
<html><head><title> WebGL Test page</title></head><body> <canvas id='canv' width="1000" height="600"> </canvas> <script> if (window.WebGLRenderingContext){ var c = document.getElementById('canv'); var gl = c.getContext('2d'); gl.beginPath(); gl.arc(50, 50, 25, 0, 2 * Math.PI, false); gl.lineWidth = 1; gl.strokeStyle = '#000000'; gl.stroke(); } </script></body></html>
Представление Blockly Сгенерированный код Результат работы
Заголовок
Blockly.Language.webgl_header = { category: 'WebGL', helpUrl: 'help.html#Header',
init: function() { this.setColour(70); this.appendStatementInput("NAME") .appendTitle(new Blockly.FieldImage("../../media/canvas.svg", 48, 48)) .appendTitle("Header"); this.setNextStatement(true); this.setTooltip(''); }};
Blockly.JavaScript.webgl_header = function() { var statements_name = Blockly.JavaScript.statementToCode(this, 'NAME');var code = '<html>\n<head>\n<title>' + statements_name.toString() + '</title>\n</head>' return code;};
Название страницы
Blockly.Language.webgl_title = { category: 'WebGL', helpUrl: 'help.html#Title', init: function() { this.setColour(140); this.appendDummyInput() .appendTitle("Title") .appendTitle(new Blockly.FieldTextInput("WebGL Test page"), "NAME"); this.setPreviousStatement(true); this.setNextStatement(true); this.setTooltip(''); }};
Blockly.JavaScript.webgl_title = function() { var text_name = this.getTitleValue('NAME');var code = text_name.toString(); return code;};
Тело страницы
Blockly.Language.webgl_body = { category: 'WebGL', helpUrl: 'help.html#Body', init: function () { this.setColour(210); this.appendStatementInput("NAME") .appendTitle("Body"); this.setPreviousStatement(true); this.setNextStatement(true); this.setTooltip(''); }};Blockly.JavaScript.webgl_body = function () { var statements_name = Blockly.JavaScript.statementToCode(this, 'NAME'); var code = "\n<body>\n" + statements_name.toString() + "\n</body>" return code;};
Создание canvas
Blockly.Language.webgl_canvas = { category: 'WebGL', helpUrl: 'help.html#Canvas', init: function() { this.setColour(280); this.appendDummyInput() .appendTitle("canvas id") .appendTitle(new Blockly.FieldTextInput("canv"), "NAME"); this.setPreviousStatement(true); this.setNextStatement(true); this.setTooltip(''); }};Blockly.JavaScript.webgl_canvas = function() { var text_name_canvas = this.getTitleValue('NAME');var code = "<canvas id='" + text_name_canvas.toString() +"' width=\"1000\" height=\"600\" ></canvas>" canvas_name = text_name_canvas; return code;};
Рисование круга в заданной позиции с заданным радиусом
Blockly.Language.webgl_drawcircle = { category: 'WebGL', helpUrl: 'help.html#Draw', init: function() { this.setColour(360); this.appendDummyInput() .appendTitle("Draw circle in x=") .appendTitle(new Blockly.FieldTextInput("50"), "x") .appendTitle("y =") .appendTitle(new Blockly.FieldTextInput("50"), "y") .appendTitle("radius =") .appendTitle(new Blockly.FieldTextInput("5"), "r"); this.setPreviousStatement(true); this.setNextStatement(true); this.setTooltip(''); }};
Blockly.JavaScript.webgl_drawcircle = function() { var text_x = this.getTitleValue('x'); var text_y = this.getTitleValue('y'); var text_r = this.getTitleValue('r'); // TODO: Assemble JavaScript into code variable. var code = "\n<script>" code += "\nif (window.WebGLRenderingContext){" code += "\nvar c = document.getElementById('canv');" code += "\n var gl = c.getContext('2d');"
code += "\n gl.beginPath();" code += "\n gl.arc(" + parseInt(text_x) + ", "+parseInt(text_y)+", "+parseInt(text_r)+", 0, 2 * Math.PI, false);" code += "\n gl.lineWidth = 1;" code += "\n gl.strokeStyle = '#000000';" code += "\n gl.stroke();" code += "\n}" code = code + "\n</script>"; return code;};
Конец документа
Blockly.Language.webgl_b09_footerhtml5 = { category: 'WebGL', helpUrl: 'help.html#Footer',
init: function () { this.appendDummyInput() .appendTitle("Footer"); this.setPreviousStatement(true); this.setTooltip('') }};
Blockly.JavaScript.webgl_b09_footerhtml5 = function () { var code = "\n</html>" return code;};
Файл справкиhelp.html
Исходный код лабораторной работыhttps://www.dropbox.com/sh/4gm9k00jg8cdy8u/KvOR6w2A0c
Спасибо за внимание