Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Finding the Radius and Center of a Circle to Fit Within a Page

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 115
    Comment on it

    With given width and height of a page element, you need to find the radius and its center point of the largest circle that fits within that page element.

    Find the smaller circle of the width and height; divide this by 2 to find the radius:

    var circleRadius = Math.min(elementWidth, elementHeight) / 2;
    

    Given the page elements width and height, find the center by dividing both by 2:

    var x = elementWidth / 2;
    var y = elementHeight / 2;
    


    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Using Math method to fit a circle</title>
    <style type="text/css">
    #elem
    {
    width: 500px;
    height: 600px;
    border: 1px solid #000;
    }
    </style>
    <script type="text/javascript">
    //<![CDATA[
    function compStyle(elemId,property) {
    var elem = document.getElementById(elemId);
    var style;
    if (window.getComputedStyle)
    style=window.getComputedStyle(elem,null).getPropertyValue(property);
    else if (elem.currentStyle)
    style=elem.currentStyle[property];
    return style;
    }
    window.onload=function() {
    var height = parseInt(compStyle("elem","height"));
    var width = parseInt(compStyle("elem","width"));
    var x = width / 2;
    var y = height / 2;
    var circleRadius = Math.min(width,height) / 2;
    var circ = document.getElementById("circ");
    circ.setAttribute("r",circleRadius);
    circ.setAttribute("cx",x);
    circ.setAttribute("cy",y);
    }
    //--><!]]>
    </script>
    </head>
    <body>
    <div id="elem">
    <svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
    <circle id="circ" width="10" height="10" r="10" fill="red" />
    </svg>
    </div>
    </body>
    </html>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: