Obiecte grafice 2D

În WPF este posibilă şi reprezentarea obiectelor grafice 2D. Sistemul axelor de coordonate în care sunt plasate obiectele îşi are originea în colţul din stânga-sus al ferestrei, iar direcţiile pozitive ale axelor sunt orientate către dreapta, respectiv în jos.

Formele predefinite pe care WPF le pune la dispoziţie sunt: Line <Line X1="30" Y1="30"

X2 ="180" Y2="30" Stroke="Blue" StrokeThickness="2" />

Rectangle <Rectangle Width="150" Height="70" RadiusX="75" RadiusY="35" Fill="LightGray" Stroke="Black" />

Ellipse <Ellipse Width="150" Height="70" Fill="LightGray" Stroke="Black"/>

Polyline <Polyline Stroke="Black" StrokeThickness="3" Points=”0 70,60 10,110 60,160 10,210 70”/>

Polygon <Polygon Stroke="Black" StrokeThickness="3" Fill="LightGray" Points="0 70,60 10,110 60,160 10,210 70" />

În aplicaţia de mai jos sunt reprezentate o linie, o elipsă, un poligon şi un dreptunghi.

<Line Height="73" Name="line1" Stroke="#FFFA0000" X1="35" X2="100" Y1="20" Y2="50" StrokeThickness="5" Fill="Red" /> <Ellipse Height="61" Name="ellipse1" Stroke="#FF00BF00" Width="136" StrokeThickness="3" /> <Polygon Height="122" Name="polygon1" Stroke="#FFD3CD2E" Width="153" Points="10,10 50,70 100,100 130,100" /> <Rectangle Height="66" Name="rectangle1" Stroke="#FF0000F7" Width="136" StrokeThickness="4" />

1

Obiecte grafice 2D

Aplicaţii:1. Buton cu faţă zâmbitoare. Desenaţi elementele din figurile de mai jos. La apăsarea butonului „faţa” trebuie să îşi schimbe expresia. „Faţa” este desenată pe o suprafață de tip Canvas.

2. Transformare imagine. Modificaţi dimensiunea şi forma imaginii prin intermediul unui obiect de tip Slider, ca în figurile de mai jos.

Dimensiunea Canvas-ului pe care se face desenul trebuie să fie „legată” de Slider. Width Apply Data Binding Source Element Name = slider1 Path =ValueLa fel pentru proprietatea Height.

Pentru ca desenul să se redimensioneze și el o dată cu suprafața de desenare, trebuie să fie „legat” de Canvas.Pentru elipsa galbenă,Width Apply Data Binding Source Element Name = canvas1 Path =ActualWidthLa fel pentru proprietatea Height.

2

Obiecte grafice 2D

3. Drag&Drop. Creaţi o aplicaţie care permite deplasarea unor obiecte grafice 2D dintr-o zonă în alta a unei ferestre.

În zona din stânga se plasează aleator obiecte de tip Rectangle şi Ellipse (s-a apelat constructorul obiectului dorit, i s-a stabilit obiectului aspectul şi poziţionarea, s-a adăugat obiectul în lista de copii a containerului).Shape forma;for (int i = 1; i <= nrObiecte; i++) //nrObiecte este generat aleator

{ if (…) { forma = new Ellipse(); //apelul constructorului forma.Stroke = Brushes.Blue; //contur forma.Fill = Brushes.LightBlue; //interior } else { … }

forma.StrokeThickness = 2; //grosime contur forma.Width = 40; //dimensiuni forma.Height = 40;

int x = r.Next((int)canvas1.Width) - 40; if (x <= 0) x = 40; int y = r.Next((int)canvas1.Height) - 40; if (y <= 0) y = 40; Canvas.SetLeft(forma, x); //poziție stabilită aleator Canvas.SetTop(forma, y);

this.canvas1.Children.Add(forma); //adăugare în lista de copii }

Zona din dreapta (WrapPanel) trebuie să aibă proprietatea AllowDrop setată pe true. În WrapPanel obictele vor fi așezate unele după altele, pe linii.

Pentru a efectua operaţia Drag&Drop este necesar să se detecteze mişcarea mouse-ului, cu butonul stâng apăsat. Pentru aceasta se tratează evenimentul MouseLeftButtonDown a containerului din stînga. Se descoperă obiectul care va fi mutat (sursa evenimentului MouseLeftButtonDown) şi se creează un obiect de tip Object. Se începe operaţia Drag&Drop prin apelul metodei DoDragDrop().

3

Obiecte grafice 2D

Object forma = e.Source; if(forma is Shape) DragDrop.DoDragDrop((Shape)forma, (Shape)forma, DragDropEffects.Move);

Când butonul mouse-ului este eliberat se lansează evenimentul Drop asociat WrapPanel-ului. Se extrage prin apelul funcţiei GetData() obiectul dragat. Elementul se elimină din lista de copii a containerului de unde a plecat şi se adaugă în cea a containerului în care a ajuns. UIElement element = (UIElement)e.Data.GetData(e.Data.GetFormats()[0]); if (element != null) { this.canvas1.Children.Remove(element); this.wrapPanel1.Children.Add(element); }

Creați un meniu din care se vor selecta obiectele de mutat.

4. Creaţi o aplicaţie care să genereze şi să reprezinte grafic situaţia absenţelor pentru clasele a 11-a.

Datele se găsesc în fişierul „absente.in”. Pentru fiecare clasă se citesc de pe câte două linii numele şi numărul de absenţe. Clasele sunt scrise în fişier într-o ordine oarecare. Numele clasei este scris cu litere mari. Clasele trebuie să se afişeze în grafic în ordinea crescătoare a literelor asociate lor.

4