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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Blockly

Ähnlich wie Blockly (20)

Mehr von JuliaDrozd

Mehr von JuliaDrozd (6)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Blockly