Blockly

Лабораторная работа № 1
на тему «Фабрика Blockly»
Выполнила студентка группы ПОС-10А
Дрозд Юлия

Страница
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;
};

Тело
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")
}
};
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>&lt"'+statements_body+'"></body>n';
return code;
};

Blockly.Language.webgl_a09_header = {
category: 'WebGL',
helpUrl:
init: function() {
this.setColour(65);
this.appendStatementInput("HEADER")
.appendTitle("Header");
this.setOutput(true);
}
};
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];
};
Голова

Заголовок
Blockly.Language.webgl_a09_title = {
category: 'WebGL',
helpUrl: 'file://localhost/C:/blockly/demos/webgl/webgl_a09_headerhtml5.help.html',
init: function() {
.appendTitle("title")
.appendTitle(new Blockly.FieldTextInput("Blockly"), "NAME");
//this.appendValueInput("TITLE")
// .appendTitle("Title");
// this.setOutput(true);
}
};
Blockly.JavaScript.webgl_a09_title = function() {
var value_title = Blockly.JavaScript.valueToCode(this, 'TITLE', Blockly.JavaScript.ORDER_ATOMIC);
//var code = 'n<title&gtn;' + statements_title + 'n</title>'
var code = "'<title&gt'" + value_title.toString() +"'&lt Blockly ></canvas>"
//return [code, Blockly.JavaScript.ORDER_NONE];
return code;
};

Blockly.Language.a09_img = {
category: 'WebGL',
helpUrl:
init: function() {
.appendTitle("img")
.appendTitle(new Blockly.FieldTextInput("canvas"), "NAME");
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

Отрисовкакруга
Blockly.Language.webgl_a09_circle = {
category: 'WebGL_2d',
helpUrl: '../webgl/webgl_a08_headerhtml5.help.html',
init: function() {
.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)
.appendTitle("y");
this.appendValueInput("r")
.setCheck(Number)
.appendTitle("radius");
}
};
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);
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;
};

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кодпрограммы
иеерезультат

Блок-представление
программы

ИсходныйтекстSVG-файла
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<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"/>
<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-
<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-
<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-
<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-
<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-
<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>

ИзображениеSVG-файла

МасштабированиеSVG-
файла
100% 175% 250%

Спасибо за внимание!

Blockly

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Blockly (9)

More from JuliaDrozd (6)

Recently uploaded (20)

Blockly