Find the Radius and Center of a Circle to Fit Within a Page Element
Problem
Given the width and height of a page element, you need to find the center and radius of the largest circle that fits within that page element.
Solution
Find the smaller of the width and height; divide this by 2 to find the radius:
var circleRadius = Math.min(elementWidth, elementHeight) / 2;
Given the page element’s width and height, find the center by dividing both by 2:
var x = elementWidth / 2; var y = elementHeight / 2;
EXPLAIN
Working with graphics requires us to do things such as finding the center of an element,
or finding the radius of the largest circle that will fit into a rectangle (or largest rectangle
that can fit in a circle).
demonstrates both of the solution calculations, modifying an SVG circle
contained within an HTML document so that the circle fits within the div element that
surrounds it.
Fitting a SVG circle into a div element
<!DOCTYPE html>
<html>
<head>
<title>Using Math method to fit a circle</title>
<style type="text/css">
#elem
{
width: 600px;
height: 400px;
border: 1px solid black;
}
</style>
<script type="text/javascript">
window.onload = window.onresize = function() {
var box = document.getElementById("elem");
var style = window.getComputedStyle(box,null);
var height = parseInt(style.getPropertyValue("height"));
var width = parseInt(style.getPropertyValue("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 width="100%" height="100%">
<circle id="circ" width="10" height="10" r="10" fill="red" />
</svg>
</div>
</body>
It shows the page once it’s loaded. There are techniques in SVG that can ac‐
complish the same procedure using the SVG element’s viewPort setting, but even with
these, at some point in time you’ll need to dust off your basic geometry skills if you want
to work with graphics. However, as the example demonstrates, most of the math you’ll
need is basic.
Join Our Telegram Channel to Stay Updated
![Javascript DOM Tutorial Part 1 [ Selectors ] How to Select HTML Elements Using Javascript](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFE3NttPjKRUzbBqnGQNT8mtxG71mrDGLb-k8f-rw_I9Ov3Tu9uIFQtUgoxOozsx2TNf449IJ7SPgrEFFqrDdN98mWUWXsp8zFUteAmA7UaXDDjyQHE5b0oVkCzXT_aIgCVFD_ksqt18/s72-c/jspart10.jpg)
![Python Django Rest Framework Tutorial Part 2 [ DRF Separate Methods for Create,Update,Delete,List ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzEs_nyQ4dNnsoznaIbD_ifI3F3STp4Sd2eNDmKINgxyMvwt9Kc_BJHKWfeudr23RMsloD5Bd3PCfyBG96OY-cVZBTZ8Npc_86fCHd7iCKVy8fjtk4Xxawvw8OuvM1PhJpq-hTR28XJE/s72-c/DJANGO-REST2.jpg)
No comments:
Post a Comment