★ Рубрика: Кодинг
Единичная окружность на SVG и JavaScript

Пример анимации, приведенный ниже будет полезен школьникам и учителям для понимания (демонстрации) единичной окружности и угловых величин в радианах и углах. Но, пример будет полезен и программистам, изучающим JavaScript, а также может использоваться как иллюстрация возможностей анимации с помощью SVG-графики. Перемещайте красную точку мышкой по графику.
Ниже приведен полный код примера:
<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="640" height="500" 
 onload="Init( evt )" >

<script type="text/ecmascript">
//<![CDATA[

var svgXLink = "http://www.w3.org/1999/xlink";
var svgNS = "http://www.w3.org/2000/svg";
var svgRoot;
var mouseP, newP, circP;
var bmousedown=0;
var bxygrid=1;
var bprgrid=0;
var bhide=0;
var bsnap=1;
var xyradio, polradio, hideradio, sradio, nsradio;
var grid, grid2, polargrid;
var costext, sintext, degtext, radtext;
var sinline, cosline, radline;

function Init(){
 svgRoot = document.documentElement;
 mouseP = svgRoot.createSVGPoint();
 newP = svgRoot.createSVGPoint();
 circP = svgRoot.createSVGPoint();
 sinline = document.getElementById("sinline");
 cosline = document.getElementById("cosline");
 radline = document.getElementById("radline");
 circpoint = document.getElementById("circpoint");
 costext = document.getElementById("costext");
 sintext = document.getElementById("sintext");
 degtext = document.getElementById("degtext");
 radtext = document.getElementById("radtext");
 grid = document.getElementById("grid");
 grid2 = document.getElementById("grid2");
 polargrid = document.getElementById("polargrid");
 xyradio = document.getElementById("xyradio");
 polradio = document.getElementById("polradio");
 hideradio = document.getElementById("hideradio");
 sradio = document.getElementById("sradio");
 nsradio = document.getElementById("nsradio");
 makeXYGrid();
 makePolarGrid();
 makeTicks();
 pickGrid();
}

/* 
* Returns the mouse coordinates as an SVGPoint
*/
function getMouse(evt){
 var position = svgRoot.createSVGPoint();
 position.x = evt.clientX;
 position.y = evt.clientY;
 return position;
}
/* 
* Converts a mouse point to svg "user coordinates".
*/
function getUserCoordinates(p1){
 var p1;
 var p2 = svgRoot.createSVGPoint();
 p2.x = p1.x - 250;
 p2.y = 250 -p1.y;
 return p2;
}

/*
* Mouse functions for the "canvas" event listeners
*/

function onMouseDown(evt){
 bmousedown=1;
 mouseP=getMouse(evt);
 newP=getUserCoordinates(mouseP);
 doUpdate();
}
function onMouseMove(evt){
 if(bmousedown){
 mouseP=getMouse(evt);
 newP=getUserCoordinates(mouseP);
 doUpdate();
 }
}
function onMouseUp(evt){
 bmousedown=0;
}
function doUpdate(){
 var d = Math.sqrt(Math.pow(newP.x,2)+Math.pow(newP.y,2));
 var x,y,angle;
 var angled = Math.round(18000*getAngle(newP)/Math.PI)/100;
 if(bsnap){
 angled = Math.round(angled/5)*5;
 angle = angled*Math.PI/180;
 circP.x = 200*Math.cos(angle);
 circP.y = 200*Math.sin(angle);
 x = Math.round(100000*Math.cos(angle))/100000;
 y = Math.round(100000*Math.sin(angle))/100000;
 angle = Math.round(100000*angle)/100000;
 }
 else{
 angle = Math.round(100000*getAngle(newP))/100000;
 circP.x = 200*newP.x/d;
 circP.y = 200*newP.y/d;
 x = Math.round(100000*newP.x/d)/100000;
 y = Math.round(100000*newP.y/d)/100000;
 }
 var newcostext = document.createTextNode(x);
 var newsintext = document.createTextNode(y);
 var newdegtext = document.createTextNode(angled);
 var newradtext = document.createTextNode(angle);
 costext.replaceChild(newcostext, costext.firstChild);
 sintext.replaceChild(newsintext, sintext.firstChild);
 degtext.replaceChild(newdegtext, degtext.firstChild);
 radtext.replaceChild(newradtext, radtext.firstChild);
 circpoint.setAttributeNS(null, "cx", circP.x );
 circpoint.setAttributeNS(null, "cy", circP.y );
 radline.setAttributeNS(null, "x2", circP.x );
 radline.setAttributeNS(null, "y2", circP.y );
 cosline.setAttributeNS(null, "x2", circP.x );
 cosline.setAttributeNS(null, "y1", circP.y );
 cosline.setAttributeNS(null, "y2", circP.y );
 sinline.setAttributeNS(null, "x1", circP.x );
 sinline.setAttributeNS(null, "x2", circP.x );
 sinline.setAttributeNS(null, "y2", circP.y );
}
function getAngle(p){
 var p, a;
 a=Math.atan2(p.y, p.x);
 if(a<=0){a=a+2*Math.PI;}
 return a;
}

