~~NOTOC~~

====== Quad Section ======

---- dataentry extension ----
author_mail   : daniel@gamua.com Daniel Sperl
description   : A mesh displaying a slice of a quad (like a pie chart, but rectangular).
compatible    : v2.2
tags          : progress indicator, mask, circle, pie
homepage_url  : https://gist.github.com/PrimaryFeather/8431bdb3102d27c2326e45f4cc253c3e
----

===== Overview =====

A Starling Mesh that displays a slice of a quad (just like a pie chart, but rectangular). Useful e.g. for a circular progress indicator, or as a mask for screen transitions.

{{ :extensions:quadsection.mp4?744x246 |}}

The ''QuadSection'' class can be used almost like the normal 'Quad' class. 
Use the ''ratio'' property to define how much of the quad is shown (e.g., ''0.1'' displays just a small slice).

By assigning a texture, this provides a flexible way to display a circular progress bar, as shown in the sample above. All without masking and without interrupting batching.

<code as3>
// a grey quad section, 200x200 points
var quadSection:QuadSection = new QuadSection(200, 200, 0x808080);
quadSection.ratio = 0.75; // between 0 and 1
addChild(quadSection);

// make the pie grow counter-clockwise (the default is clockwise)
quadSection.clockwise = false;

// a textured quad section
var quadSection2:QuadSection = QuadSection.fromTexture(texture);
quadSection2.ratio = 0.25;
quadSection2.color = 0xff8020; // colorize just like a regular quad
addChild(quadSection2);
</code>

If you want to use the circular texture from above, grab it from [[https://i.imgur.com/58g3Jo8.png|here]].

<note tip>Don't look for a "background" property: the rightmost sample in the embedded SWF clip just displays the same texture in a standard ''Image'' behind the ''QuadSection''.</note>

=== Known issues ===

  * The class ignores texture frames.

===== Changelog =====

  * //2017/10/19//: First public version
  * //2018/02/28//: Added 'clockwise' property

===== User Comments =====

//Feel free to edit this part of the page if you want to add information that's lacking in the above description.\\
Questions are better asked in the [[http://forum.starling-framework.org|forum]], though.//