Лаб.р №1 "Фабрика blockly"
Post on 21-Sep-2014
170 views
DESCRIPTION
TRANSCRIPT
ЛАБОРАТОРНАЯ РАБОТА №1
Тема: «Фабрика Blockly»
Выполнила студентка гр.ПО-10а Ждан О.А.
РАБОТА С SVG ФАЙЛАМИ
ИСХОДНЫЙ ТЕКСТ SVG
<svg width="150" height="150" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<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"/>
<ellipse id="svg_51" cy="117" cx="145" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#000000"/>
<ellipse id="svg_52" cy="112" cx="150" 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"/>
<ellipse stroke="#000000" ry="1.79131" rx="2.59019" id="svg_47" cy="68.16635" cx="79.75204" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#000000"/>
<path stroke="#000000" id="svg_81" d="m87.20033,81.19391c-5.62318,21.46277 -29.00807,-0.6335 -29.13638,-0.88571c-0.12814,-0.25169 6.0537,-0.0338 6.0537,-0.0338c0,0 8.0322,-0.32235 8.0322,-0.32235c0,0 7.22279,1.071 7.22279,1.071c0,0 7.8277,0.17086 7.8277,0.17086l0,0l0,0l0,0l0,0l0,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffaaff"/>
<ellipse stroke="#000000" transform="matrix(0.649995 -0.589524 0.568294 0.674278 -126.278 160.987)" ry="21.24893" rx="4.52088" id="svg_1" cy="13.40373" cx="240.90374" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/>
<ellipse stroke="#000000" id="svg_3" transform="matrix(0.640728 0.600342 -0.578723 0.664664 -65.9188 54.8063)" ry="21.24893" rx="4.52088" cy="-156.94768" cx="134.10366" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/>
<ellipse stroke="#000000" id="svg_4" transform="matrix(0.859851 0.0810885 -0.0781685 0.891972 -114.697 118.104)" ry="21.24893" rx="4.52088" cy="-128.74471" cx="209.41837" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/>
<ellipse stroke="#000000" id="svg_5" transform="matrix(0.675886 -0.557314 0.537242 0.701136 -164.921 222.136)" ry="21.24893" rx="4.52088" cy="103.71442" cx="319.16451" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/>
<ellipse stroke="#000000" id="svg_6" transform="matrix(0.171868 -0.877726 0.846116 0.178288 -104.087 332.57)" ry="21.24893" rx="4.52088" cy="207.31363" cx="315.28582" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/>
<ellipse stroke="#000000" id="svg_7" transform="matrix(0.700367 0.523779 -0.504917 0.72653 -40.2983 119.852)" ry="21.24893" rx="4.52088" cy="-58.54258" cx="77.42886" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/>
<ellipse stroke="#000000" id="svg_8" transform="matrix(0.863192 -0.019466 0.0187651 0.895439 -119.725 127.172)" ry="21.24893" rx="4.52088" cy="5.51025" cx="224.97126" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/>
<ellipse stroke="#000000" id="svg_9" transform="matrix(-0.114109 0.887794 -0.855821 -0.118372 -30.1633 171.006)" ry="21.24893" rx="4.52088" cy="-42.35508" cx="-131.06859" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/>
<ellipse stroke="#000000" id="svg_10" transform="matrix(-0.147245 -0.882529 0.850746 -0.152745 -23.2136 335.377)" ry="21.24893" rx="4.52088" cy="225.83336" cx="271.303" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/>
<ellipse stroke="#000000" id="svg_11" transform="matrix(0.353638 0.817073 -0.78765 0.366851 -17.048 157.724)" ry="21.24893" rx="4.52088" cy="-71.35177" cx="-46.33057" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/>
</g>
</g>
</svg>
МАСШТАБИРОВАНИЕ (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',
helpUrl: 'file:///C:/blockly/demos/webgl/webgl_a10_headerhtml5.help.html',
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',
helpUrl: 'file:///C:/blockly/demos/webgl/webgl_a10_headerhtml5.help.html',
init: function() {
this.setColour(150);
this.appendStatementInput("NAME")
.appendTitle("Body");
this.setPreviousStatement(true);
this.setNextStatement(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',
helpUrl: 'file:///C:/blockly/demos/webgl/webgl_a10_headerhtml5.help.html',
init: function() {
this.setColour(280);
this.appendDummyInput()
.appendTitle("canvas id")
.appendTitle(new Blockly.FieldTextInput("circle"), "NAME");
this.setPreviousStatement(true);
this.setNextStatement(true);
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',
helpUrl: 'file:///C:/blockly/demos/webgl/webgl_a10_headerhtml5.help.html',
init: function() {
this.setColour(350);
this.appendDummyInput()
.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.setPreviousStatement(true);
this.setNextStatement(true);
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',
helpUrl: 'file:///C:/blockly/demos/webgl/webgl_a10_headerhtml5.help.html',
init: function () {
this.appendDummyInput()
.appendTitle("Exit");
this.setPreviousStatement(true);
this.setTooltip('')
}
};
Blockly.JavaScript.webgl_a10_exit = function () {
var code = "\n</html>"
return code;
};
СПАСИБО ЗА ВНИМАНИЕ