Zielony Smok

HTML5 canvas – tutorial

Punkt ciężkości wielokąta nieregularnego

Użyty został skrypt figures.js.

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"



Listing

var cv = document.getElementById("canvas");
var ctx = cv.getContext("2d");
var points = new IrregPolygon(new Point(120, 20), new Point(170, 70),
	new Point(210, 60), new Point(190, 110), new Point(240, 140),
	new Point(180, 180), new Point(80,200), new Point(60,150), 
        new Point(130, 50));
points.fillStyle = "red";
points.strokeStyle = "blue";
points.fill = true;
points.stroke = true;
points.lineWidth = 1;
points.draw(ctx);
var bary = points.barycenter();
ctx.fillText("x: "+ bary.x, 240, 100);
ctx.fillText("y: "+ bary.y, 240, 120);
bary.strokeStyle="black";
bary.shape = "cross";
bary.stroke=true;
bary.draw(ctx);
            

Sposób triangulacji wielokąta

Nasza figura wygląda następująco:

Mamy tablicę 9 punktów od 0 do 8. Sprawdzamy pierwszy wierzchołek 8-0-1 tworząc trójkąt 0-1-8. Obliczamy czy środek boku 8-1 leży w obrębie figury czy poza nią. Używamy do tego celu metody kontekstu isPointInPath(). Ponieważ metody można użyć tylko wtedy, gdy figura jest odrysowana tworzymy testowe, niewidoczne canvas, na którym rysujemy głęboką kopię naszej figury. Ponieważ test wypada pozytywnie obliczamy powierzchnię trójkąta 0-8-1 i położenie jego punktu ciężkości. Następnie usuwamy punkt 0 z tablicy i odrysowujemy obciętą figurę.

Sprawdzamy pierwszy wierzchołek 8-1-2. Środek odcinka 8-2 leży poza figurą. Cofamy się i badamy wierzchołek 7-8-1. Moglibyśmy oczywiście zbadać wierzchołek z prawej, ale ponieważ łatwiej jest usuwać z tablicy pierwszy i ostatni element niż odcinki z jej środka, dlatego cofnęliśmy się w lewo. Oczywiście przy ‘trefnym’ odcinku ten z lewej i ten z prawej są z pewnością ‘koszerne’, czyli leżą w obrębie figury. Obliczamy punkt ciężkości i pole trójkąta. Usuwamy ostatni element tablicy. Odrysowujemy okrojony trójkąt.

Usuwamy wierzchołek 1

Usuwamy wierzchołek 2

Usuwamy wierzchołek 3

Usuwamy wierzchołek 4

Usuwamy wierzchołek 5 likwidując tym samym całą figurę.

Mamy pola powierzchni każdego trójkąta składowego i współrzędne jego środka ciężkości. Obliczamy środek ciężkości całej figury.