More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Blockly
Similar to Blockly (20)
More from JuliaDrozd
Recently uploaded
Recently uploaded (20)
Blockly
- 1. Лабораторная работа № 1 на тему «Фабрика Blockly» Выполнила студентка группы ПОС-10А Дрозд Юлия
- 2. Страница Blockly.Language.webgl_a09_html = { category: 'WebGL', helpUrl: 'http://www.example.com/', init: function() { this.setColour(330); this.appendValueInput("HTML") .setAlign(Blockly.ALIGN_CENTRE) .appendTitle("HTML"); this.appendStatementInput("HTML"); this.setPreviousStatement(true); this.setNextStatement(true); this.setTooltip(''); this.appendValueInput("VALUE") .appendTitle(new Blockly.FieldImage("../../media/html.svg", 64, 48)); } }; Blockly.JavaScript.webgl_a09_html = function() { var value_html = Blockly.JavaScript.valueToCode(this, 'HTML', Blockly.JavaScript.ORDER_ATOMIC); var statements_html = Blockly.JavaScript.statementToCode(this, 'HTML'); var code = '<html>'/* + value_html + '< html>' */ return code; };
- 3. Тело Blockly.Language.webgl_a09_body = { category: 'WebGL', helpUrl: 'file://localhost/C:/blockly/demos/webgl/webgl_a09_headerhtml5.help.html', init: function () { this.setColour(65); this.appendStatementInput("BODY") .appendTitle("Body"); this.appendStatementInput("NAME"); this.appendStatementInput("NAME"); this.appendDummyInput() .appendTitle("canvas id=") .appendTitle(new Blockly.FieldTextInput("canv"), "canv") this.setPreviousStatement(true); this.setNextStatement(true); this.setTooltip(''); } }; Blockly.JavaScript.webgl_a09_body = function() { var statements_body = Blockly.JavaScript.statementToCode(this, 'BODY'); var statements_name = Blockly.JavaScript.statementToCode(this, 'NAME'); var statements_name = Blockly.JavaScript.statementToCode(this, 'NAME'); var code = '<body><"'+statements_body+'"></body>n'; return code; };
- 4. Blockly.Language.webgl_a09_header = { category: 'WebGL', helpUrl: 'file://localhost/C:/blockly/demos/webgl/webgl_a09_headerhtml5.help.html', init: function() { this.setColour(65); this.appendStatementInput("HEADER") .appendTitle("Header"); this.setOutput(true); this.setTooltip(''); } }; Blockly.JavaScript.webgl_a09_header = function() { var statements_header = Blockly.JavaScript.statementToCode(this, 'HEADER'); // TODO: Assemble JavaScript into code variable. var code = 'n<header>n' + value_header + 'n</header>' // TODO: Change ORDER_NONE to the correct strength. return [code, Blockly.JavaScript.ORDER_NONE]; }; Голова
- 5. Заголовок Blockly.Language.webgl_a09_title = { category: 'WebGL', helpUrl: 'file://localhost/C:/blockly/demos/webgl/webgl_a09_headerhtml5.help.html', init: function() { this.setColour(160); this.appendDummyInput() .appendTitle("title") .appendTitle(new Blockly.FieldTextInput("Blockly"), "NAME"); this.setPreviousStatement(true); this.setNextStatement(true); //this.appendValueInput("TITLE") // .appendTitle("Title"); // this.setOutput(true); this.setTooltip(''); } }; Blockly.JavaScript.webgl_a09_title = function() { var value_title = Blockly.JavaScript.valueToCode(this, 'TITLE', Blockly.JavaScript.ORDER_ATOMIC); // TODO: Assemble JavaScript into code variable. //var code = 'n<title>n;' + statements_title + 'n</title>' var code = "'<title>'" + value_title.toString() +"'< Blockly ></canvas>" //return [code, Blockly.JavaScript.ORDER_NONE]; return code; };
- 6. Blockly.Language.a09_img = { category: 'WebGL', helpUrl: 'file://localhost/C:/blockly/demos/webgl/webgl_a09_headerhtml5.help.html', init: function() { this.setColour(280); this.appendDummyInput() .appendTitle("img") .appendTitle(new Blockly.FieldTextInput("canvas"), "NAME"); this.setPreviousStatement(true); this.setNextStatement(true); this.setTooltip(''); } }; Blockly.JavaScript.a09_canvas = function() { var text_name_canvas = this.getTitleValue('NAME'); var code = "<canvas id='" + text_name_canvas.toString() +"' width="120" height="120" ></canvas>" canvas_name = text_name_canvas; return code; }; Canvas
- 7. Отрисовкакруга Blockly.Language.webgl_a09_circle = { category: 'WebGL_2d', helpUrl: '../webgl/webgl_a08_headerhtml5.help.html', init: function() { this.setColour(350); this.appendDummyInput() .appendTitle(new Blockly.FieldImage("../../media/html1.svg", 64, 48)) .appendTitle("Set coordinates A(x,y)& radius of the round:"); this.appendValueInput("x") .setCheck(Number) .setAlign(Blockly.ALIGN_RIGHT) .appendTitle("x"); this.appendValueInput("y") .setCheck(Number) .setAlign(Blockly.ALIGN_RIGHT) .appendTitle("y"); this.appendValueInput("r") .setCheck(Number) .setAlign(Blockly.ALIGN_RIGHT) .appendTitle("radius"); this.setPreviousStatement(true); this.setNextStatement(true); this.setTooltip(''); } }; Blockly.JavaScript.webgl_a09_circle = function() { var value_canv_id = Blockly.JavaScript.valueToCode(this, 'canv_id', Blockly.Java Script.ORDER_ATOMIC); var value_x = Blockly.JavaScript.valueToCode(this, 'x', Blockly.JavaScript. ORDER_ATOMIC); var value_y = Blockly.JavaScript.valueToCode(this, 'y', Blockly.JavaScript. ORDER_ATOMIC); var value_w = Blockly.JavaScript.valueToCode(this, 'radius', Blockly.JavaSc ript.ORDER_ATOMIC); // TODO: Assemble JavaScript into code variable. var code="var ctx = document.getElementById("+ value_canv_id + ").getContext('2d');n" code += 'ctx.save();n'; code += 'ctx.beginPath();n'; code += 'ctx.translate('+ value_x+',' + value_y+');n'; code += 'ctx.scale('+value_w +', 1);n'; code += "n gl.arc(" + parseInt(text_x) + ", "+parseInt(text_y)+", "+parseInt(text_radius)+", 0, 2 * Math.PI, false);"; code += 'ctx.restore();n'; code += 'ctx.closePath();n'; code += 'ctx.fill();n'; return code; };
- 8. html> <head> <title> Blockly</title> </head> <body> <canvas id ='canvas' width="1000" height=“800"> </canvas> <script> if (window.WebGLRenderingContext){ var c = document.getElementById('canvas'); var gl = c.getContext('2d'); gl.beginPath(); gl.arc(75,75, 37, 0, 2 * Math.PI, false); gl.lineWidth = 1; gl.strokeStyle = '#FFFFFF'; gl.stroke(); } </script> </body> JavaScriptкодпрограммы иеерезультат
- 10. ИсходныйтекстSVG-файла <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> <g> <title>Layer 1</title> <image xlink:href="images/logo.png" opacity="0.5" id="svg_1" height="0" width="0" y="279" x="422"/> <image xlink:href="images/logo.png" opacity="0.5" id="svg_2" height="0" width="0" y="305" x="450"/> <polyline id="svg_3" points="630,301 " opacity="0.5" stroke-linecap="round" stroke-width="5" stroke="#000000" fill="none"/> <polyline id="svg_4" points="612,296 " opacity="0.5" stroke-linecap="round" stroke-width="5" stroke="#000000" fill="none"/> <polyline id="svg_6" points="637,303 " opacity="0.5" stroke-linecap="round" stroke-width="5" stroke="#000000" fill="none"/> <polyline id="svg_7" points="684,348 " opacity="0.5" stroke-linecap="round" stroke-width="5" stroke="#000000" fill="none"/> <line id="svg_9" y2="242" x2="394" y1="242" x1="394" opacity="0.5" stroke-width="5" stroke="#000000" fill="none"/> <polyline id="svg_36" points="625,301 " opacity="0.5" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/> <polyline id="svg_37" points="650,269 " opacity="0.5" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/> <ellipse stroke="#000000" ry="32" rx="35" id="svg_54" cy="61" cx="61" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#7f007f"/> <rect stroke="#000000" id="svg_63" height="41" width="44" y="41" x="39" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/> <ellipse stroke="#000000" ry="16" rx="17" id="svg_64" cy="62" cx="61" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#7f007f"/> <path stroke="#000000" id="svg_66" d="m58.93317,57.45358c-36.4599,27.56387 23.01157,5.06276 12.85065,0.56253c-10.16098,-4.50021 -2.09198,4.78149 -13.74719,14.62572" stroke-linecap="round" stroke- linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/> <path transform="rotate(-128.608 103.024 53.9096)" id="svg_69" d="m106.69904,45.42442c27.60645,12.37745 -13.16621,19.80392 -13.16621,19.80392c0,0 -14.44026,-32.18137 13.16621,-19.80392z" stroke- linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00" stroke="#000000"/> <path transform="rotate(-83.13 102.338 84.342)" id="svg_70" d="m105.51985,74.63885c23.89774,14.15408 -11.39735,22.64655 -11.39735,22.64655c0,0 -12.50031,-36.80064 11.39735,-22.64655z" stroke- linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00" stroke="#000000"/> <path stroke="#000000" transform="rotate(-49.8739 78 103)" id="svg_71" d="m81.56476,94.13998c26.77625,12.92422 -12.77014,20.67876 -12.77014,20.67876c0,0 -14.00601,-33.60297 12.77014,-20.67876z" stroke- linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/> <path stroke="#000000" transform="rotate(-12.1443 48 103.5)" id="svg_72" d="m51.33182,94.45209c25.02625,13.19833 -11.93561,21.11731 -11.93561,21.11731c0,0 -13.09064,-34.31563 11.93561,-21.11731z" stroke- linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/> <path stroke="#000000" transform="rotate(59.3227 16.5 64.5)" id="svg_73" d="m19.88998,57.05505c25.46347,10.86002 -12.1441,17.37604 -12.1441,17.37604c0,0 -13.31931,-28.23602 12.1441,-17.37604z" stroke- linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/> <path stroke="#000000" transform="rotate(7.12499 25.5 89)" id="svg_74" d="m28.36844,80.64304c21.54562,12.19043 -10.2756,19.50465 -10.2756,19.50465c0,0 -11.27005,-31.69504 10.2756,-19.50465z" stroke- linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/> <path stroke="#000000" transform="rotate(88.1524 22 38)" id="svg_79" d="m25.13297,29.83795c23.5329,11.90613 -11.22336,19.0498 -11.22336,19.0498c0,0 -12.30951,-30.95595 11.22336,-19.0498z" stroke- linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/> <path stroke="#000000" id="svg_80" transform="rotate(151.221 63.9286 17.1252)" d="m66.61398,8.423c20.17049,12.69402 -9.61975,20.31042 -9.61975,20.31042c0,0 -10.55069,-33.00444 9.61975,-20.31042z" stroke- linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/> <path id="svg_81" transform="rotate(-170.073 92.9287 26.1252)" d="m96.8252,16.2766c29.2678,14.3662 -13.9586,22.986 -13.9586,22.986c0,0 -15.3091,-37.35224 13.9586,-22.986z" stroke-linecap="round" stroke- linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00" stroke="#000000"/> <path stroke="#000000" id="svg_83" transform="rotate(138.983 41.9287 22.6252)" d="m44.97488,13.80811c22.88126,12.86157 -10.91257,20.57852 -10.91257,20.57852c0,0 -11.96866,-33.44011 10.91257,-20.57852z" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/> </g> </svg>