Languages
[Edit]
PL

JavaScript - obliczanie środka ciężkości dla wskazanych elementów drzewa dom

5 points
Created by:
Wayne
415

W tym artykule chcielibyśmy pokazać, jak w prosty sposób obliczyć polożenie punktu będącego środekiem cięzkości elemetów znajdujacych się na stronie internetowej. Do obliczeń użyjemy JavaScript.

Środek ciężkości elemetów obliczony w JavaScript.
Środek ciężkości elemetów obliczony w JavaScript.

Proste rozwiązanie (funkcja wynaczająca środek ciężkości wskazanych elementów):

function caculateMiddlePoint(elements) {
	var sumX = 0;
	var sumY = 0;

	for (var i = 0; i < elements.length; ++i) {
		var element = elements[i];

		var middleX = element.offsetLeft + 0.5 * element.offsetWidth;
		var middleY = element.offsetTop +  0.5 * element.offsetHeight;

		sumX += middleX;
		sumY += middleY;
	}

	return {
		x: sumX / elements.length,
		y: sumY / elements.length
	};
}

 

Praktyczny przykład

Aby użyć powyższej funckji caculateMiddlePoint() niezbędne jest przekazanie jako argument kolekcji lub tablicy elemtów, znajdujacych się na stronie, dla któych poszukujemy środka. 

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    body {
    	height: 300px;
    }

    div.box {
        position: fixed;
    }

    #box-1 {
        left: 70px; top: 70px; background: #00c700; width: 120px; height: 54px;
    }

    #box-2{
        left: 300px; top: 50px; background: yellow; width: 138px; height: 162px;
    }

    #box-3{
        left: 30px; top: 250px; background: #3879C8; width: 300px; height: 30px;
    }

  </style>
</head>
<body>
  <div id="box-1" class="box">Box 1</div>
  <div id="box-2" class="box">Box 2</div>
  <div id="box-3" class="box">Box 3</div>
  <script>

 	function caculateMiddlePoint(elements) {
    	var sumX = 0;
        var sumY = 0;

        for (var i = 0; i < elements.length; ++i) {
          var element = elements[i];

          var middleX = element.offsetLeft + 0.5 * element.offsetWidth;
          var middleY = element.offsetTop +  0.5 * element.offsetHeight;

          sumX += middleX;
          sumY += middleY;
        }

      	return {
        	x: sumX / elements.length,
          	y: sumY / elements.length
        };
    }
    
    
    // Przykład użycia:
    
    var boxElements = document.querySelectorAll('.box');
    var middlePoint = caculateMiddlePoint(boxElements);
    
    console.log('x: ' + middlePoint.x + ', y: ' + middlePoint.y);

  </script>
</body>
</html>
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join