Blockly

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

Текст SVG
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="272.069mm" height="272.069mm" style="shape-rendering: geometricprecision;
text-rendering: geometricprecision; image-rendering: optimizequality; fill-rule: evenodd; clip-rule: evenodd;" viewBox="0 0 323.849 323.849"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[ .str0 {stroke:black;stroke-width:0.238063}
.fil0 {fill:black} .fil2 {fill:#050707} .fil3 {fill:#881846} .fil5 {fill:#F6BCD6}
.fil1 {fill:#F9DD56} .fil4 {fill:#FDFCFD} ]]>
</style>
</defs>
<g id="Слой_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<circle class="fil0 str0" cx="161.924" cy="161.924" r="161.805"/>
<circle class="fil1 str0" cx="161.924" cy="161.924" r="147.482"/>
<path class="fil2" d="M41.1231 185.961l11.2944 0c11.2128,165.035 248.978,116.178 199.714,-9.13319l-211.009 0 0 9.13319z"/>
<path class="fil3" d="M245.855 186.206l-183.746 0.00761803c18.239,150.241 213.655,103.188 183.746,-0.00761803z"/>
<path class="fil2" d="M176.274 91.1145c-9.67145,12.3156 -17.8112,31.9374 -8.20855,59.5032l88.5266 0.00904641c6.6797,-20.8385 4.76544,-49.8061 -
13.1171,-65.0256 -20.4293,-17.3884 -50.2177,-16.113 -67.201,5.51331z"/>
<path class="fil2" d="M61.3049 74.1228c-30.8658,9.36887 -32.821,49.8097 -25.828,76.4949l76.4591 -0.0253538c9.50135,-26.5234 3.19541,-52.8569 -
18.8255,-70.8357 -6.6703,-5.44594 -19.8631,-9.25888 -31.8056,-5.63389z"/>
<path class="fil4" d="M174.679 141.485l74.6403 0c3.85627,-12.4786 2.29719,-23.8179 -0.314958,-31.8087 -3.89734,5.07849 -8.56898,6.56305 -
13.8572,7.24356 -9.18104,1.22174 -16.6918,-7.34664 -16.6918,-16.0619l-0.0802274 -0.638962c0.892262,-8.5141 2.27196,-8.68241 8.58362,-14.4781 -
2.43313,-1.62919 -7.62636,-3.14934 -11.6527,-3.14934 -33.8269,-0.655389 -50.2472,37.1994 -40.627,58.8934z"/>
<path class="fil5" d="M223.198 259.785c-24.2854,-42.2926 -86.9859,-30.941 -95.5997,17.2331 29.3895,11.0651 72.2306,3.97411 95.5997,-17.2331z"/>
<path class="fil4" d="M42.7205 141.485l62.7519 0.011189c1.04998,-8.97392 3.43502,-21.1116 -1.02403,-30.8752 -10.9271,12.4113 -30.2794,6.33511 -
30.2341,-11.6527 0,-8.09106 4.33299,-9.77524 9.13319,-14.1722 -34.6656,-15.646 -48.7633,30.4311 -40.627,56.6889z"/>
</g>
</svg>

Масштабирование блока

• <HTML>
• <head>
• <title>default_title</title>
• </head>
• <body>
• <canvas id="canv1" width="500" height="500"></canvas>
• <script>
• var ctx = document.getElementById('canv1').getContext('2d');
• ctx.fillStyle = "red";
• ctx.save();
• ctx.beginPath();
• ctx.translate(100,200);
• ctx.scale(50/100, 1);
• ctx.arc(0, 0, 100, 0, Math.PI * 2, true);
• ctx.restore();
• ctx.closePath();
• ctx.fill();
• </script>
• </body>
• </HTML>

• Blockly.Language.webgl_html = {
• category: 'WebGL',
• init: function() {
• this.setColour(120);
• this.appendDummyInput()
• .appendTitle(new Blockly.FieldImage("../webgl/Awesome.svg", 45, 45))
• .appendTitle("HTML");
• .appendTitle("title")
• .appendTitle(new Blockly.FieldTextInput("default_title"), "title");
• this.appendStatementInput("body_content")
• .appendTitle("body");
• this.setTooltip('');
• }
• };
• Blockly.JavaScript.webgl_html = function() {
• var statements_body_content = Blockly.JavaScript.statementToCode(this, 'body_content');
• var text_title = this.getTitleValue('title');
• // TODO: Assemble JavaScript into code variable.
• var code = '<HTML>n';
• code += '<head>n';
• code +='<title>'+text_title.toString()+'</title>n';
• code +='</head>n';
• code += '<body>n';
• code += statements_body_content.toString()+'</body>n'+'</HTML>n'
• return code;
• };

• Blockly.Language.webgl_canvas = {
• .appendTitle("canvas id=")
• .appendTitle(new Blockly.FieldTextInput("canv1"), "canv")
• .appendTitle("width")
• .appendTitle(new Blockly.FieldTextInput("500"), "w")
• .appendTitle("height")
• .appendTitle(new Blockly.FieldTextInput("500"), "h");
• this.setPreviousStatement(true);
• this.setNextStatement(true);
• }
• };
• Blockly.JavaScript.webgl_canvas = function() {
• var text_canv = this.getTitleValue('canv');
• var text_w = this.getTitleValue('w');
• var text_h = this.getTitleValue('h');
• var code = '<canvas id="'+text_canv+'" width="' + text_w + '" height="' + text_h + '"></canvas>n';
• return code;
• };

• Blockly.Language.webgl_script = {
•
• this.appendStatementInput("script_content")
• .appendTitle("script");
• }
• };
• Blockly.JavaScript.webgl_script = function() {
• var statements_script_content =
Blockly.JavaScript.statementToCode(this, 'script_content');
• var code = '<script>n';
• code += statements_script_content.toString()+'n</script>n'
• return code;
• };

•
• Blockly.Language.webgl_webgl_a08_headerhtml5 = {
• helpUrl: 'http://www.example.com/',
•
• .appendTitle("Draw ellipse with canvas id=")
• .appendTitle(new Blockly.FieldTextInput("canv1"), "canv_id")
• .appendTitle("Center x")
• .appendTitle(new Blockly.FieldTextInput("100"), "x")
• .appendTitle("Center y")
• .appendTitle(new Blockly.FieldTextInput("200"), "y")
• .appendTitle("width")
• .appendTitle(new Blockly.FieldTextInput("50"), "w")
• .appendTitle("height")
• .appendTitle(new Blockly.FieldTextInput("100"), "h");
• }};
• Blockly.JavaScript.webgl_webgl_a08_headerhtml5 = function() {
• var text_canv_id = this.getTitleValue('canv_id');
• var text_x = this.getTitleValue('x');
• var text_y = this.getTitleValue('y');
• var text_w = this.getTitleValue('w');
• var text_h = this.getTitleValue('h');
• var code="var ctx = document.getElementById('"+ text_canv_id + "').getContext('2d');n"
• code += 'ctx.fillStyle = "red";n';
• code += 'ctx.save();n';
• code += 'ctx.beginPath();n';
• code += 'ctx.translate('+ text_x+',' + text_y+');n';
• code += 'ctx.scale('+text_w + '/'+ text_h+', 1);n';
• code += 'ctx.arc(0, 0, '+text_h+', 0, Math.PI * 2, true);n';
• code += 'ctx.restore();n';
• code += 'ctx.closePath();n';
• code += 'ctx.fill();n';
• return code;
• };

Blockly

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (7)

Blockly