/* 
* Radio controls to choose the grid type
*/

function pickXY(evt){
 bxygrid=1;
 bprgrid=0;
 bhide=0;
 pickGrid();
}
function pickPolar(evt){
 bxygrid=0;
 bprgrid=1;
 bhide=0;
 pickGrid();
}
function hideGrids(evt){
 bxygrid=0;
 bprgrid=0;
 bhide=1;
 pickGrid();
}
function pickGrid(){
 if(bxygrid){ 
 grid.setAttributeNS(null, "opacity", "1");
 grid2.setAttributeNS(null, "opacity", "1");
 xyradio.setAttributeNS(null, "opacity", "1");
 polargrid.setAttributeNS(null, "opacity", "0");
 polradio.setAttributeNS(null, "opacity", "0");
 hideradio.setAttributeNS(null, "opacity", "0");
 }
 if(bprgrid){ 
 grid.setAttributeNS(null, "opacity", "0");
 grid2.setAttributeNS(null, "opacity", "0");
 xyradio.setAttributeNS(null, "opacity", "0");
 polargrid.setAttributeNS(null, "opacity", "1");
 polradio.setAttributeNS(null, "opacity", "1");
 hideradio.setAttributeNS(null, "opacity", "0");
 }
 if(bhide){ 
 grid.setAttributeNS(null, "opacity", "0");
 grid2.setAttributeNS(null, "opacity", "0");
 xyradio.setAttributeNS(null, "opacity", "0");
 polargrid.setAttributeNS(null, "opacity", "0");
 polradio.setAttributeNS(null, "opacity", "0");
 hideradio.setAttributeNS(null, "opacity", "1");
 }

}

/* 
* Radio controls to choose whether to snap to
* the nearest 5 degrees
*/

function pickSnap(evt){
 bsnap=1;
 sradio.setAttributeNS(null, "opacity", "1");
 nsradio.setAttributeNS(null, "opacity", "0");
}
function pickNoSnap(evt){
 bsnap=0;
 sradio.setAttributeNS(null, "opacity", "0");
 nsradio.setAttributeNS(null, "opacity", "1");
}


/*
* Functions to make the tick marks and grids
*/
function makeXYGrid(){
 for(j=-11;j<12;j++){
 var xgridlines = document.createElementNS(svgNS,"use");
 var ygridlines = document.createElementNS(svgNS,"use");
 xgridlines.setAttributeNS(null, "x", 20*j);
 xgridlines.setAttributeNS(svgXLink, "xlink:href", "#xgridline");
 ygridlines.setAttributeNS(null, "y", 20*j);
 ygridlines.setAttributeNS(svgXLink, "xlink:href", "#ygridline");
 grid.appendChild(xgridlines);
 grid.appendChild(ygridlines);
 }
}
function makePolarGrid(){
 for(j=1;j<6;j++){
 var tlines = document.createElementNS(svgNS,"use");
 var angle = 15*j;
 var str= "rotate("+angle+")"
 tlines.setAttributeNS(null, "transform", str);
 tlines.setAttributeNS(svgXLink, "xlink:href", "#xgridline");
 polargrid.appendChild(tlines);
 }
 for(j=1;j<6;j++){
 var tlines = document.createElementNS(svgNS,"use");
 var angle = -15*j;
 var str= "rotate("+angle+")"
 tlines.setAttributeNS(null, "transform", str);
 tlines.setAttributeNS(svgXLink, "xlink:href", "#xgridline");
 polargrid.appendChild(tlines);
 }
 for(j=1;j<12;j++){
 var rcircs = document.createElementNS(svgNS,"circle");
 rcircs.setAttributeNS(null, "r", 20*j);
 rcircs.setAttributeNS(null, "class", "gridlines");
 polargrid.appendChild(rcircs);
 }
 var center = document.createElementNS(svgNS,"circle");
 center.setAttributeNS(null, "r", "12");
 center.setAttributeNS(null, "style", "stroke:none; fill:white");
 polargrid.appendChild(center);
}
function makeTicks(){
 var xyaxes = document.getElementById("xyaxes");
 for(j=-11;j<12;j++){
 var xticks = document.createElementNS(svgNS,"use");
 var yticks = document.createElementNS(svgNS,"use");
 xticks.setAttributeNS(null, "x", 20*j);
 xticks.setAttributeNS(svgXLink, "xlink:href", "#xtick");
 yticks.setAttributeNS(null, "y", 20*j);
 yticks.setAttributeNS(svgXLink, "xlink:href", "#ytick");
 xyaxes.appendChild(xticks);
 xyaxes.appendChild(yticks);
 }
}

