JavaScript genereras laser skär smycken (6 / 10 steg)
Steg 6: Rita cirklar till skärmen
I detta avsnitt har vi lagt till 4 cirklar på arbetsytan med hjälp av funktionen ellips.
Paper.Ellipse (x, y, rx, ry)
http://raphaeljs.com/reference.html#Paper.ellipse
Parametrar
- x - x-koordinat för centrum
- y - y-koordinaten för centrum
- RX - horisontella radie
- ry - vertikala radien
Vi drar den första cirkeln med sitt centrum en cm från toppen till vänster på arbetsytan. med en radie på 1 cm.
Paper.Ellipse (ONE_CM_IN_PX, ONE_CM_IN_PX, ONE_CM_IN_PX, ONE_CM_IN_PX) .attr (BRUSH_CUT_FIRST);
Nästa cirkelns centrum startar 2cm x sladden och samma y binder med rep. Dessa två linjer kommer att producera två cirklar som överlappar varandra.
Paper.Ellipse (ONE_CM_IN_PX * 2, ONE_CM_IN_PX, ONE_CM_IN_PX, ONE_CM_IN_PX) .attr (BRUSH_CUT_FIRST);
Vi lägger till två mer cirklar med samma metod.
Paper.Ellipse (ONE_CM_IN_PX, ONE_CM_IN_PX * 2, ONE_CM_IN_PX, ONE_CM_IN_PX) .attr (BRUSH_CUT_FIRST);
Paper.Ellipse (ONE_CM_IN_PX * 2, ONE_CM_IN_PX * 2, ONE_CM_IN_PX, ONE_CM_IN_PX) .attr (BRUSH_CUT_FIRST);
Källkoden för detta steg kan hittas på min Gist
https://GIST.GitHub.com/funvill/11351377