Advertisement
Advertisement

More Related Content

Advertisement

Лабораторная работа №1

  1. Лабораторная работа №1 по дисциплине «Моделирование и анализ программного обеспечения» «Фабрика Blockly» ВЫПОЛНИЛ СТУДЕНТ ГРУППЫ ПОС-12А ПОТОПАХИН АЛЕКСЕЙ
  2. Изображение SVG
  3. Изображение SVG Исходный текст SVG файла <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> <g> <title>Layer 1</title> <circle id="svg_1" r="223.789032" cy="237.567027" cx="313.884056" stroke-width="4" stroke="#000000" fill="#ffffff"/> <text font-weight="bold" xml:space="preserve" text-anchor="middle" font-family="Fantasy" font-size="76" id="svg_3" y="362.950012" x="313.183334" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">CIRCLE</text> <circle id="svg_4" r="2.632813" cy="240.999995" cx="311.516872" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="4" stroke="#000000" fill="#000000"/> <line id="svg_6" y2="946.383362" x2="1327.450012" y1="1034.383362" x1="1424.450012" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="4" stroke="#000000" fill="none"/> <line id="svg_7" y2="1961.449951" x2="2614.733276" y1="2021.449951" x1="2724.733276" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="4" stroke="#000000" fill="none"/> <line id="svg_8" y2="93.280672" x2="142.531049" y1="239.280672" x1="309.531053" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="4" stroke="#000000" fill="none"/> <line id="svg_9" y2="987.583313" x2="1163.866669" y1="1051.583313" x1="1269.866669" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="4" stroke="#000000" fill="none"/> <line id="svg_10" y2="226.600958" x2="329.000015" y1="240.600958" x1="311.000015" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke="#000000" fill="none"/> <line id="svg_11" y2="1895.5" x2="2418.283325" y1="1953.5" x1="2526.283325" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="4" stroke="#000000" fill="none"/> <line id="svg_13" y2="1016.599976" x2="1632.366638" y1="1016.599976" x1="1580.366638" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke="#000000" fill="none"/> <line id="svg_14" y2="1060.549988" x2="1286.883362" y1="1043.549988" x1="1122.883362" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke="#000000" fill="none"/> <line id="svg_15" y2="226.8" x2="343.801158" y1="226.8" x1="328.801158" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke="#000000" fill="none"/> <line id="svg_16" y2="172.376061" x2="268.776682" y1="186.376062" x1="250.776682" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke="#000000" fill="none"/> <line id="svg_17" y2="172.375885" x2="283.477043" y1="172.375885" x1="268.477043" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke="#000000" fill="none"/> <text id="svg_19" font-weight="bold" xml:space="preserve" text-anchor="middle" font-family="Fantasy" font-size="22" y="234.580564" x="390.294425" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">CENTER</text> <text id="svg_20" font-weight="bold" xml:space="preserve" text-anchor="middle" font-family="Fantasy" font-size="22" y="180.233332" x="327.627764" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">RADIUS</text> </g> </svg>
  4. Blockly Блоки Сгенерированный HTML код <html> <head> <title> Circle Default Title</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(200, 200, 100, 0, 2 * Math.PI, false); gl.lineWidth = 1; gl.strokeStyle = '#000000'; gl.stroke(); } </script> </body> </html> Результат
  5. Blockly Масштабирование 100% 120% 300%
  6. Blockly Header Blockly.Language.webgl_header = { category: 'WebGL', helpUrl: 'webgl_a09_headerhtml5.help.html', init: function() { this.setColour(70); this.appendStatementInput("NAME") .appendTitle(new Blockly.FieldImage("../../media/circle.svg", 64, 48)) .appendTitle("Header"); this.setNextStatement(true); this.setTooltip(''); } }; Blockly.JavaScript.webgl_header = function() { var statements_name = Blockly.JavaScript.statementToCode(this, 'NAME'); var code = '&lt;html&gt;n&lt;head&gt;n&lt;title&gt;' + statements_name.toString() + '&lt;/title&gt;n&lt;/head&gt;' return code; };
  7. Blockly Title Blockly.Language.webgl_title = { category: 'WebGL', helpUrl: 'webgl_a09_headerhtml5.help.html', init: function() { this.setColour(140); this.appendDummyInput() .appendTitle("Title") .appendTitle(new Blockly.FieldTextInput("Circle Default Title"), "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; };
  8. Blockly Body Blockly.Language.webgl_body = { category: 'WebGL', helpUrl: 'webgl_a09_headerhtml5.help.html', 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&lt;body&gt;n" + statements_name.toString() + "n&lt;/body&gt;" return code; };
  9. Blockly Canvas Blockly.Language.webgl_canvas = { category: 'WebGL', helpUrl: 'webgl_a09_headerhtml5.help.html', init: function() { this.setColour(280); this.appendDummyInput() .appendTitle("canvas id") .appendTitle(new Blockly.FieldTextInput("canvas"), "NAME"); this.setPreviousStatement(true); this.setNextStatement(true); this.setTooltip(''); } }; Blockly.JavaScript.webgl_canvas = function() { var text_name_canvas = this.getTitleValue('NAME'); var code = "&lt;canvas id='" + text_name_canvas.toString() +"' width="1000" height="600" &gt;&lt;/canvas&gt;" canvas_name = text_name_canvas; return code; };
  10. Blockly Draw circle Blockly.Language.webgl_drawcircle = { category: 'WebGL', helpUrl: 'webgl_a09_headerhtml5.help.html', init: function() { this.setColour(360); this.appendDummyInput() .appendTitle("Layout x =") .appendTitle(new Blockly.FieldTextInput("200"), "x") .appendTitle("Layout y =") .appendTitle(new Blockly.FieldTextInput("200"), "y") .appendTitle("radius =") .appendTitle(new Blockly.FieldTextInput("100"), "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'); var code = "n&lt;script&gt;" code += "nif(window.WebGLRenderingContext)" code += "n{" code += "n var c = var c = document.getElementById('" + canvas_name + "');"" 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&lt;/script&gt;"; return code; };
  11. Blockly Footer Blockly.Language.webgl_a09_footerhtml5 = { category: 'WebGL', helpUrl: 'webgl_a09_headerhtml5.help.html', init: function () { this.appendDummyInput() .appendTitle("Footer"); this.setPreviousStatement(true); this.setTooltip('') } }; Blockly.JavaScript.webgl_a09_footerhtml5 = function () { var code = "n&lt;/html&gt;" return code; };
  12. Спасибо за внимание!
Advertisement