Записи

<table width="300" height="550" align="center" class="colorborder" cellspacing="10" cellpadding="10"><tr><td> 
<svg version="1.1"
 xmlns:svg="http://www.w3.org/2000/svg"
 xmlns="http://www.w3.org/2000/svg"
 width="300" height="550" style="background:#FFF5D7;"
 onload="v44init(evt)"
 onmousemove="v44drag(evt)"
 onmouseup="v44deselect()">
 
 <style>
 .variable{
 font-weight: bold;
 }
 .background{
 fill: none;
 stroke: #444;
 stroke-width: 1;
 stroke-dasharray: 5, 5;
 }
 .control_line{
 stroke: #28f;
 stroke-width: 0.5;
 }
 .point1{
 fill: #28A86B;
 }
 .point2{
 fill: #6495ED;
 }
 .point3{
 fill: #FF7878;
 }
 .point4{
 fill: #8D5FD3;
 }
 #v44example_shape{
 fill: none;
 stroke: #111;
 stroke-width: 0.8;
 }
 .control_point{
 fill: #FFF;
 opacity: 0;
 stroke: #888;
 stroke-width: 2;
 cursor: pointer;
 }
 .control_point:hover{
 opacity: 0.5;
 }
 .invisible{
 pointer-events: none;
 }
 </style>
 
 <script type="text/ecmascript"><![CDATA[
 var v44svgDoc;
 var v44selectedPoint = 0;
 var v44dx = 0;
 var v44dy = 0;
 
 var v44example_shape;
 var v44text_variables;
 var v44controls_lines;
 var v44coords = [0, 0, 10, 350, 150, 350, 290, 350];
 
 var v44xSh = -20;
 var v44stepxSh = 1.0;
 var v44ySh = 30;
 var v44stepySh = 1.0;
 var v44signxSh = 1;
 var v44signySh = 1;
 var v44parX2 = 150;
 var v44parY2 = 330;
 var v44parX1 = 150;
 var v44parY1 = 350;
 
 var v44leftX = 10;
 var v44leftY = 350;
 var v44rightX = 290;
 var v44rightY = 350;
 
 var v44flagRun = false;
 var v44flagPoint = 0;
 var v44tempnum = 1;
 
 var v44myline1X = 30;
 var v44myline2X = 100;
 var v44myline3X = 170;
 var v44myline4X = 240;
 var v44myline5X = -20;
 
 function v44init(evt) {
 if ( window.v44svgDocument == null ) {
 v44svgDoc = evt.target.ownerDocument;
 } 
 v44example_shape = v44svgDoc.getElementById('v44example_shape');
 v44controls_lines = [v44svgDoc.getElementById('v44control_line1'),
 v44svgDoc.getElementById('v44control_line2')] ;
 v44text_variables = [];
 for (var i=1; i<=3; i++){
 v44text_variables.push(v44svgDoc.getElementById('v44variable'+i));
 }
 };
 
 function v44selectElement(evt, point){
 v44selectedPoint = point;
 control_point = evt.target.parentNode;
 v44dx = v44coords[v44selectedPoint*2] - evt.clientX;
 v44dy = v44coords[v44selectedPoint*2 + 1] - evt.clientY;
 };
 
 function v44drag(evt){
 if (v44selectedPoint === 0) { return; }
 
 var x = evt.clientX + v44dx;
 var y = evt.clientY + v44dy;
 v44coords[v44selectedPoint*2] = x;
 v44coords[v44selectedPoint*2 + 1] = y;
 //
 if (v44selectedPoint === 2) {
 document.getElementById('v44myCircle1').setAttributeNS(null, "cx", x);
 document.getElementById('v44myCircle2').setAttributeNS(null, "cx", x);
 document.getElementById('v44myCircle1').setAttributeNS(null, "cy", y);
 document.getElementById('v44myCircle2').setAttributeNS(null, "cy", y);
 //
 v44parX1 = x;
 v44xSh = x;
 v44parY1 = y;
 v44ySh = y;
 document.getElementById('v44myline11').setAttributeNS(null, "x2", x);
 document.getElementById('v44myline11').setAttributeNS(null, "y2", y);
 }
 if (v44selectedPoint === 1) {
 v44leftX = x;
 v44leftY = y;
 v44parX2 = (v44leftX + v44rightX)/2;
 v44parY2 = (v44leftY + v44rightY)/2;
 document.getElementById('v44myline11').setAttributeNS(null, "x1", v44parX2);
 document.getElementById('v44myline11').setAttributeNS(null, "y1", v44parY2);
 document.getElementById('v44myCircle3').setAttributeNS(null, "cx", v44parX2);
 document.getElementById('v44myCircle3').setAttributeNS(null, "cy", v44parY2);
 }
 if (v44selectedPoint === 3) {
 v44rightX = x;
 v44rightY = y;
 v44parX2 = (v44leftX + v44rightX)/2;
 v44parY2 = (v44leftY + v44rightY)/2;
 document.getElementById('v44myline11').setAttributeNS(null, "x1", v44parX2);
 document.getElementById('v44myline11').setAttributeNS(null, "y1", v44parY2);
 document.getElementById('v44myCircle3').setAttributeNS(null, "cx", v44parX2);
 document.getElementById('v44myCircle3').setAttributeNS(null, "cy", v44parY2);
 }
 //
 if (v44selectedPoint % 2 === 0){
 v44controls_lines[0].setAttributeNS(null, "x2", x);
 v44controls_lines[0].setAttributeNS(null, "y2", y);
 v44controls_lines[1].setAttributeNS(null, "x2", x);
 v44controls_lines[1].setAttributeNS(null, "y2", y);
 } else {
 var n = Math.floor(v44selectedPoint/2);
 v44controls_lines[n].setAttributeNS(null, "x1", x);
 v44controls_lines[n].setAttributeNS(null, "y1", y);
 }
 //
 var d = "M";
 for (var i=2; i<v44coords.length; i+=2){
 if (i === 4) { d += "C"; }
 d += " " + eval(v44coords[i]) + " " + eval(v44coords[i+1]);
 if (i === 4) d += " " + eval(v44coords[i]) + " " + eval(v44coords[i+1]);
 }
 v44example_shape.setAttributeNS(null, "d", d);
 control_point.setAttributeNS(null, "transform", "translate(" + x + "," + y + ")");
 v44text_variables[v44selectedPoint-1].firstChild.data = x + "," + y;
 };
 
 function v44deselect(){
 if (v44selectedPoint === 2) v44flagRun = true;
 v44selectedPoint = 0;
 }
 
 var v44timer = setInterval(fAnimv44, 50);
 
 function fAnimv44() {
 //lefttorigth
 v44myline1X += 1; if (v44myline1X > 300) v44myline1X = -40;
 document.getElementById('v44myline1').setAttributeNS(null, "x1", v44myline1X);
 document.getElementById('v44myline1').setAttributeNS(null, "x2", v44myline1X+40);
 v44myline2X += 1; if (v44myline2X > 300) v44myline2X = -40;
 document.getElementById('v44myline2').setAttributeNS(null, "x1", v44myline2X);
 document.getElementById('v44myline2').setAttributeNS(null, "x2", v44myline2X+40);
 v44myline3X += 1; if (v44myline3X > 300) v44myline3X = -40;
 document.getElementById('v44myline3').setAttributeNS(null, "x1", v44myline3X);
 document.getElementById('v44myline3').setAttributeNS(null, "x2", v44myline3X+40);
 v44myline4X += 1; if (v44myline4X > 300) v44myline4X = -40;
 document.getElementById('v44myline4').setAttributeNS(null, "x1", v44myline4X);
 document.getElementById('v44myline4').setAttributeNS(null, "x2", v44myline4X+40);
 v44myline5X += 1; if (v44myline5X > 300) v44myline5X = -40;
 //ballhome
 if (v44flagRun === false) if (v44selectedPoint === 0) {
 v44xSh += 1; if (v44xSh > 300) v44xSh = -40;
 document.getElementById('v44myCircle1').setAttributeNS(null, "cx", v44xSh);
 document.getElementById('v44myCircle2').setAttributeNS(null, "cx", v44xSh);
 }
 //
 if (v44flagRun) {
 if (v44parX2 < v44parX1) {v44signxSh = -1} else {v44signxSh = 1};
 if (v44signxSh > 0) 
 {v44stepxSh = (v44parX2 - v44parX1)/15.0;}
 else
 {v44stepxSh = (v44parX1 - v44parX2)/15.0;}
// 
 v44xSh = v44xSh + v44stepxSh*v44signxSh;
 if (v44xSh > 300) v44xSh = 0;
 if (v44xSh < 0) v44xSh = 300;
//
 if (v44parY2 < v44parY1) {v44signySh = -1} else {v44signySh = 1};
if (v44signySh > 0) 
{v44stepySh = (v44parY2 - v44parY1)/15.0;}
 else
{v44stepySh = (v44parY1 - v44parY2)/15.0;}
//
 v44ySh = v44ySh + v44stepySh*v44signySh;
 if (v44ySh > 500) v44ySh = 0;
 if (v44ySh < 0) v44ySh = 500;
//
 document.getElementById('v44myCircle1').setAttributeNS(null, "cx", v44xSh);
 document.getElementById('v44myCircle2').setAttributeNS(null, "cx", v44xSh);
 document.getElementById('v44myCircle1').setAttributeNS(null, "cy", v44ySh);
 document.getElementById('v44myCircle2').setAttributeNS(null, "cy", v44ySh);
 //
 if (v44ySh < 20) { v44flagRun = false; v44flagPoint = v44flagPoint - 2}
 //
 if (v44ySh > 25) if (v44ySh < 40) {
 if (v44xSh > v44myline1X) if (v44xSh < (v44myline1X+40)) if (v44tempnum === 1) {v44flagPoint = v44flagPoint + 1; v44flagRun = false; v44colorChage();}
 if (v44xSh > v44myline2X) if (v44xSh < (v44myline2X+40)) if (v44tempnum === 2) {v44flagPoint = v44flagPoint + 2; v44flagRun = false; v44colorChage();}
 if (v44xSh > v44myline3X) if (v44xSh < (v44myline3X+40)) if (v44tempnum === 3) {v44flagPoint = v44flagPoint + 3; v44flagRun = false; v44colorChage();}
 if (v44xSh > v44myline4X) if (v44xSh < (v44myline4X+40)) if (v44tempnum === 4) {v44flagPoint = v44flagPoint + 4; v44flagRun = false; v44colorChage();}
 if (v44xSh > v44myline5X) if (v44xSh < (v44myline5X+10)) {v44flagPoint = v44flagPoint + 5; v44flagRun = false; v44colorChage();}
 }
 document.getElementById("v44myPoint1").innerHTML = v44flagPoint; 
 }
}
 function v44getRandomInt(min, max) {
 return Math.floor(Math.random() * (max - min)) + min;
 }
 function v44colorChage() {
 document.getElementById('v44myline1').style.stroke = "#28f";
 document.getElementById('v44myline1').style.strokeWidth = 0.5;
 document.getElementById('v44myline2').style.stroke = "#28f";
 document.getElementById('v44myline2').style.strokeWidth = 0.5;
 document.getElementById('v44myline3').style.stroke = "#28f";
 document.getElementById('v44myline3').style.strokeWidth = 0.5;
 document.getElementById('v44myline4').style.stroke = "#28f";
 document.getElementById('v44myline4').style.strokeWidth = 0.5;
 v44tempnum = v44getRandomInt(1,5);
 document.getElementById('v44myline'+v44tempnum).style.stroke = "#FF7878";
 document.getElementById('v44myline'+v44tempnum).style.strokeWidth = 2;
} 
 ]]> </script>
 
 <g class="invisible">
 <path id="v44example_shape" d="M10 350 C150 350 150 350 290 350 " />
 <line class="control_line" id="v44control_line1" x1="10" y1="350" x2="150" y2="350" />
 <line class="control_line" id="v44control_line2" x1="290" y1="350" x2="150" y2="350" />
 </g>
 
 <g transform="translate(10,350)" >
 <circle class="control_point" cx="0" cy="0" r="10" onmousedown="v44selectElement(evt, 1)" />
 <circle class="point1 invisible" cx="0" cy="0" r="3" />
 </g>

 <g transform="translate(150,350)" >
 <circle class="control_point" cx="0" cy="0" r="10" onmousedown="v44selectElement(evt, 2)" />
 <circle class="point2 invisible" cx="0" cy="0" r="3" id="v44myCircle0"/>
 </g>

 <g transform="translate(290,350)" >
 <circle class="control_point" cx="0" cy="0" r="10" onmousedown="v44selectElement(evt, 3)" />
 <circle class="point3 invisible" cx="0" cy="0" r="3" />
 </g>
 
 <text x="20" y="530">
 <tspan><path</tspan>
 <tspan>d="</tspan><tspan class="point1 variable">M<tspan id="v44variable1">10,350</tspan></tspan>
 Q<tspan class="point2 variable" id="v44variable2">150,350</tspan>
 <tspan class="point3 variable" id="v44variable4">290,350</tspan>
 <tspan>" /></tspan>
 </text>

 <g transform="translate(0,0)" >
 <circle cx="150" cy="30" r="10" style="fill: #FF7878;" id="v44myCircle1" />
 <circle cx="150" cy="30" r="3" style="fill: #7878FF;" id="v44myCircle2" />
 <circle cx="150" cy="330" r="3" style="fill: #FF7878;" id="v44myCircle3" />
 <line class="control_line" id="v44myline11" x1="150" y1="330" x2="150" y2="350" />
 </g>
 
 <g transform="translate(0,0)" >
 <line class="control_line" x1="30" y1="30" x2="70" y2="30" id="v44myline1" />
 <line class="control_line" x1="100" y1="30" x2="140" y2="30" id="v44myline2" />
 <line class="control_line" x1="170" y1="30" x2="210" y2="30" id="v44myline3" />
 <line class="control_line" x1="240" y1="30" x2="280" y2="30" id="v44myline4" />
 </g>
 
 <text x="20" y="130">
 <tspan>point = </tspan><tspan id="v44myPoint1" class="point2 variable">0</tspan>
 </text>
 
</svg>
</td></tr> 
</table>
<script>
v44colorChage();
</script>