possien
-
Content Count
80 -
Joined
-
Last visited
-
Days Won
2
-
Ok, I finally got it now, understanding transform: function compass(){ $angle = array(0,45,90,135,180,225,270,315); for ($i = 0; $i <= 7; $i++) { $a = $angle[$i]; $Ox1 = 50; $Oy1 = 50; $rad = 40; $x = 50 + round($rad*cos(deg2rad($a))); $y = 50 - round($rad*sin(deg2rad($a))); //echo 'x= '.$x.' | y= '.$y.'<= for angle '.$a.'<br>'; $html = '<line x1="'.$Ox1.'" y1="'.$Oy1.'" x2="'.$x.'" y2="'.$y.'" style="stroke:red;stroke-width:2"/>'; $html = $html++; echo $html; } } ?> <svg id="svgelem" height="100" xmlns="http://www.w3.org/2000/svg"> <svg width="100" height="100"> <g transform="translate(0,100) scale(1,-1)"> <circle cx="50" cy="50" r="48" stroke="green" stroke-width="2" fill="#EFA" /> <?php compass();?> </svg> Thanks gizmola and Barand! Now to spherical trig...
-
I think I am getting there, I changed the origin to x=0 and y=max of the plot area and for negative values origins are x=max and y = max of the plot area (separate SVG graphic). Thanks for the math help and links. I do believe SVG is much easier.
-
I have tasking to produce graphs that convert polar coordinates to x,y and spherical trig plots. Since GD and SVG origins are inverted or backwards from a normal xy graph, is there a way to convert xy to GD or SVG using math? The calculations to plot in normal xy are relatively easy and some have negative values but I am not having success at putting the output to a usable display. Any suggestions? <!DOCTYPE html> <head> <title>SVG</title> <meta charset="utf-8" /> </head> <body> <h2>HTML5 SVG Plot Polar to XY Line</h2> <?php $rad = 25; $x = round($rad*cos(45)); $y = round($rad*sin(45)); echo "Value of x: ".$x."<br>"; echo "Value of y: ".$y."<br>"; echo "Plot of a 45 deg's with PHP in red, correct plot in blue"; ?> <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"> <svg width="100" height="100"> <circle cx="50" cy="50" r="48" stroke="green" stroke-width="2" fill="#EFA" /> <line x1="50" y1="50" x2="<?php $x;?>" y2="<?php $y;?>" style="stroke:red;stroke-width:2"/> <line x1="50" y1="50" x2="100" y2="0" style="stroke:blue;stroke-width:2"/> </svg> </body> </html>