// ]]></script>

<defs>
 <style type="text/css"><![CDATA[
 .axes {fill:none;stroke:rgb(50%, 10%, 10%);stroke-width:1.6}
 .gridlines {fill:none;stroke:rgb(80%, 80%, 80%);stroke-width:1}
 .gridlines2 {fill:none;stroke:rgb(30%, 30%, 30%);stroke-width:1}
 .xlabels { font-size:12px; font-weight: bold; font-family: Arial; 
 stroke: none; fill: black; text-anchor: middle}
 .ylabels{ font-size:12px; font-weight: bold; font-family: Arial; 
 stroke: none; fill: black; text-anchor: end}
 .point{ fill:#dd0000;stroke:white; stroke-width:1 }
 .trigline{ stroke:#ff0000;stroke-dasharray: 12,4;stroke-width:2.5 }
 .radius{ fill:none;stroke:#ff9900;stroke-width:3.5 }
 .panel{ fill:#ffccbb; stroke:#bbbbbb }
 .panellabel{ font-weight:bold; font-size:12px }
 .paneldata{ font-size:12px }
 .paneldatabox{ fill:white; stroke:#bbbbbb }
 ]]></style>
 <line id="xtick" class="axes" x1="0" y1="0" x2="0" y2="6"/>
 <line id="ytick" class="axes" x1="0" y1="0" x2="6" y2="0"/>
 <line id="xgridline" class="gridlines" x1="0" y1="-230" x2="0" y2="230"/>
 <line id="ygridline" class="gridlines" x1="-230" y1="0" x2="230" y2="0"/>
 <line id="xgridline2" class="gridlines2" x1="0" y1="-230" x2="0" y2="230"/>
 <line id="ygridline2" class="gridlines2" x1="-230" y1="0" x2="230" y2="0"/>
 <rect id="lback" x="0" y="0" width="20" height="20" style="fill:white"/>
</defs>


<g transform="matrix(1, 0, 0, -1, 250, 250)">
<rect x="-250" y="-250" width="600" height="500" style="fill:#ffffff; stroke:none"/>
 <g id="grid"></g>
 <g id="grid2">
 <use xlink:href="#xgridline2" x="-200"/>
 <use xlink:href="#xgridline2" x="-100"/>
 <use xlink:href="#xgridline2" x="100"/>
 <use xlink:href="#xgridline2" x="200"/>
 <use xlink:href="#ygridline2" y="-200"/>
 <use xlink:href="#ygridline2" y="-100"/>
 <use xlink:href="#ygridline2" y="100"/>
 <use xlink:href="#ygridline2" y="200"/>
 </g>
 <g id="polargrid"></g>
 <g>
 <use xlink:href="#lback" x="-210" y="-18"/>
 <use xlink:href="#lback" x="-110" y="-18"/>
 <use xlink:href="#lback" x="90" y="-18"/>
 <use xlink:href="#lback" x="190" y="-18"/>
 <use xlink:href="#lback" x="-18" y="-210"/>
 <use xlink:href="#lback" x="-18" y="-110"/>
 <use xlink:href="#lback" x="-18" y="90"/>
 <use xlink:href="#lback" x="-18" y="190"/>
 </g>
 <g id="xyaxes" class="axes">
 <line x1="-240" y1="0" x2="240" y2="0"/>
 <line x1="0" y1="-240" x2="0" y2="240"/>
 </g>
 <g class="xlabels" transform="translate(0,-14) scale(1,-1)" > 
 <text x="100">.5</text>
 <text x="200">1.0</text>
 <text x="-100">-.5</text>
 <text x="-200">-1.0</text>
 </g>
 <g class="ylabels" transform="translate(-5,-5) scale(1,-1)" > 
 <text y="-100">.5</text>
 <text y="-200">1.0</text>
 <text y="100">-.5</text>
 <text y="200">-1.0</text>
 </g>
 <circle id="unitcirc" style="fill:none; stroke:rgb(0%, 50%, 70%); stroke-width:3" cx="0" cy="0" r="200"/>
 <line id="sinline" class="trigline" x1="200" y1="0" x2="200" y2="0" />
 <line id="cosline" class="trigline" x1="0" y1="0" x2="200" y2="0" />
 <line id="radline" class="radius" x1="0" y1="0" x2="200" y2="0" />
 <circle id="circpoint" class="point" cx="200" cy="0" r="5"/>
 <circle class="point" cx="0" cy="0" r="5"/>

 <rect id="canvas" x="-250" y="-250" width="500" height="500" opacity="0" 
 pointer-events="visible"
 onmousedown="onMouseDown(evt)"
 onmousemove="onMouseMove(evt)"
 onmouseup="onMouseUp(evt)"/>


</g>


<g id="panel" transform = "translate(500, 40)" >
 <rect x="0" y="0" width="120" height="80" class="panel" />
<g transform = "translate(20, 20)" >
 <circle cx="0" cy="0" r="7" style="fill:white; stroke:#bbbbbb; stroke-width:1.5"/>
 <circle id="xyradio" cx="0" cy="0" r="3.5" style="fill:black; stroke:none"/>
 <circle cx="0" cy="0" r="10" opacity="0" pointer-events="visible"
 onclick="pickXY(evt)"/>
 <text x="15" y="5" class="panellabel">
 декартова
 </text>
</g>
<g transform = "translate(20, 40)" >
 <circle cx="0" cy="0" r="7" style="fill:white; stroke:#bbbbbb; stroke-width:1.5"/>
 <circle id="polradio" cx="0" cy="0" r="3.5" style="fill:black; stroke:none"/>
 <circle cx="0" cy="0" r="10" opacity="0" pointer-events="visible"
 onclick="pickPolar(evt)"/>
 <text x="15" y="5" class="panellabel">
 полярная
 </text>
</g>
<g transform = "translate(20, 60)" >
 <circle cx="0" cy="0" r="7" style="fill:white; stroke:#bbbbbb; stroke-width:1.5"/>
 <circle id="hideradio" cx="0" cy="0" r="3.5" style="fill:black; stroke:none"/>
 <circle cx="0" cy="0" r="10" opacity="0" pointer-events="visible"
 onclick="hideGrids(evt)"/>
 <text x="15" y="5" class="panellabel">
 без сетки
 </text>
</g>
</g>

<g id="panel2" transform = "translate(500, 140)" >
 <rect x="0" y="0" width="120" height="60" class="panel" />
<g transform = "translate(20, 20)" >
 <circle cx="0" cy="0" r="7" style="fill:white; stroke:#bbbbbb; stroke-width:1.5"/>
 <circle id="sradio" cx="0" cy="0" r="3.5" style="fill:black; stroke:none"/>
 <circle cx="0" cy="0" r="10" opacity="0" pointer-events="visible"
 onclick="pickSnap(evt)"/>
 <text x="15" y="5" class="panellabel">
 с кликом
 </text>
</g>
<g transform = "translate(20, 40)" >
 <circle cx="0" cy="0" r="7" style="fill:white; stroke:#bbbbbb; stroke-width:1.5"/>
 <circle id="nsradio" cx="0" cy="0" r="3.5" opacity="0" style="fill:black; stroke:none"/>
 <circle cx="0" cy="0" r="10" opacity="0" pointer-events="visible"
 onclick="pickNoSnap(evt)"/>
 <text x="15" y="5" class="panellabel">
 без клика
 </text>
</g>
</g>

<g id="panel3" transform = "translate(500, 220)" >
 <rect x="0" y="0" width="120" height="230" class="panel" />
<g transform = "translate(10, 20)" >
 <rect x="0" y="6" width="100" height="20" class="paneldatabox" />
 <text id="degtext" x="10" y="21" class="paneldata">
 0.0
 </text>
 <text x="0" y="0" class="panellabel">
 градусы
 </text>
</g>
<g transform = "translate(10, 70)" >
 <rect x="0" y="6" width="100" height="20" class="paneldatabox" />
 <text id="radtext" x="10" y="21" class="paneldata">
 0.0
 </text>
 <text x="0" y="0" class="panellabel">
 радианы
 </text>
</g>
<g transform = "translate(10, 120)" >
 <rect x="0" y="6" width="100" height="20" class="paneldatabox" />
 <text id="costext" x="10" y="21" class="paneldata">
 1.0
 </text>
 <text x="0" y="0" class="panellabel">
 cos(t)
 </text>
</g>
<g transform = "translate(10, 170)" >
 <rect x="0" y="6" width="100" height="20" class="paneldatabox" />
 <text id="sintext" x="10" y="21" class="paneldata">
 0.0
 </text>
 <text x="0" y="0" class="panellabel">
 sin(t)
 </text>
</g>
</g>
</svg>
Похожие публикации: JavaScript, SVG
Войти и комментировать [ Вход | Регистрация ]