Главная » Разработка для Windows Phone 7 » Многоугольник и заливка

0

Для демонстрации пунктиров я использовал полилинию, которая образует три стороны квадрата:

<Grid Background="LightCyan">

<Polyline Points="100 100, 380 100, 380 380, 100 380" Stroke="Red" StrokeThickness="20" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" StrokeDashArray="0 2" StrokeDashCap="Round" />

</Grid>

Но если задать кисть Fill, внутренняя область полилинии закрашивается так, как будто она описывает замкнутую фигуру:

<Grid Background="LightCyan">

<Polyline Points="100 100, 380 100, 380 380, 100 380" Stroke="Red" StrokeThickness="20" Fill="Blue"

StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" StrokeDashArray="0 2" StrokeDashCap="Round" />

</Grid>

Чтобы получить действительно замкнутую фигуру, добавим в коллекцию Points еще одну точку, координаты которой совпадают с координатами первой точки, или используем вместо Polyline класс Polygon (Многоугольник):

<Grid Background="LightCyan">

<Polygon Points="100 100, 380 100, 380 380, 100 380" Stroke="Red" StrokeThickness="20" Fill="Blue"

StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" StrokeDashArray="0 2" StrokeDashCap="Round" />

</Grid>

Оба элемента имеют коллекцию Points, но Polygon в случае необходимости замыкается автоматически.

Как только мы начинаем закрашивать область, ограниченную Polygon, возникает вопрос: как должны обрабатываться пересечения контурных линий. Класс Polygon определяет свойство FillRule (Правило заливки), которое позволяет сделать выбор. Классический пример – пятиконечная звезда. В данном случае свойству FillRule задано значение по умолчанию, EvenOdd (Заливка с пустыми областями):

<Grid Background="LightCyan">

<Polygon Points="2 4 0 48, 352 396, 58 180, 422 180, 128 396" Stroke="Red" StrokeThickness="10" Fill="Blue" FillRule="EvenOdd" />

</Grid>

Алгоритм EvenOdd определяет, должна ли быть закрашена замкнутая область, концептуально следующим образом: выбирается точка в этой области, скажем, где-то в центре, и из нее проводится воображаемая бесконечная линия. Эта воображаемая линия пересечет какие-то из контурных линий. Если она пересекает нечетное число этих линий, как это происходит в пяти точках, область закрашивается. Если пересекается четное число контуров, как в центре, область не закрашивается.

Альтернативным значением FillRule является NonZero (Полная заливка):

<Grid Background="LightCyan">

<Polygon Points="240 48, 352 396, 58 180, 422 180, 128 396" Stroke="Red" StrokeThickness="10" Fill="Blue" FillRule="NonZero" />

</Grid>

Правило заливки NonZero несколько сложнее, потому что в нем учитываются направления отрисовки контурных линий. Если количество контурных линий, отрисованных в одном направлении, соответствует количеству этих линий, отрисованных в другом направлении, область не закрашивается. Но в любом секторе этой звезды все контурные линии проведены в одном направлении.

Ни один из этих двух вариантов FillRule не гарантирует закрашивания всех внутренних областей. Рассмотрим, например, такую замысловатую фигуру. В ней есть замкнутая область, которая остается незакрашенной, даже если задано значение NonZero:

<Grid Background="LightCyan">

<Polygon Points=" 80 160, 80 320, 240 320, 240 80, 400 80, 400 240, 160 240, 160 400, 320 400, 320 160" Stroke="Red" StrokeThickness="10" Fill="Blue" FillRule="NonZero" />

</Grid>

Единственное задаваемое свойство Shape, которое мы пока обошли нашим вниманием – это Stretch. Аналогичное свойство есть у элемента Image. Его значениями являются члены перечисления Stretch: None (по умолчанию), Fill, Uniform или UniformToFill. Возьмем простой маленький Polygon:

<Grid Background="LightCyan">

<Polygon Points="250 200, 250 210, 230 270, 230 260" Stroke="Red" StrokeThickness="4" />

</Grid>

Теперь тот же Polygon, свойству Stretch которого задано значение Fill.

<Grid Background="LightCyan">

<Polygon Points="250 200, 250 210, 230 270, 230 260" Stroke="Red" StrokeThickness="4" Stretch="Fill" />

Источник: Чарльз Петзольд, Программируем Windows Phone 7, Microsoft Press, © 2011.

По теме:

  • Комментарии