Лаб.р №1 "Фабрика Blockly"

ЛАБОРАТОРНАЯ РАБОТА №1

Тема: «Фабрика Blockly»

Выполнила студентка гр.ПО-10а Ждан О.А.

РАБОТА С SVG ФАЙЛАМИ

ИСХОДНЫЙ ТЕКСТ SVG

<svg width="150" height="150" xmlns="http://www.w3.org/2000/svg">



<defs>

<radialGradient spreadMethod="pad" id="svg_36">

<stop offset="0.88934" stop-color="#ffff00"/>

<stop offset="1" stop-color="#0000ff"/>

</radialGradient>

</defs>

<g>

<title>Layer 1</title>

<ellipse id="svg_49" cy="122" cx="143" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#000000"/>



<g id="svg_2">

<ellipse stroke="#000000" ry="23.73472" rx="25.47018" id="svg_35" cy="73.09242" cx="75.86675" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/>

<path stroke="#000000" id="svg_40" d="m65.41934,72.67703c12.46438,-0.68121 7.06309,-14.3085 0.83107,-15.33059c-6.23235,-1.02209 -13.29528,16.01181 -0.83107,15.33059z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffffff"/>

<path stroke="#000000" id="svg_41" d="m83.74874,73.15649c12.46435,-0.68105 7.06291,-14.30817 0.83123,-15.33026c-6.23235,-1.02192 -13.29527,16.01183 -0.83123,15.33026z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffffff"/>

<ellipse stroke="#000000" ry="1.79131" rx="1.2951" id="svg_42" cy="66.37504" cx="62.91581" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#000000"/>

МАСШТАБИРОВАНИЕ (100%, 120%, 160%)

100%

120%

160%

BLOCKLY

JAVA SCRIPT

РЕЗУЛЬТАТ

окружность, заданная центром и радиусом с сплошной заливкой

ЗАГОЛОВОК

Blockly.Language.webgl_a10_headerhtml5 = {

category: 'WebGL1',

helpUrl: 'file:///C:/blockly/demos/webgl/webgl_a10_headerhtml5.help.html',

init: function() {

this.setColour(220);

this.appendStatementInput("NAME")

.appendTitle(new Blockly.FieldImage("../../media/c1.svg", 150, 150))

.appendTitle("Head");

this.setNextStatement(true);

this.setTooltip(''); }};

Blockly.JavaScript.webgl_a10_headerhtml5 = function() {

var statements_name = Blockly.JavaScript.statementToCode(this, 'NAME');

var code = '<html>\n<head>\n<title>' + statements_name.toString() + '</title>\n</head>'

return code;};

БЛОК «TITLE»

Blockly.Language.webgl_a10_title = {

category: 'WebGL1',


init: function() {

this.setColour(58); this.appendDummyInput()

.appendTitle("Title")

.appendTitle(new Blockly.FieldTextInput("Black Circle"), "NAME");

this.setPreviousStatement(true); this.setTooltip(''); }

};

Blockly.JavaScript.webgl_a10_title = function()

{ var text_name = this.getTitleValue('NAME');

var code = text_name.toString(); return code; };

БЛОК «BODY»

Blockly.Language.webgl_a10_body = {

category: 'WebGL1',


init: function() {


this.appendStatementInput("NAME")

.appendTitle("Body");

this.setPreviousStatement(true);


this.setTooltip(''); }

};

Blockly.JavaScript.webgl_a10_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_a10_canvas = {

category: 'WebGL1',


init: function() {


this.appendDummyInput()

.appendTitle("canvas id")

.appendTitle(new Blockly.FieldTextInput("circle"), "NAME");



this.setTooltip('');

}

};

Blockly.JavaScript.webgl_a10_canvas = function() {

var text_name_canvas = this.getTitleValue('NAME');

var code = "<canvas id='" + text_name_canvas.toString() +"' width=\"1000\" height=\"600\" ></canvas>"

БЛОК «DRAW CIRCLE»

Blockly.Language.webgl_a10_drawcircle = {

category: 'WebGL1',


init: function() {



.appendTitle("Draw circle in x=")

.appendTitle(new Blockly.FieldTextInput("200"), "x")

.appendTitle("y =")

.appendTitle(new Blockly.FieldTextInput("200"), "y")

.appendTitle("radius =")

.appendTitle(new Blockly.FieldTextInput("100"), "r");



this.setTooltip(''); }};

Blockly.JavaScript.webgl_a10_drawcircle = function() {

var text_x = this.getTitleValue('x');

var text_y = this.getTitleValue('y');

var text_r = this.getTitleValue('r');

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 = 5;"

code += "\n gl.strokeStyle = 'orange';"

code += "\n gl.fill();"

code += "\n gl.stroke();"

code += "\n}"

code = code + "\n</script>";

return code;

};

БЛОК «EXIT»

Blockly.Language.webgl_a10_exit = {

category: 'WebGL1',


init: function () {


.appendTitle("Exit");


this.setTooltip('')

}

};

Blockly.JavaScript.webgl_a10_exit = function () {

var code = "\n</html>"

return code;

};

СПАСИБО ЗА ВНИМАНИЕ

Лаб.р №1 "Фабрика Blockly"

Technology

Transcript of Лаб.р №1 "Фабрика Blockly"