Programowanie obiektowe i zdarzeniowe wykład 8 grafika i animacja

Wielkość: px
Rozpocząć pokaz od strony:

Download "Programowanie obiektowe i zdarzeniowe wykład 8 grafika i animacja"

Transkrypt

1 Programowanie obiektowe i zdarzeniowe wykład 8 grafika i animacja Grafika Kształty Najprostszy sposób rysowania własnej zawartości w WPF, to wykorzystanie kształtów. Shapes klasy reprezentujące linie, elipsy, prostokąty, wielokąty (prymitywy, kształty podstawowe). Wszystkie one traktowane są jak elementy: Są zorganizowane w ten sam sposób co inne elementy (umieszczane w kontenerze układu, przeważnie Canvas). Obsługują te same zdarzenia, co inne elementy (a także wspierają tooltipy, menu kontekstowe, etc.). Odpowiadają za rysowanie samych siebie (i automatycznie reagują na zmianę właściwości). Marek Tabędzki 1/62

2 Klasy kształtów Każdy kształt dziedziczy z abstrakcyjnej klasy System.Windows.Shapes.Shape: Rectangle prostokąt Ellipse elipsa Line odcinek Polyline połączony ciąg odcinków Polygon zamknięty kształt z ciągu połączonych odcinków Path pozwala na łączenie w jednym elemencie wielu innych kształtów Najważniejsze właściwości: Fill pędzel do namalowania zawartości (wnętrza) kształtu Stroke pędzel do namalowania krawędzi kształtu StrokeThickness grubość krawędzi. Jest rozdzielana po równo na obie strony. Marek Tabędzki 2/62

3 Rectangle, Ellipse Wystarczy zdefiniować rozmiar kształtu (a także Fill lub/i Stroke, aby kształt stał się widoczny): <StackPanel> <Ellipse Fill="Yellow" Stroke="Blue" Height="50" Width="100" Margin="5" HorizontalAlignment="Left"/> <Rectangle Fill="Yellow" Stroke="Blue" Height="50" Width="100" Margin="5" HorizontalAlignment="Left"/> </StackPanel> Marek Tabędzki 3/62

4 Rectangle dodaje dwie własności: RadiusX i RadiusY (pozwalają na rysowanie zaokrąglonych narożników). <StackPanel> <Rectangle Fill="Yellow" Stroke="Blue" Height="50" Width="100" Margin="5" HorizontalAlignment="Left"/> <Rectangle Fill="Yellow" Stroke="Blue" Height="50" Width="100" Margin="5" HorizontalAlignment="Left" RadiusX="15" RadiusY="15"/> </StackPanel> Marek Tabędzki 4/62

5 Rozmieszczanie kształtów Przeważnie rozmiar i położenie kształtów określa się ręcznie. Możemy też pozwolić, by kształt dopasował się do dostępnego miejsca: <Grid> <Ellipse Fill="Yellow" Stroke="Blue"></Ellipse> </Grid> Marek Tabędzki 5/62

6 Określając wartość własności Stretch: Fill dopasowanie wysokości i szerokości do dostępnego miejsca. None bez dopasowania. Uniform dopasowanie proporcjonalne (tak, by kształt mieścił się w kontenerze). Jeśli określimy wysokość i szerokość, będą traktowane jako górne ograniczenie. UniformToFill podobnie, ale każdy z wymiarów ma wypełnić dostępną przestrzeń (część kształtu może zostać ucięta). Marek Tabędzki 6/62

7 Położenie kształtów jest określane na tych samych zasadach, co innych elementów: rządzi nim kontener. Największą kontrolę nad położeniem daje Canvas: <Canvas> <Ellipse Fill="Yellow" Stroke="Blue" Canvas.Left="100" Canvas.Top="50" Width="100" Height="50"/> <Rectangle Fill="Yellow" Stroke="Blue" Canvas.Left="30" Canvas.Top="40" Width="100" Height="50"/> </Canvas> (uwaga: kolejność definicji ma znaczenie, gdy kształty nakładają się na siebie) (uwaga: Cansa nie musi być elementem najwyższego poziomu możemy umieścić go np. w komórce Grida). Marek Tabędzki 7/62

8 Viewbox Jest sposobem na połączenie precyzyjnego rozmieszczania kształtów i skalowania do dostępnego rozmiaru. Viewbox to Decorator, przyjmujący pojedyncze dziecko (może nim być kontener z dalszymi elementami), które skaluje, dopasowując do dostępnej przestrzeni. Najbardziej opłacalne w wypadku grupy kształtów: <Grid Margin="5"> <Viewbox Stretch="UniformToFill"> <Canvas Width="50" Height="50"> <Ellipse Fill="Yellow" Stroke="Blue" Canvas.Left="5" Canvas.Top="5" Width="40" Height="40"/> </Canvas> </Viewbox> </Grid> Marek Tabędzki 8/62

9 (Viebox skaluje całą zawartość: nie tylko rozmiar samego kształtu, ale i np. grubość krawędzi, a także kontrolki, które w nim umieścimy). Własność Viewbox.Stretch domyślnie ustawiona jest na Uniform, ale można też użyć Fill i UniformToFill, aby zmienić sposób skalowania zawartości, a także StretchDirection (poza Both mamy UpOnly, aby tylko powiększać i DownOnly aby tylko zmniejszać). Uwaga: element umieszczony w ViewBoxie musi mieć określony rozmiar, aby Viewbox wiedział jak go przeskalować (tzn. jaki jest jego rozmiar bazowy). Marek Tabędzki 9/62

10 Line Własności X1, Y1 oraz X2, Y2 określają współrzędne początkowego i końcowego punktu linii. <Grid Margin="5"> <Line Stroke="Blue" X1="0" Y1="0" X2="100" Y2="10"/> </Grid> Dla linii określamy tylko właność Stroke (Fill nie jest brany pod uwagę). Współrzędne są określane w odniesieniu do lewego, górnego narożnika kontenera (plus Margin), w którym umieszczono kształt. W przeciwieństwie do Rectangle i Ellipse, możemy rysować linie poza kontenerem (np. podając ujemne współrzędne). Nie możemy za to ustawić dla nich marginesu i alignmentu. Nadal możemy określić położenie punktu początkowego linii w Canvasie przy pomocy Canvas.Top, Canvas.Left a rozmiar przy pomocy Width i Height. Marek Tabędzki 10/62

11 Polyline Pozwala narysować linię łamaną. Definiujemy ją przy pomocy listy współrzędnych X i Y. Można podać ją jako kolekcję punktów: <Polyline Stroke="MediumBlue" StrokeThickness="5"> <Polyline.Points> <PointCollection> <Point X="10" Y="110"/> <Point X="30" Y="120"/> <Point X="50" Y="100"/> <Point X="70" Y="140"/> <Point X="90" Y="80"/> <Point X="110" Y="170"/> <Point X="130" Y="50"/> <Point X="150" Y="170"/> <Point X="170" Y="80"/> <Point X="190" Y="140"/> </PointCollection> </Polyline.Points> </Polyline> Marek Tabędzki 11/62

12 Albo w skróconej formie, jako wartości oddzielane spacjami (przecinek między X a Y jest opcjonalny). <Polyline Stroke="MediumBlue" StrokeThickness="5" Points="10,90 30,100 50,80 70,120 90,60 110, ,30 150, ,60 190,120"/> Marek Tabędzki 12/62

13 Polygon Działa niemal tak samo jak Polyline. Jedyna różnica: Polygon jest krzywą zamkniętą (sam dodaje ostatni segment, łączący punkt końcowy z początkowym). Może używać pędzla wypełnienia (Fill). <Polygon Stroke="MediumBlue" Fill="LightBlue" StrokeThickness="5" Points="20,85 30,100 50,80 70,120 90,60 110, ,30 150, ,60 180,130"/> Marek Tabędzki 13/62

14 Są dwa sposoby wypełniania Polygonu. Domyślny: <Polygon Stroke="MediumBlue" Fill="LightBlue" FillRule="EvenOdd" StrokeThickness="5" Points="95,20 160,150 20,70 180,60 50,160"/> Marek Tabędzki 14/62

15 <Polygon Stroke="MediumBlue" Fill="LightBlue" FillRule="Nonzero" StrokeThickness="5" Points="95,20 160,150 20,70 180,60 50,160"/> Marek Tabędzki 15/62

16 Line Caps, Line Joins W wypadku rysowania linii możemy określić kształt zakończeń StrokeStartLineCap i StrokeEndLineCap: Flat (domyślne), Round, Square i Triangle (wszystkie zwiększają długość linii o ½ szerokości). <Canvas> <Polyline StrokeEndLineCap="Flat" Stroke="MediumBlue" StrokeThickness="20" Points="20,40 40,60 80,20 100,40 200,40"/> <Polyline StrokeEndLineCap="Round".../> <Polyline StrokeEndLineCap="Square".../> <Polyline StrokeEndLineCap="Triangle".../> </Canvas> Marek Tabędzki 16/62

17 StrokeLineJoin pozwala określić kształt łączeń (wierzchołków łamanej) Miter (domyślny), Bevel (ścięte narożniki), Round (zaokrąglone). Miter pozwala podać StrokeMiterLimit, który ogranicza wydłużanie narożników (wartość 1 to maksymalnie ½ szerokości linii). <Canvas> <Polyline Stroke="MediumBlue" StrokeThickness="20" StrokeLineJoin="Miter" Points="20,20 140,40 40,60 60,80"/> <Polyline StrokeLineJoin="Bevel".../> <Polyline StrokeLineJoin="Round".../> <Polyline StrokeLineJoin="Miter" StrokeMiterLimit="3".../> </Canvas> Marek Tabędzki 17/62

18 Dashes <Canvas> <Polyline StrokeDashArray="1".../> <Polyline StrokeDashArray="1 2".../> <Polyline StrokeDashArray="2 1".../> <Polyline StrokeDashArray=" ".../> <Polyline StrokeDashArray="5 2 1".../> <Polyline StrokeDashArray="2 2" StrokeDashCap="Round".../> </Canvas> StrokeDashArray pozwala zdefiniować dowolny wzór linii przerywanej podajemy wartości, określające długość segmentu i przerwy między segmentami. Liczba tych wartości nie musi być parzysta. StrokeDashCap pozwala określić kształt zakończeń segmentów (uwaga na długość zwiększoną o ½ szerokości). StrokeDashOffset pozwala zacząć przerywaną od wybranej wartości wzorca. Marek Tabędzki 18/62

19 Pixel Snapping Uwaga: wymiary podajemy zawsze w jednostkach logicznych (1/96 cala). Mogą być to liczby całkowite. W zależności od urządzenia nie muszą się one tłumaczyć na faktyczne położenie pixeli. Domyślnie jest to niwelowane przez antyaliasing. Gdy nie jest to pożądane, można włączyć opcję SnapsToDevicePixels (można to ustawić osobno dla każdego kształtu) powoduje ona zaokrąglenie wartości do faktycznych pikseli urządzenia. Brushes Pędzle używane są zarówno do rysowania tła (background), pierwszego planu (foreground), krawędzi (border) elementów, jak też wypełnienia (fill) oraz obwiedni (stroke) kształtów. Pędzle obsługują powiadamianie o zmianie (gdy zmodyfikujemy pędzel, wszystkie elementy, które go używają, powinny się odrysować). Obsługują półprzeźroczystość (własność Opacity). Klasa SystemBrushes udostępnia pędzle używające kolorów systemowych (zdefiniowanych w ustawieniach użytkownika). Marek Tabędzki 19/62

20 Dostępne rodzaje pędzli: SolidColorBrush najprostszym rodzaj pędzla: wypełnia zawartość jednolitym kolorem. Jest on stosowany domyślnie, gdy podajemy sam kolor jako wartość własności w XAMLu. LinearGradientBrush, RadialGradientBrush wypełnienie gradientowe. ImageBrush wypełnienie przy pomocy obrazka. DrawingBrush wypełnienie przy użyciu własnej grafiki (np. kształtów). VisualBrush wypełnianie przy użyciu dowolnego obiektu typu Visual (a więc np. również elementów interfejsu przydatne do różnych efektów specjalnych). LinearGradientBrush Wymaga podania listy elementów GradientStop (każdy element to kolejny kolor). <Rectangle> <Rectangle.Fill> <LinearGradientBrush> <GradientStop Color="LightBlue" Offset="0" /> <GradientStop Color="MediumBlue" Offset="1" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> Marek Tabędzki 20/62

21 Offset określa położenie każdego koloru, można w ten sposób sterować szerokością przejścia: <Rectangle Margin="3"> <Rectangle.Fill> <LinearGradientBrush> <GradientStop Color="LightBlue" Offset="0.3" /> <GradientStop Color="MediumBlue" Offset="0.7" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> StartPoint i EndPoint pozwalają sterować kierunkiem gradientu. <Rectangle Margin="3"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> <GradientStop Color="LightBlue" Offset="0" /> <GradientStop Color="MediumBlue" Offset="1" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> Marek Tabędzki 21/62

22 <Rectangle Margin="3"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="LightBlue" Offset="0" /> <GradientStop Color="MediumBlue" Offset="1" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Margin="3"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="0,0.2" SpreadMethod="Reflect"> <GradientStop Color="LightBlue" Offset="0" /> <GradientStop Color="MediumBlue" Offset="1" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> Marek Tabędzki 22/62

23 <Rectangle Margin="3"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="0,0.2" SpreadMethod="Repeat"> <GradientStop Color="LightBlue" Offset="0" /> <GradientStop Color="MediumBlue" Offset="1" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> Można określić więcej kolorów składowych: <Rectangle Margin="3"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,1" EndPoint="0,0"> <GradientStop Color="Red" Offset="0" /> <GradientStop Color="White" Offset="0.5" /> <GradientStop Color="Black" Offset="1" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> (Uwaga: oczywiście, takiego pędzla możemy używać nie tylko do rysowania kształtów, ale i np. tekstu, krawędzi, etc.) Marek Tabędzki 23/62

24 RadialGradientBrush Kolory definiuje się, jak w LinearGradientBrush. Różnica polega na określeniu pozycji. <Ellipse Margin="3"> <Ellipse.Fill> <RadialGradientBrush> <GradientStop Color="Yellow" Offset="0" /> <GradientStop Color="Red" Offset="1" /> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> <Ellipse Margin="3"> <Ellipse.Fill> <RadialGradientBrush Center="0.2,0.8"> <GradientStop Color="Yellow" Offset="0" /> <GradientStop Color="Red" Offset="1" /> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> Marek Tabędzki 24/62

25 <Ellipse Margin="3"> <Ellipse.Fill> <RadialGradientBrush GradientOrigin="0.2,0.8"> <GradientStop Color="Yellow" Offset="0" /> <GradientStop Color="Red" Offset="1" /> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> <Ellipse Margin="3"> <Ellipse.Fill> <RadialGradientBrush RadiusX="0.25" RadiusY="1"> <GradientStop Color="Yellow" Offset="0" /> <GradientStop Color="Red" Offset="1" /> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> Marek Tabędzki 25/62

26 ImageBrush <Rectangle Margin="3"> <Rectangle.Fill> <ImageBrush ImageSource="happy_face.png"> </ImageBrush> </Rectangle.Fill> </Rectangle> Viewbox pozwala wskazać fragment obrazka do użycia w roli pędzla (koordynaty względne). <Rectangle Margin="3"> <Rectangle.Fill> <ImageBrush ImageSource="happy_face.png" Viewbox=" "> </ImageBrush> </Rectangle.Fill> </Rectangle> Marek Tabędzki 26/62

27 Tiled ImageBrush Viewport określa względny rozmiar pojedynczego obrazka (a tym samym ile powtórzeń znajdzie się w wypełnianym obszarze niezależnie od jego rozmiaru). <Ellipse Margin="3" Stroke="Black"> <Ellipse.Fill> <ImageBrush ImageSource="happy_face.png" TileMode="Tile" Viewport="0,0 0.4,0.5"> </ImageBrush> </Ellipse.Fill> </Ellipse> <Ellipse Margin="3" Stroke="Black"> <Ellipse.Fill> <ImageBrush ImageSource="happy_face.png" TileMode="FlipXY" Viewport="0,0 0.4,0.5"> </ImageBrush> </Ellipse.Fill> </Ellipse> Marek Tabędzki 27/62

28 Ustawienie ViewportUnits jako Absolute spowoduje, że obrazek nie będzie skalowany, a powtarzany ilość razy zależną od rozmiaru figury. <Ellipse Margin="3" Stroke="Black"> <Ellipse.Fill> <ImageBrush ImageSource="happy_face.png" ViewportUnits="Absolute" TileMode="Tile" Viewport="0,0 48,48"> </ImageBrush> </Ellipse.Fill> </Ellipse> Marek Tabędzki 28/62

29 VisualBrush Pozwala pobrać obraz dowolnego elementu i używać go jako pędzla. Uwaga: kopiuje to tylko wygląd elementu, skopiowane kontrolki nie dadzą się używać. Pędzel reaguje na zmianę wyglądu kontrolki (np. naciśnięcie przycisku, wpisanie wartości do pola tekstowego). <StackPanel> <Button Margin="3" Name="ok">OK</Button> <Rectangle Margin="3" Height="{Binding ElementName=ok, Path=ActualHeight}"> <Rectangle.Fill> <VisualBrush Visual="{Binding ElementName=ok}"/> </Rectangle.Fill> </Rectangle> <Rectangle Margin="3" Height="50"> <Rectangle.Fill> <VisualBrush Visual="{Binding ElementName=ok}"/> </Rectangle.Fill> </Rectangle> </StackPanel> Jest to używane np. aby pokazać podgląd zawartości okna, wygenerować miniaturę, albo do efektów specjalnych (odbicia, cienie, animacje). Marek Tabędzki 29/62

30 Transforms Transformacje afiniczne. Wszystkie klasy dziedziczą z System.Windows.Media.Transform. TranslateTransform translacja (własności X i Y) RotateTransform obrót (Angle, CenterX, CenterY) ScaleTransform skalowanie (ScaleX, ScaleY, CenterX, CenterY) SkewTransform pochylenie (AngleX, AngleY, CenterX, CenterX) MatrixTransform dowolne przekształcenie z wykorzystaniem własnej macierzy przekształcenia (Matrix) TransformGroup łączy kilka transformacji (ich kolejność jest ważna) Aby transformować kształt należy ustawić własność RenderTransform. W obrocie określamy kąt: <Canvas Margin="3"> <Rectangle Stroke="DarkBlue" Width="150" Height="20"> <Rectangle.RenderTransform> <RotateTransform Angle="10"/> </Rectangle.RenderTransform> </Rectangle>... </Canvas> Marek Tabędzki 30/62

31 Można też wybrać środek obrotu: <Canvas Margin="3"> <Rectangle Stroke="DarkBlue" Width="150" Height="20"> <Rectangle.RenderTransform> <RotateTransform Angle="10" CenterX="75" CenterY="10"/> </Rectangle.RenderTransform> </Rectangle>... </Canvas> Środek można też wskazać jako wartość względną: <Canvas Margin="3"> <Rectangle Stroke="DarkBlue" Width="150" Height="20" RenderTransformOrigin="0.2,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle="10" /> </Rectangle.RenderTransform> </Rectangle>... </Canvas> Marek Tabędzki 31/62

32 Transforming Elements Te same transformacje mogą być stosowane również w stosunku do elementów: <Button Margin="3" Name="ok" RenderTransformOrigin="0.5,0.5"> <Button.RenderTransform> <TransformGroup> <SkewTransform AngleX="-45" /> <RotateTransform Angle="30"/> <TranslateTransform Y="50"/> </TransformGroup> </Button.RenderTransform> OK</Button> Dostępne jest jeszcze LayoutTransform, które jest aplikowane przed ułożeniem zawartości. <StackPanel> <Button Margin="3" Name="ok" RenderTransformOrigin="0.5,0.5"> <Button.LayoutTransform> <TransformGroup> <RotateTransform Angle="45"/> </TransformGroup> </Button.LayoutTransform> OK</Button> </StackPanel> Marek Tabędzki 32/62

33 Transparency Sposoby na efekt przeźroczystości: Własność Opacity elementu (od 1 nieprzejrzysty do 0 całkowicie przeźroczysty). Opacity pędzla wówczas dotyczy tylko tego, co jest rysowane tym pędzlem. Użycie koloru o wartości alfa mniejszej niż 255 (często daje lepsze efekty niż ustawienie Opacity). <StackPanel Background="LawnGreen"> <Button Margin="3"> Nieprzejrzysty </Button> <Button Margin="3" Opacity="0.5" Background="Yellow"> Półprzeźroczysty </Button> <Button Margin="3" Background="#80FFFF00"> Półprzeźroczysty kolor </Button> </StackPanel> Marek Tabędzki 33/62

34 Opacity Masks W odróżnieniu od Opacity, która ustawia jeden poziom przeźroczystości dla całego elementu, Opacity Mask pozwala na bardziej urozmaicone efekty. Akceptuje dowolny pędzel i używa jego kanału alfa (kolor nie jest ważny) by określić przezroczystość. <StackPanel Background="LawnGreen"> <Button Margin="3" Padding="3"> <Button.OpacityMask> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="# " Offset="0"/> <GradientStop Color="#ff000000" Offset="1"/> </LinearGradientBrush> </Button.OpacityMask> Opacity Mask </Button> </StackPanel> Marek Tabędzki 34/62

35 Wykorzystanie do efektu lustra: <StackPanel> <Button Margin="3" Name="ok">Naciśnij mnie</button> <Rectangle Margin="3" Height="{Binding ElementName=ok, Path=ActualHeight}" RenderTransformOrigin="0,0.5"> <Rectangle.Fill> <VisualBrush Visual="{Binding ElementName=ok}"/> </Rectangle.Fill> <Rectangle.RenderTransform> <ScaleTransform ScaleY="-1"/> </Rectangle.RenderTransform> <Rectangle.OpacityMask> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="Transparent" Offset="0.3"/> <GradientStop Color="# " Offset="1"/> </LinearGradientBrush> </Rectangle.OpacityMask> </Rectangle> </StackPanel> Marek Tabędzki 35/62

36 Ścieżki i geometrie Path to najbardziej złożony z dostępnych kształtów (shapes). Może zastąpić dowolne z innych kształtów, a także umożliwia łączenie kształtów oraz posługiwanie się krzywymi. Klasa Path ma własność Data, pobierającą obiekt typu Geometry. Definiuje on kształt (lub kształty) wchodzące w skład ścieżki. Proste geometrie: LineGeometry linia prosta. RectangleGeometry odpowiednik kształtu Rectangle. EllipseGeometry elipsa. Geometrie złożone: GeometryGroup dodaje dowolną liczbę geometrii do jednej ścieżki. CombinedGeometry łączy dwie geometrie w jedne kształt. Pozwala wybrać sposób połączenia. PathGeometry reprezentuje złożoną figurę (otwartą lub zamkniętą), składającą się z sekwencji łuków, odcinków i krzywych. Marek Tabędzki 36/62

37 Ścieżka jako zamiennik kształtu: <Rectangle Fill="Yellow" Stroke="Blue" Width="100" Height="50" /> <Line Stroke="Blue" X1="0" Y1="0" X2="10" Y2="100"/> <Ellipse Fill="Yellow" Stroke="Blue" Width="100" Height="50" HorizontalAlignment="Left"/> <Path Fill="Yellow" Stroke="Blue"> <Path.Data> <RectangleGeometry Rect="0,0 100,50"/> </Path.Data> </Path> <Path Fill="Yellow" Stroke="Blue"> <Path.Data> <LineGeometry StartPoint="0,0" EndPoint="10,100"/> </Path.Data> </Path> <Path Fill="Yellow" Stroke="Blue"> <Path.Data> <EllipseGeometry RadiusX="50" RadiusY="25" Center="50,25"/> </Path.Data> </Path> W tej chwili jedyna widoczna korzyść to to, że nie musimy umieszczać ich w Canvas. Prawdziwe możliwości pojawiają się gdy zechcemy połączyć kilka geometrii. Marek Tabędzki 37/62

38 Łączenie kształtów przy pomocy GeometryGroup To najprostszy sposób połączenie geometrii: <Path Fill="Yellow" Stroke="Blue" Margin="5" Canvas.Top="10" Canvas.Left="10" > <Path.Data> <GeometryGroup> <RectangleGeometry Rect="0,0 100,100"/> <EllipseGeometry Center="150,50" RadiusX="35" RadiusY="25"/> </GeometryGroup> </Path.Data> </Path> Plusy: jeden obiekt zamiast dwóch większa wydajność (jeden element złożony działa szybciej niż wiele elementów prostych) grupy kształtów można definiować w zasobach i wykorzystywać w innych elementach ścieżkach Marek Tabędzki 38/62

39 Bardziej urozmaicone sposoby łączenia kształtów oferuje CombinedGeometry Może ona łączyć tylko dwie geometrie (własności Geometry1 i Geometry2). GeometryCombineMode określa wykonywaną na nich operację: Union suma Intersect część wspólna Xor alternatywa wykluczająca Exclude różnica <Path Fill="Yellow" Stroke="Blue" Canvas.Top="40" Canvas.Left="20"> <Path.Data> <CombinedGeometry GeometryCombineMode="Union"> <CombinedGeometry.Geometry1> <RectangleGeometry Rect="0,0 100,100"/> </CombinedGeometry.Geometry1> <CombinedGeometry.Geometry2> <EllipseGeometry Center="80,10" RadiusX="35" RadiusY="35"/> </CombinedGeometry.Geometry2> </CombinedGeometry> </Path.Data> </Path> Marek Tabędzki 39/62

40 GeometryCombineMode="Intersect" GeometryCombineMode="Xor" GeometryCombineMode="Exclude" Marek Tabędzki 40/62

41 Bardziej złożone kształty należy składać z kilku CombinedGeometry. <CombinedGeometry GeometryCombineMode="Union"> <CombinedGeometry.Geometry1> <CombinedGeometry GeometryCombineMode="Exclude"> <CombinedGeometry.Geometry1> <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50"/> </CombinedGeometry.Geometry1> <CombinedGeometry.Geometry2> <EllipseGeometry Center="50,50" RadiusX="40" RadiusY="40"/> </CombinedGeometry.Geometry2> </CombinedGeometry> </CombinedGeometry.Geometry1> <CombinedGeometry.Geometry2> <RectangleGeometry Rect="0,45,100,10"> <RectangleGeometry.Transform> <RotateTransform Angle="-45" CenterX="50" CenterY="50"/> </RectangleGeometry.Transform> </RectangleGeometry> </CombinedGeometry.Geometry2> </CombinedGeometry> Marek Tabędzki 41/62

42 Efekt: Marek Tabędzki 42/62

43 Geometry Mini-Language Pozwala zdefiniować geometrię w formie tekstu zawierającego ciąg poleceń. Każde polecenie to litera i wartości liczbowe oddzielane spacjami. Ścieżka jest wówczas zbiorem połączonych linii i krzywych mogących tworzyć zamknięte lub otwarte obszary. Przykład: <Path Stroke="Blue" StrokeThickness="5" Data="M 20,20 L 90,50 L 50,90 Z"/> Przecinki są opcjonalne, ale poprawiają czytelność. Marek Tabędzki 43/62

44 Dostępne polecenia: F value ustawia własność Geometry.FillRule (0 oznacza EvenOdd, 1 Nonzero). Może pojawić się tylko na początku stringu. M x,y tworzy nową ścieżkę i ustawia punkt startowy. Musi pojawić się przed jakąkolwiek inną (poza F), ale może pojawić się też później, by przemieścić punkt startowy (M znaczy Move). L x,y tworzy odcinek (linię) do wskazanego punktu H x tworzy poziomy odcinek V y tworzy pionowy odcinek A radiusx, radiusy degrees islargearc, isclockwise x,y tworzy łuk elipsy do wskazanego punktu, podajemy promienie elipsy i wybieramy która część nas interesuje C x1,y1 x2,y2 x,y tworzy krzywą Beziera z punktami kontrolnymi x1,y1 i x2,y2 Q x1, y1 x,y prostsza forma krzywej Beziera (Quadratic Bezier), z jednym punktem kontrolnym S x2,y2 x,y tworzy kolejny segment Beziera, wykorzystując ostatni punkt kontrolny z poprzedniej krzywej (Smooth Bezier) Z kończy PathFigure i ustawia powoduje jej zamknięcie (nie jest obowiązkowe, jeśli chcemy mieć figurę otwartą) Polecenie zapisane małymi znakami oznacza, że parametry są podane względem poprzedniego punktu (a nie wartości absolutne). Marek Tabędzki 44/62

45 Animacje Animacje w WPF definiuje się przeważnie w sposób deklaratywny (w XAML). Stworzenie animacji wymaga określenia jaka właściwość elementu w jaki sposób ma się zmieniać w czasie. Ograniczenie: animacje dotyczą tylko dependency properties (a co za tym idzie, nie da się uzyskać w ten sposób efektów, których nie osiągniemy modyfikując własności, np. nie można animacją dodawać elementów do okna). Mogą one służyć uatrakcyjnieniu standardowej aplikacji, ale nie nadają się np. do gier. Każda animacja operuje na pojedynczej własności. Animowanie własności wymaga użycia klasy animacji właściwej dla typu tej własności. Klasy animacji: zmieniających pewną wartość na drodze liniowej interpolacji (z wartości From do wartości To lub zwiększając wartość aktualną o By), np. DoubleAnimation zmieniających pewną wartość w określonych punktach czasu, np. DoubleAnimationUsingKeyFrames animacje wykorzystujące ścieżkę (PathGeometry), np. DoubleAnimationUsingPath Nie ma klas do animowania własności typu wyliczeniowego (np. HorizontalAlignment). Zazwyczaj nie animuje się też typów referencyjnych (np. Brush zamiast tego używa się np. ColorAnimation, DoubleAnimation do animacji własności pędzla). Marek Tabędzki 45/62

46 Przykład: Animacja w XAMLu definiowana jest w obiekcie storyboard. Reprezentuje on przebieg animacji, pozwala na grupowanie kilku animacji, kontrolowanie animacji. Do uruchomienia animacji konieczny jest EventTrigger. Jego zadaniem jest odpalenie animacji. <Window.Triggers> <EventTrigger RoutedEvent="Window.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation From="0" To="300" Duration="0:0:1" Storyboard.TargetName="pr" Storyboard.TargetProperty="(Canvas.Left)"/> <DoubleAnimation From="0" To="200" Duration="0:0:1" Storyboard.TargetName="pr" Storyboard.TargetProperty="(Canvas.Top)"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Window.Triggers> Marek Tabędzki 46/62

47 <Canvas> <Rectangle Name="pr" Width="20" Height="20" Fill="Orange" Stroke="Black" StrokeThickness="2"/> </Canvas> Marek Tabędzki 47/62

48 Inne właściwości animacji: <Storyboard> <DoubleAnimation From="0" To="300" BeginTime="0:0:2" AutoReverse="True" RepeatBehavior="Forever" AccelerationRatio="0.2" DecelerationRatio="0.2" Duration="0:0:1" Storyboard.TargetName="pr" Storyboard.TargetProperty="(Canvas.Left)"/> <DoubleAnimation From="0" To="200" BeginTime="0:0:2" AutoReverse="True" RepeatBehavior="Forever" AccelerationRatio="0.2" DecelerationRatio="0.2" Duration="0:0:1" Storyboard.TargetName="pr" Storyboard.TargetProperty="(Canvas.Top)"/> </Storyboard> Marek Tabędzki 48/62

49 Posługiwanie się animacjami Co animować? Jeśli chcemy, by elementy pojawiały się i znikały: Opacity. Jeśli chcemy przemieszczać elementy: Canvas.Left, Canvas.Top (jeśli kontenerem jest Canvas), ewentualnie Margin lub/i Padding (przy pomocy ThicknessAnimation), ewentualnie MinWidth i MinHeight kolumny lub wiersza w Gridzie. RenderTransform aby przemieszczać (TranslateTransform), obracać (RotateTransform), skalować (ScaleTransform) elementy. Działają szybciej niż animacja własności określających rozmiar czy pozycję. ColorAnimation aby modyfikować własności pędzla. Marek Tabędzki 49/62

50 Animacja transformacji Każdy element ma dwa rodzaje transformacji: RenderTransform (stosowana przed wyświetleniem obiektu) i LayoutTransform (stosowana przed ułożeniem elementów przez kontener). (Animacja nie może stworzyć transformacji, a jedynie animować własności istniejącej.) Przykład: obracający się przycisk. <Button RenderTransformOrigin="0.5,0.5"> <Button.RenderTransform> <RotateTransform/> </Button.RenderTransform> OK </Button> Marek Tabędzki 50/62

51 EventTrigger do uruchomienia animacji: <EventTrigger RoutedEvent="Button.MouseEnter"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty= "RenderTransform.Angle" To="360" Duration= "0:0:1" RepeatBehavior="Forever"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> Marek Tabędzki 51/62

52 I do zakończenia (powrotu do stanu początkowego nie określamy wartości docelowej): <EventTrigger RoutedEvent="Button.MouseLeave"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty= "RenderTransform.Angle" Duration="0:0:0.2"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> Marek Tabędzki 52/62

53 Parametry przycisku możemy ustawić w stylu: <Style TargetType="Button"> <Setter Property="Margin" Value="3" /> <Setter Property="Padding" Value="20,3"/> <Setter Property="HorizontalAlignment" Value="Center"/> <Setter Property="VerticalAlignment" Value="Center"/> <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/> <Setter Property="RenderTransform"> <Setter.Value> <RotateTransform></RotateTransform> </Setter.Value> </Setter> <Style.Triggers> <EventTrigger... <EventTrigger... </Style.Triggers> </Style> Marek Tabędzki 53/62

54 Teraz każdy z przycisków będzie używał tej animacji: <StackPanel> <Button>jeden</Button> <Button>dwa</Button> <Button>trzy</Button> <Button>cztery</Button> <Button>pięć</Button> </StackPanel> Marek Tabędzki 54/62

55 Jeśli wymienimy RenderTransform na LayoutTransform: Marek Tabędzki 55/62

56 Animowanie pędzli Kolor pędzla animujemy przy pomocy klasy ColorAnimation. Wymaga stworzenia pędzla: <Ellipse Stretch="Uniform" Margin="3" Name="elipsa"> <Ellipse.Fill> <RadialGradientBrush> <GradientStop Color="Yellow" Offset="0"/> <GradientStop Color="LawnGreen" Offset="1"/> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> Marek Tabędzki 56/62

57 Teraz możemy ustawić jego właściwości: <BeginStoryboard> <Storyboard> <ColorAnimation Storyboard.TargetName="elipsa" To="DeepSkyBlue" Storyboard.TargetProperty= "Fill.GradientStops[1].Color" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever"/> </Storyboard> </BeginStoryboard> Marek Tabędzki 57/62

58 PointAnimation pozwala przemieszczać punkt (działa to jak DoubleAnimation składowej X i Y). Dzięki temu możemy np. modyfikować kształt figury zbudowanej z punktów. W poniższym przykładzie animujemy centralny punkt gradientu radialnego. <PointAnimation Storyboard.TargetName="elipsa" Storyboard.TargetProperty="Fill.GradientOrigin" From="0.7,0.3" To="0.3,0.7" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" /> Marek Tabędzki 58/62

Jarosław Kuchta Podstawy Programowania Obiektowego. Podstawy grafiki obiektowej

Jarosław Kuchta Podstawy Programowania Obiektowego. Podstawy grafiki obiektowej Jarosław Kuchta Podstawy Programowania Obiektowego Podstawy grafiki obiektowej Zagadnienia Grafika proceduralna grafika obiektowa Grafika WPF dualizm XAML C# Właściwości obiektów graficznych edycja właściwości

Bardziej szczegółowo

Budowa aplikacji w technologii.net wykład 11 Animacje

Budowa aplikacji w technologii.net wykład 11 Animacje Budowa aplikacji w technologii.net wykład 11 Animacje 1/52 Wykonanie animacji w Windows Forms, MFS, Swingu, etc. opierało się na timerach i własnej funkcji rysującej: 1. Stworzenie timera, który co określoną

Bardziej szczegółowo

Budowa aplikacji w technologii.net wykład 10 Kształty, pędzle, transformacje, ścieżki

Budowa aplikacji w technologii.net wykład 10 Kształty, pędzle, transformacje, ścieżki Budowa aplikacji w technologii.net wykład 10 Kształty, pędzle, transformacje, ścieżki 1/58 Kształty Najprostszy sposób rysowania własnej zawartości w WPF, to wykorzystanie kształtów. Shapes klasy reprezentujące

Bardziej szczegółowo

narzędzie Linia. 2. W polu koloru kliknij kolor, którego chcesz użyć. 3. Aby coś narysować, przeciągnij wskaźnikiem w obszarze rysowania.

narzędzie Linia. 2. W polu koloru kliknij kolor, którego chcesz użyć. 3. Aby coś narysować, przeciągnij wskaźnikiem w obszarze rysowania. Elementy programu Paint Aby otworzyć program Paint, należy kliknąć przycisk Start i Paint., Wszystkie programy, Akcesoria Po uruchomieniu programu Paint jest wyświetlane okno, które jest w większej części

Bardziej szczegółowo

4. Rysowanie krzywych

4. Rysowanie krzywych 1. Operator plot y x \begin{tikzpicture} \draw[->] (-0.2,0) -- (4.2,0) node[right] {$x$}; \draw[->] (0,-1.2) -- (0,4.2) node[above] {$y$}; \draw (3,4) -- (3,3) plot coordinates{(2,3) (3,0) (4,3)}; \end{tikzpicture}

Bardziej szczegółowo

Windows Presentation Foundation

Windows Presentation Foundation Windows Presentation Foundation Tworzenie interfejsu użytkownika Współpraca projektanta i programisty (XAML) Interfejsy atrakcyjniejsze graficznie (np. 3D) Aplikacje internetowe (XBAP) Użycie Layoutów

Bardziej szczegółowo

CorelDRAW. wprowadzenie

CorelDRAW. wprowadzenie CorelDRAW wprowadzenie Źródło: Podręcznik uŝytkownika pakietu CorelDRAW Graphics Suite 12 Rysowanie linii 1. Otwórz program CorelDRAW. 2. Utwórz nowy rysunek i zapisz go w swoich dokumentach jako [nazwisko]_1.cdr

Bardziej szczegółowo

Grażyna Koba. Grafika komputerowa. materiały dodatkowe do podręcznika. Informatyka dla gimnazjum

Grażyna Koba. Grafika komputerowa. materiały dodatkowe do podręcznika. Informatyka dla gimnazjum Grażyna Koba Grafika komputerowa materiały dodatkowe do podręcznika Informatyka dla gimnazjum Rysunki i animacje w Edytorze postaci 1. Rysunek w Edytorze postaci Edytor postaci (rys. 1.) jest częścią programu

Bardziej szczegółowo

Spis treści. Część I Przygotowanie środowiska... 11. Część II Język C#... 19. Wstęp... 9

Spis treści. Część I Przygotowanie środowiska... 11. Część II Język C#... 19. Wstęp... 9 Spis treści Wstęp... 9 Część I Przygotowanie środowiska... 11 Rozdział 1. Przygotowanie środowiska Orcas... 13 Pobieranie aplikacji... 14 Pobieranie alternatywnego instalatora... 15 Instalacja... 15 Konfiguracja

Bardziej szczegółowo

Kurs Adobe Photoshop Elements 11

Kurs Adobe Photoshop Elements 11 Kurs Adobe Photoshop Elements 11 Gladiatorx1 Kształty, kształty własne 2015-01- 01 Spis treści Wstęp... 2 Kształty... 2 Opcje narzędzia... 2 Rysujemy kształty... 5 Opcje dodawania, odejmowania obszaru

Bardziej szczegółowo

Dodatek A. Palety. QuarkXPress 4.1. Projekty praktyczne. Podstawowe palety

Dodatek A. Palety. QuarkXPress 4.1. Projekty praktyczne. Podstawowe palety Dodatek A. Palety Podstawowe palety Paleta Tools, czyli paleta narzędziowa. Jest to typowa paleta pływająca, w której zostały umieszczone podstawowe narzędzia. Rysunek A 1. Paleta Tools Item narzędzie

Bardziej szczegółowo

Ćw. I Projektowanie opakowań transportowych cz. 1 Ćwiczenia z Corel DRAW

Ćw. I Projektowanie opakowań transportowych cz. 1 Ćwiczenia z Corel DRAW Ćw. I Projektowanie opakowań transportowych cz. 1 Ćwiczenia z Corel DRAW Celem ćwiczenia jest wstępne przygotowanie do wykonania projektu opakowania transportowego poprzez zapoznanie się z programem Corel

Bardziej szczegółowo

Przetwarzanie grafiki rastrowej na wektorową

Przetwarzanie grafiki rastrowej na wektorową Przetwarzanie grafiki rastrowej na wektorową Inaczej wektoryzacja, lub trasowanie, czyli zastąpienie rysunku rastrowego rysunkiem wektorowym. Wykonanie: Piotr Dróżdż Podstawowe różnice między grafiką wektorową,

Bardziej szczegółowo

Techniki wstawiania tabel

Techniki wstawiania tabel Tabele w Wordzie Tabela w Wordzie to uporządkowany układ komórek w postaci wierszy i kolumn, w które może być wpisywany tekst lub grafika. Każda komórka może być formatowana oddzielnie. Możemy wyrównywać

Bardziej szczegółowo

Wprowadzenie do rysowania w 3D. Praca w środowisku 3D

Wprowadzenie do rysowania w 3D. Praca w środowisku 3D Wprowadzenie do rysowania w 3D 13 Praca w środowisku 3D Pierwszym krokiem niezbędnym do rozpoczęcia pracy w środowisku 3D programu AutoCad 2010 jest wybór odpowiedniego obszaru roboczego. Można tego dokonać

Bardziej szczegółowo

AUTOCAD teoria i zadania z podstaw rysowania Rysowanie linii, prostej, półprostej, punktu, trasy, polilinii. Zadania geodezyjne.

AUTOCAD teoria i zadania z podstaw rysowania Rysowanie linii, prostej, półprostej, punktu, trasy, polilinii. Zadania geodezyjne. AUTOCAD teoria i zadania z podstaw rysowania Rysowanie linii, prostej, półprostej, punktu, trasy, polilinii. Zadania geodezyjne. RYSOWANIE 2D Polecenie LINIA Polecenie LINIA tworzy linię, której punkty

Bardziej szczegółowo

WIZUALIZACJA INFORMACJI TEKSTOWEJ WSTĘP DO HTML 5 CANVAS

WIZUALIZACJA INFORMACJI TEKSTOWEJ WSTĘP DO HTML 5 CANVAS WIZUALIZACJA INFORMACJI TEKSTOWEJ WSTĘP DO HTML 5 CANVAS Autor prezentacji: Michał Kołkowski Promotor: prof dr. hb. Włodzisław Duch SPIS TREŚCI 1. Ogólnie o Canvasie 2. Utworzenie szablonu do pracy z Canvas

Bardziej szczegółowo

Adobe InDesign lab.1 Jacek Wiślicki, Paweł Kośla. Spis treści: 1 Podstawy pracy z aplikacją Układ strony... 2.

Adobe InDesign lab.1 Jacek Wiślicki, Paweł Kośla. Spis treści: 1 Podstawy pracy z aplikacją Układ strony... 2. Spis treści: 1 Podstawy pracy z aplikacją... 2 1.1 Układ strony... 2 strona 1 z 7 1 Podstawy pracy z aplikacją InDesign jest następcą starzejącego się PageMakera. Pod wieloma względami jest do niego bardzo

Bardziej szczegółowo

KGGiBM GRAFIKA INŻYNIERSKA Rok III, sem. VI, sem IV SN WILiŚ Rok akademicki 2011/2012

KGGiBM GRAFIKA INŻYNIERSKA Rok III, sem. VI, sem IV SN WILiŚ Rok akademicki 2011/2012 Rysowanie precyzyjne 7 W ćwiczeniu tym pokazane zostaną wybrane techniki bardzo dokładnego rysowania obiektów w programie AutoCAD 2012, między innymi wykorzystanie punktów charakterystycznych. Narysować

Bardziej szczegółowo

Następnie zdefiniujemy utworzony szkic jako blok, wybieramy zatem jak poniżej

Następnie zdefiniujemy utworzony szkic jako blok, wybieramy zatem jak poniżej Zadanie 1 Wykorzystanie opcji Blok, Podziel oraz Zmierz Funkcja Blok umożliwia zdefiniowanie dowolnego złożonego elementu rysunkowego jako nowy blok a następnie wykorzystanie go wielokrotnie w tworzonym

Bardziej szczegółowo

1. Umieść kursor w miejscu, w którym ma być wprowadzony ozdobny napis. 2. Na karcie Wstawianie w grupie Tekst kliknij przycisk WordArt.

1. Umieść kursor w miejscu, w którym ma być wprowadzony ozdobny napis. 2. Na karcie Wstawianie w grupie Tekst kliknij przycisk WordArt. Grafika w dokumencie Wprowadzanie ozdobnych napisów WordArt Do tworzenia efektownych, ozdobnych napisów służy obiekt WordArt. Aby wstawić do dokumentu obiekt WordArt: 1. Umieść kursor w miejscu, w którym

Bardziej szczegółowo

Ćwiczenie 1 Automatyczna animacja ruchu

Ćwiczenie 1 Automatyczna animacja ruchu Automatyczna animacja ruchu Celem ćwiczenia jest poznanie procesu tworzenia automatycznej animacji ruchu, która jest podstawą większości projektów we Flashu. Ze względu na swoją wszechstronność omawiana

Bardziej szczegółowo

XAML Extensible Application Markup Language

XAML Extensible Application Markup Language XAML Extensible Application Markup Language Opis i zastosowania... Maciej Poniedziałek WfiIS IS rok 5 XAML: Język oparty o XML zoptymalizowanym do opisu bogatych, wizualnych interfejsów, takich jak tworzone

Bardziej szczegółowo

Obsługa programu Paint. mgr Katarzyna Paliwoda

Obsługa programu Paint. mgr Katarzyna Paliwoda Obsługa programu Paint. mgr Katarzyna Paliwoda Podstawowo program mieści się w Systemie a dojście do niego odbywa się przez polecenia: Start- Wszystkie programy - Akcesoria - Paint. Program otwiera się

Bardziej szczegółowo

Inkscape. Narzędzia informatyki

Inkscape. Narzędzia informatyki Inkscape Narzędzia informatyki Inkscape Narzędzie do tworzenia grafiki wektorowej kompatybilnej z formatem SVG Rozwijane od 2003 r. Dostępne dla Windows, Mac OS X i Linux a Dostępne na licencji GNU www.inkscape.org

Bardziej szczegółowo

Wymiarowanie i teksty. Polecenie:

Wymiarowanie i teksty. Polecenie: 11 Wymiarowanie i teksty Polecenie: a) Utwórz nowy rysunek z pięcioma warstwami, dla każdej warstwy przyjmij inny, dowolny kolor oraz grubość linii. Następnie narysuj pokazaną na rysunku łamaną warstwie

Bardziej szczegółowo

GIMP Grafika rastrowa (Ćwiczenia cz. 2)

GIMP Grafika rastrowa (Ćwiczenia cz. 2) Zjazd 1 GIMP Grafika rastrowa (Ćwiczenia cz. 2) Zaznaczenia Aby zacząć profesjonalnie rysować w programie GIMP należy opanować tematykę zaznaczeń. Zaznaczenia (inaczej maski) służą do zaznaczania obszarów

Bardziej szczegółowo

b) Dorysuj na warstwie pierwszej (1) ramkę oraz tabelkę (bez wymiarów) na warstwie piątej (5) według podanego poniżej wzoru:

b) Dorysuj na warstwie pierwszej (1) ramkę oraz tabelkę (bez wymiarów) na warstwie piątej (5) według podanego poniżej wzoru: Wymiarowanie i teksty 11 Polecenie: a) Utwórz nowy rysunek z pięcioma warstwami, dla każdej warstwy przyjmij inny, dowolny kolor oraz grubość linii. Następnie narysuj pokazaną na rysunku łamaną na warstwie

Bardziej szczegółowo

Programowanie obiektowe i zdarzeniowe wykład 1 Wprowadzenie do programowania zdarzeniowego

Programowanie obiektowe i zdarzeniowe wykład 1 Wprowadzenie do programowania zdarzeniowego Programowanie obiektowe i zdarzeniowe wykład 1 Wprowadzenie do programowania zdarzeniowego 1/34 Wymagania wstępne: Znajomość podstaw programowania. Efekty kształcenia: Umiejętność tworzenia prostych aplikacji

Bardziej szczegółowo

4.3 WITRAś. 1. UŜywając polecenia Linia (_Line) narysować odcinek, podając jako punkt początkowy współrzędną 90,-300 i punkt końcowy 90,55.

4.3 WITRAś. 1. UŜywając polecenia Linia (_Line) narysować odcinek, podając jako punkt początkowy współrzędną 90,-300 i punkt końcowy 90,55. 4.3 WITRAś 1. UŜywając polecenia Linia (_Line) narysować odcinek, podając jako punkt początkowy współrzędną 90,-300 i punkt końcowy 90,55. 2. Narysować głowicę słupa, rozpoczynając od narysowania górnego

Bardziej szczegółowo

RYSUNEK TECHNICZNY I GEOMETRIA WYKREŚLNA INSTRUKCJA DOM Z DRABINĄ I KOMINEM W 2D

RYSUNEK TECHNICZNY I GEOMETRIA WYKREŚLNA INSTRUKCJA DOM Z DRABINĄ I KOMINEM W 2D Politechnika Białostocka Wydział Budownictwa i Inżynierii Środowiska Zakład Informacji Przestrzennej Inżynieria Środowiska INSTRUKCJA KOMPUTEROWA z Rysunku technicznego i geometrii wykreślnej RYSUNEK TECHNICZNY

Bardziej szczegółowo

Tematy lekcji zajęć komputerowych klasa 5b grupa 1 i grupa 2

Tematy lekcji zajęć komputerowych klasa 5b grupa 1 i grupa 2 Tematy lekcji zajęć komputerowych klasa 5b grupa 1 i grupa 2 1 Program nauczania. Przedmiotowy system oceniania. Regulamin pracowni komputerowej. - 7 punktów regulaminu potrafi powiedzieć, czego się będzie

Bardziej szczegółowo

Praca z Inkscape. 1. Klonowanie obiektów.

Praca z Inkscape. 1. Klonowanie obiektów. Praca z Inkscape 1. Klonowanie obiektów. Program posiada dosyć potężne narzędzie do klonowania obiektów i ścieżek wektorowych. Z pozoru dosyć toporne, jednak pozwalające na tworzenie zaawansowanych struktur,

Bardziej szczegółowo

Ćwiczenie 14 Dmuchawce

Ćwiczenie 14 Dmuchawce Dmuchawce Celem ćwiczenia jest wykorzystanie właściwości programu Flash do generowania animacji o charakterze losowym. Prezentowany efekt można wykorzystać do wielu różnych celów np. spadające liście,

Bardziej szczegółowo

Rysowanie precyzyjne. Polecenie:

Rysowanie precyzyjne. Polecenie: 7 Rysowanie precyzyjne W ćwiczeniu tym pokazane zostaną różne techniki bardzo dokładnego rysowania obiektów w programie AutoCAD 2010, między innymi wykorzystanie punktów charakterystycznych. Z uwagi na

Bardziej szczegółowo

Aby nadać jej pożądaną postać należy w pliku Window1.xaml stworzyć definicję swojego stylu modyfikując ręcznie postać zapisu XAML:

Aby nadać jej pożądaną postać należy w pliku Window1.xaml stworzyć definicję swojego stylu modyfikując ręcznie postać zapisu XAML: Lab8 WPF Zad1 : - lista z językami i flagami + wiązanie danych z obiektu przerabiana na ComboBox - fisheye przegląd obrazków lupa (obrazki umieszczone na sztywno) - wyświetlenie galerii zdjęć zapisanej

Bardziej szczegółowo

Multimedia i interfejsy. Ćwiczenie 5 HTML5

Multimedia i interfejsy. Ćwiczenie 5 HTML5 Multimedia i interfejsy Ćwiczenie 5 HTML5 Celem ćwiczenia jest poznanie nowych elementów wprowadzonych w HTML 5, do których należą m.in. video oraz canvas. Poniższy opis przedstawia sposób użycia tych

Bardziej szczegółowo

WASM AppInventor Lab 3. Rysowanie i animacja po kanwie PODSTAWY PRACY Z KANWAMI

WASM AppInventor Lab 3. Rysowanie i animacja po kanwie PODSTAWY PRACY Z KANWAMI Rysowanie i animacja po kanwie PODSTAWY PRACY Z KANWAMI Kanwa, to komponent służący do rysowania. Można ją dodać w Designerze przeciągając komponent Canvas z sekcji Basic. W celu ustawienia obrazka jako

Bardziej szczegółowo

Silverlight. Od podstaw

Silverlight. Od podstaw Silverlight. Od podstaw Autor: Pawe³ Maciejewski, Pawe³ Redmerski ISBN: 978-83-246-1984-9 Tytu³ orygina³u: COM+ Developer's Guide Format: 158x235, stron: 208 Silverlight nowy sposób na tworzenie aplikacji

Bardziej szczegółowo

Jak uzyskać efekt 3D na zdjęciach z wykorzystaniem programu InkScape

Jak uzyskać efekt 3D na zdjęciach z wykorzystaniem programu InkScape Jak uzyskać efekt 3D na zdjęciach z wykorzystaniem programu InkScape Program InkScape jest bezpłatnym polskojęzycznym programem grafiki wektorowej do pobrania ze strony http://www.dobreprogramy.pl/inkscape,program,windows,12218.html.

Bardziej szczegółowo

PyX jest pakietem Pythona do grafiki wektorowej. Pozawala zatem tworzyd pliki EPS oraz PDF.

PyX jest pakietem Pythona do grafiki wektorowej. Pozawala zatem tworzyd pliki EPS oraz PDF. PyX jest pakietem Pythona do grafiki wektorowej. Pozawala zatem tworzyd pliki EPS oraz PDF. Aby go zainstalowad należy rozpakowad pakiet o nazwie PyX-0.10 do odpowiedniego katalogu. Będzie on dostępny

Bardziej szczegółowo

Utworzenie aplikacji mobilnej Po uruchomieniu Visual Studio pokazuje się ekran powitalny. Po lewej stronie odnośniki do otworzenia lub stworzenia

Utworzenie aplikacji mobilnej Po uruchomieniu Visual Studio pokazuje się ekran powitalny. Po lewej stronie odnośniki do otworzenia lub stworzenia Utworzenie aplikacji mobilnej Po uruchomieniu Visual Studio pokazuje się ekran powitalny. Po lewej stronie odnośniki do otworzenia lub stworzenia nowego projektu (poniżej są utworzone projekty) Po kliknięciu

Bardziej szczegółowo

Narzędzia programu Paint

Narzędzia programu Paint Okno programu Paint Narzędzia programu Paint Na karcie Start znajduje się przybornik z narzędziami. Narzędzia te są bardzo przydatne w pracy z programem. Można nimi rysować i malować, kolorować i pisać,

Bardziej szczegółowo

Adobe InDesign rysowanie obiektów wektorowych- przygotowanie pracy

Adobe InDesign rysowanie obiektów wektorowych- przygotowanie pracy Adobe InDesign rysowanie obiektów wektorowych- przygotowanie pracy Narzędzia: (Window>Tools) Pathfinder: (Window>Objects & Layout>Pathfinder) Obrys: (Window>Stroke) Próbki koloru: (Window>Swatches) Kolor:

Bardziej szczegółowo

Szybkie tworzenie grafiki w GcIde

Szybkie tworzenie grafiki w GcIde Szybkie tworzenie grafiki w GcIde Opracował: Ryszard Olchawa Poniższy opis dotyczy aplikacji okienkowej w systemie Windows lub Linux bazującej na obiektowej bibliotece rofrm stworzonej w środowisku GcIde.

Bardziej szczegółowo

1. Wprowadzenie do WPF i XAML. Tworzenie interfejsu użytkownika.

1. Wprowadzenie do WPF i XAML. Tworzenie interfejsu użytkownika. Tematy zajęć: 1. Wprowadzenie do WPF i XAML. Tworzenie interfejsu użytkownika. 2. Posługiwanie się podstawowymi kontrolkami. 3. Własności i zdarzenia w WPF. 4. Zadania aplikacji. Okna. 5. Polecenia. Zasoby.

Bardziej szczegółowo

Systemy multimedialne 2015

Systemy multimedialne 2015 Systemy multimedialne 2015 Nazwa nowej warstwy nie ma znaczenia pod względem funkcjonalnym. Warto jednak ją nadać, łatwiej możemy się wtedy poruszać po bardziej rozbudowanym projekcie. Domyślny rozmiar

Bardziej szczegółowo

MODYFIKACJA, EDYCJA OBIEKTÓW W AUTOCADZie Polecenia: SKALA, FAZUJ, ZAOKRĄGL.

MODYFIKACJA, EDYCJA OBIEKTÓW W AUTOCADZie Polecenia: SKALA, FAZUJ, ZAOKRĄGL. MODYFIKACJA, EDYCJA OBIEKTÓW W AUTOCADZie Polecenia: SKALA, FAZUJ, ZAOKRĄGL. SKALA _SCALE Polecenie SKALA pozwala na zmianę wielkości narysowanych obiektów. Skalowanie obiektów dokonywane jest przy użyciu

Bardziej szczegółowo

Animacje cz. 2. Rysujemy koło zębate

Animacje cz. 2. Rysujemy koło zębate Animacje cz. 2 1. Do wykonania poniższej animacji będziemy potrzebować dodatkowego desenia. Znajduje się on w folderze z instrukcją, żeby program Gimp mógł z niego skorzystać musimy wskazać mu ścieżkę

Bardziej szczegółowo

Photoshop. Tworzenie tekstu

Photoshop. Tworzenie tekstu Photoshop Tworzenie tekstu Wykład 6 Autor: Elżbieta Fedko O czym będziemy mówić? Ustawienia tekstu na palecie Typografia. Ustawienia rodzaju tekstu Ustawienia tekstu dostępne na palecie Akapit Efekty specjalne

Bardziej szczegółowo

9. Wymiarowanie. 9.1 Wstęp. 9.2 Opis funkcje wymiarowania. Auto CAD 14 9-1

9. Wymiarowanie. 9.1 Wstęp. 9.2 Opis funkcje wymiarowania. Auto CAD 14 9-1 Auto CAD 14 9-1 9. Wymiarowanie. 9.1 Wstęp Wymiarowanie elementów jest ważnym etapem tworzenia rysunku. Dzięki wymiarom wielkość elementów znajdujących się na rysunku zostaje jednoznacznie określona. 9.2

Bardziej szczegółowo

Modele zawartości. WPF wykorzystuje 4 modele zawartości kontrolek: ContentControl pojedyncza zawartość

Modele zawartości. WPF wykorzystuje 4 modele zawartości kontrolek: ContentControl pojedyncza zawartość WPF Programowanie w środowisku Windows Wykład 8-1 Kontrolki Modele zawartości WPF wykorzystuje 4 modele zawartości kontrolek: ContentControl pojedyncza zawartość Wykład 8-2 używane przez: Button, ButtonBase,

Bardziej szczegółowo

Baltie 3. Podręcznik do nauki programowania dla klas I III gimnazjum. Tadeusz Sołtys, Bohumír Soukup

Baltie 3. Podręcznik do nauki programowania dla klas I III gimnazjum. Tadeusz Sołtys, Bohumír Soukup Baltie 3 Podręcznik do nauki programowania dla klas I III gimnazjum Tadeusz Sołtys, Bohumír Soukup Czytanie klawisza lub przycisku myszy Czytaj klawisz lub przycisk myszy - czekaj na naciśnięcie Polecenie

Bardziej szczegółowo

O czym należy pamiętać?

O czym należy pamiętać? O czym należy pamiętać? Podczas pracy na płaszczyźnie możliwe jest wprowadzanie współrzędnych punktów w następujących układach: - układ współrzędnych kartezjańskich: x, y służy do rysowania odcinków o

Bardziej szczegółowo

Przewodnik po obszarze roboczym

Przewodnik po obszarze roboczym Przewodnik po obszarze roboczym Witamy w programie CorelDRAW, wszechstronnym programie do tworzenia rysunków wektorowych i projektów graficznych przeznaczonym dla profesjonalnych grafików. Projekty tworzone

Bardziej szczegółowo

SYSTEMY OPERACYJNE I SIECI KOMPUTEROWE

SYSTEMY OPERACYJNE I SIECI KOMPUTEROWE SYSTEMY OPERACYJNE I SIECI KOMPUTEROWE WINDOWS 1 SO i SK/WIN 006 Wydajność systemu 2 SO i SK/WIN Najprostszym sposobem na poprawienie wydajności systemu, jeżeli dysponujemy zbyt małą ilością pamięci RAM

Bardziej szczegółowo

WSTĘP; NARZĘDZIA DO RYSOWANIA

WSTĘP; NARZĘDZIA DO RYSOWANIA 1 z 5 Link do instalacji Gimpa Gimp WSTĘP; NARZĘDZIA DO RYSOWANIA Menu w Gimpie znajduje się w oknie głównym Gimpa i w oknie obrazu. Dostępne jest również po kliknięciu prawym klawiszem myszy na obraz.

Bardziej szczegółowo

Zaznaczanie komórek. Zaznaczenie pojedynczej komórki polega na kliknięciu na niej LPM

Zaznaczanie komórek. Zaznaczenie pojedynczej komórki polega na kliknięciu na niej LPM Zaznaczanie komórek Zaznaczenie pojedynczej komórki polega na kliknięciu na niej LPM Aby zaznaczyć blok komórek które leżą obok siebie należy trzymając wciśnięty LPM przesunąć kursor rozpoczynając od komórki

Bardziej szczegółowo

Opis Edytora postaci Logomocji

Opis Edytora postaci Logomocji Opis Edytora postaci Logomocji Przyciski na pasku narzędzi Przyciski Wygląd Opis W Edytorze postaci można otwierać pliki o rozszerzeniach: Otwórz plik postaci lgf (plik Edytora postaci), imp (plik projektu

Bardziej szczegółowo

GRAFIKA WEKTOROWA. WYKŁAD 1 Wprowadzenie do grafiki wektorowej. Jacek Wiślicki Katedra Informatyki Stosowanej

GRAFIKA WEKTOROWA. WYKŁAD 1 Wprowadzenie do grafiki wektorowej. Jacek Wiślicki Katedra Informatyki Stosowanej GRAFIKA WEKTOROWA WYKŁAD 1 Wprowadzenie do grafiki wektorowej Jacek Wiślicki Katedra Informatyki Stosowanej Grafika rastrowa i wektorowa W grafice dwuwymiarowej wyróżnia się dwa rodzaje obrazów: rastrowe,

Bardziej szczegółowo

Wstęp Pierwsze kroki Pierwszy rysunek Podstawowe obiekty Współrzędne punktów Oglądanie rysunku...

Wstęp Pierwsze kroki Pierwszy rysunek Podstawowe obiekty Współrzędne punktów Oglądanie rysunku... Wstęp... 5 Pierwsze kroki... 7 Pierwszy rysunek... 15 Podstawowe obiekty... 23 Współrzędne punktów... 49 Oglądanie rysunku... 69 Punkty charakterystyczne... 83 System pomocy... 95 Modyfikacje obiektów...

Bardziej szczegółowo

Obsługa programu Paint materiały szkoleniowe

Obsługa programu Paint materiały szkoleniowe Obsługa programu Paint materiały szkoleniowe Nota Materiał powstał w ramach realizacji projektu e-kompetencje bez barier dofinansowanego z Programu Operacyjnego Polska Cyfrowa działanie 3.1 Działania szkoleniowe

Bardziej szczegółowo

Kurs Adobe Photoshop Elements 11

Kurs Adobe Photoshop Elements 11 Kurs Adobe Photoshop Elements 11 Gladiatorx1 Gradient 2014-12- 27 Spis treści Gradient... 2 Opcje narzędzia... 2 Edytor gradientów... 8 Wypełnianie dokumentów i zaznaczeń gradientem... 12 Wykonał gladiatorx1

Bardziej szczegółowo

Edytor tekstu OpenOffice Writer Podstawy

Edytor tekstu OpenOffice Writer Podstawy Edytor tekstu OpenOffice Writer Podstawy Cz. 3. Rysunki w dokumencie Obiekt Fontwork Jeżeli chcemy zamieścić w naszym dokumencie jakiś efektowny napis, na przykład tytuł czy hasło promocyjne, możemy w

Bardziej szczegółowo

Paweł Kaźmierczak. styczeń 2009

Paweł Kaźmierczak. styczeń 2009 Wstęp Wstawianie i tworzenie grafiki w systemie składu tekstu LaTeX Instytut Matematyki i Informatyki PWSZ Płock styczeń 2009 Wstęp Kilka słów... Dzięki grafice, nasze dokumenty mają atrakcyjniejszą formę.

Bardziej szczegółowo

UNIWERSYTET RZESZOWSKI KATEDRA INFORMATYKI

UNIWERSYTET RZESZOWSKI KATEDRA INFORMATYKI UNIWERSYTET RZESZOWSKI KATEDRA INFORMATYKI LABORATORIUM TECHNOLOGIA SYSTEMÓW INFORMATYCZNYCH W BIOTECHNOLOGII Aplikacja bazodanowa: Cz. II Rzeszów, 2010 Strona 1 z 11 APLIKACJA BAZODANOWA MICROSOFT ACCESS

Bardziej szczegółowo

Usługi Informatyczne "SZANSA" - Gabriela Ciszyńska-Matuszek ul. Świerkowa 25, Bielsko-Biała

Usługi Informatyczne SZANSA - Gabriela Ciszyńska-Matuszek ul. Świerkowa 25, Bielsko-Biała Usługi Informatyczne "SZANSA" - Gabriela Ciszyńska-Matuszek ul. Świerkowa 25, 43-305 Bielsko-Biała NIP 937-22-97-52 tel. +48 33 488 89 39 zwcad@zwcad.pl www.zwcad.pl Aplikacja do rysowania wykresów i oznaczania

Bardziej szczegółowo

Przewodnik po soczewkach

Przewodnik po soczewkach Przewodnik po soczewkach 1. Wchodzimy w program Corel Draw 11 następnie klikamy Plik /Nowy => Nowy Rysunek. Następnie wchodzi w Okno/Okno dokowane /Teczka podręczna/ Przeglądaj/i wybieramy plik w którym

Bardziej szczegółowo

Skalowanie i ustawianie arkuszy/układów wydruku w AutoCAD autor: M. Motylewicz, 2012

Skalowanie i ustawianie arkuszy/układów wydruku w AutoCAD autor: M. Motylewicz, 2012 1 z 72 Rysunek rysujemy w skali rzeczywistej tzn. jeżeli pas ruchu ma szerokość 3,5m to wpisujemy w AutoCAD: 3,5 jednostki (mapa oczywiście również musi być wstawiona w skali 1:1). Opisany w dalszym ciągu

Bardziej szczegółowo

Pasek narzędziowy - rysowanie

Pasek narzędziowy - rysowanie Pasek narzędziowy - rysowanie Jednym z najczęściej wykorzystywanych narzędzi przy tworzeniu prezentacji multimedialnych są narzędzia do tworzenia obiektów graficznych. Aby była możliwość korzystania z

Bardziej szczegółowo

Ćwiczenie nr 1. Kliknij myszką w trójkąt, aby otrzymać dostęp do uchwytów obrotów:

Ćwiczenie nr 1. Kliknij myszką w trójkąt, aby otrzymać dostęp do uchwytów obrotów: Ćwiczenie nr 1 Wybierz narzędzie wielokąt, ustaw na pasku własności liczbę boków równą 3 i z pomocą klawisza Ctrl narysuj trójkąt równoboczny, po czym naciśnij spację, aby przełączyć się na wskaźnik: Kliknij

Bardziej szczegółowo

Pasek menu. Ustawienia drukowania

Pasek menu. Ustawienia drukowania Polecenie Ustawienia drukowania... z menu Plik pozwala określić urządzenie drukujące poprzez jego wybór z pola kombi. Urządzenie można skonfigurować poprzez przycisk właściwości. Otwiera się wówczas okno

Bardziej szczegółowo

Pascal - grafika. Uruchomienie trybu graficznego. Moduł graph. Domyślny tryb graficzny

Pascal - grafika. Uruchomienie trybu graficznego. Moduł graph. Domyślny tryb graficzny Moduł graph Pascal - grafika Pascal zawiera standardowy moduł do tworzenia obiektów graficznych linii, punktów, figur geometrycznych itp. Chcąc go użyć należy w programie (w nagłówku) wstawić deklarację:

Bardziej szczegółowo

PROGRAMOWANIE WINDOWS PRESENTATION FOUNDATION (AVALON) W JĘZYKACH XAML ORAZ C#

PROGRAMOWANIE WINDOWS PRESENTATION FOUNDATION (AVALON) W JĘZYKACH XAML ORAZ C# ZESZYTY NAUKOWE 93-107 Zbigniew ROSIEK PROGRAMOWANIE WINDOWS PRESENTATION FOUNDATION (AVALON) W JĘZYKACH XAML ORAZ C# Streszczenie W grudniu 2005 roku firma Microsoft zaprezentowała zestaw nowych bibliotek

Bardziej szczegółowo

- biegunowy(kołowy) - kursor wykonuje skok w kierunku tymczasowych linii konstrukcyjnych;

- biegunowy(kołowy) - kursor wykonuje skok w kierunku tymczasowych linii konstrukcyjnych; Ćwiczenie 2 I. Rysowanie precyzyjne Podczas tworzenia rysunków często jest potrzeba wskazania dokładnego punktu na rysunku. Program AutoCad proponuje nam wiele sposobów zwiększenia precyzji rysowania.

Bardziej szczegółowo

1. Druk akcydensowy wizytówki

1. Druk akcydensowy wizytówki 1. Druk akcydensowy wizytówki Rys. 1: Cel ćwiczenia 1.1. Projekt logo Rys. 2: Cel projektu logo Pierwszym etapem wykonywania ćwiczenia będzie projekt logo (symbolu graficznego) firmy (instytucji, organizacji),

Bardziej szczegółowo

1. OPEN OFFICE RYSUNKI

1. OPEN OFFICE RYSUNKI 1. 1 1. OPEN OFFICE RYSUNKI 1.1 Wiadomości podstawowe Po uruchomieniu programu Draw okno aplikacji wygląda jak na poniższym rysunku. Składa się ono z głównego okna, w którym edytuje się rysunek oraz czterech

Bardziej szczegółowo

Jarosław Kuchta. Podstawy Programowania Obiektowego. ćwiczenie 10. Podstawy grafiki w WPF

Jarosław Kuchta. Podstawy Programowania Obiektowego. ćwiczenie 10. Podstawy grafiki w WPF Jarosław Kuchta Podstawy Programowania Obiektowego ćwiczenie 10 Podstawy grafiki w WPF Wprowadzenie W tym ćwiczeniu rozpoczniemy tworzenie gry Wall Demolition. Jest to odmiana gry Blockout. W grze występuje

Bardziej szczegółowo

CorelDRAW. 1. Rysunek rastrowy a wektorowy. 2. Opis okna programu

CorelDRAW. 1. Rysunek rastrowy a wektorowy. 2. Opis okna programu 1. Rysunek rastrowy a wektorowy CorelDRAW Różnice między rysunkiem rastrowym (czasami nazywanym bitmapą) a wektorowym są olbrzymie. Szczególnie widoczne są podczas skalowania (czyli zmiany rozmiaru) rysunku

Bardziej szczegółowo

Wymagania edukacyjne na poszczególne stopnie zgodnie z obowiązującą podstawą programową

Wymagania edukacyjne na poszczególne stopnie zgodnie z obowiązującą podstawą programową Wymagania edukacyjne na poszczególne stopnie zgodnie z obowiązującą podstawą programową Przedmiot zajęcia komputerowe Klasa 4 dba o porządek na stanowisku komputerowym Komputer i praca w sieci komputerowej

Bardziej szczegółowo

Microsoft Small Basic

Microsoft Small Basic Microsoft Small Basic Okno grafiki Szacowany czas trwania lekcji: 1 godzina Okno grafiki Podczas tej lekcji uzyskasz informacje na temat: Instrukcji używających obiektu GraphicsWindow. Właściwości obiektu

Bardziej szczegółowo

Grafika Komputerowa Materiały Laboratoryjne

Grafika Komputerowa Materiały Laboratoryjne Grafika Komputerowa Materiały Laboratoryjne Laboratorium 9 Inkscape: tworzenie grafik do gier (część II) Wstęp W ramach dzisiejszych zajęć poznasz techniki tworzenia pseudotrójwymiarowych elementów do

Bardziej szczegółowo

Umieszczanie grafiki w dokumencie

Umieszczanie grafiki w dokumencie Umieszczanie grafiki w dokumencie Najczęstszym sposobem wstawiania grafiki do dokumentu jest wybranie z górnego menu polecenia Wstaw-->Obraz--Z pliku W tym oknie podajemy lokalizacje pliku, który zostanie

Bardziej szczegółowo

Adobe InDesign lab. 3 Jacek Wiślicki, Paweł Kośla

Adobe InDesign lab. 3 Jacek Wiślicki, Paweł Kośla Spis treści 1. Zaawansowane techniki pracy... 2 1.1. Tekst z wypełnieniem... 2 1.2. Stosowanie przeźroczystości i oblewania tekstem... 6 strona 1 z 9 1. Zaawansowane techniki pracy 1 W poprzednich instrukcjach

Bardziej szczegółowo

Rozdział VI. Tabele i ich możliwości

Rozdział VI. Tabele i ich możliwości Rozdział VI Tabele i ich możliwości 3.6. Tabele i ich możliwości W wielu dokumentach zachodzi konieczność przedstawienia danych w formie tabelarycznej. Dlatego też program OO Writer jest wyposażony w

Bardziej szczegółowo

Google Earth. Co to jest Google Earth? Co to jest KML? Skąd można pobrać Google Earth?

Google Earth. Co to jest Google Earth? Co to jest KML? Skąd można pobrać Google Earth? Google Earth Co to jest Google Earth? Google Earth jest to program umożliwiający wyświetlanie na trójwymiarowym modelu kuli ziemskiej zdjęć lotniczych/satelitarnych, zdjęć zrobionych z poziomu powierzchni

Bardziej szczegółowo

Podstawy pozycjonowania CSS

Podstawy pozycjonowania CSS Podstawy pozycjonowania CSS Żeby pokazać w jaki sposób przeglądarka rozkłada elementy na stronie posłużę się prostym przykładowym fragmentem kodu html. div id="before"

Bardziej szczegółowo

Cele: edycja i modyfikacja obiektów w programie AutoCAD. Stosowanie poleceń: SKALA, FAZUJ, ZAOKRĄGL. KORZYSTANIE Z UCHWYTÓW.

Cele: edycja i modyfikacja obiektów w programie AutoCAD. Stosowanie poleceń: SKALA, FAZUJ, ZAOKRĄGL. KORZYSTANIE Z UCHWYTÓW. MODYFIKACJA, EDYCJA OBIEKTÓW w programie AUTOCAD Polecenia: Część 2: SKALA, FAZUJ, ZAOKRĄGL. Uchwyty. Cele: edycja i modyfikacja obiektów Cele: edycja i modyfikacja obiektów w programie AutoCAD. Stosowanie

Bardziej szczegółowo

Zajęcia nr 15 JavaScript wprowadzenie do JavaScript

Zajęcia nr 15 JavaScript wprowadzenie do JavaScript Zajęcia nr 15 JavaScript wprowadzenie do JavaScript Prowadzący: Andrzej Gąsienica-Samek, strona kółka www.atinea.pl/kolko Wprowadzenie do jsfiddle.net Uruchom Chrome i wejdź na stronę http://jsfiddle.net.

Bardziej szczegółowo

Druga aplikacja Prymitywy, alpha blending, obracanie bitmap oraz mały zestaw przydatnych funkcji wyświetlających własnej roboty.

Druga aplikacja Prymitywy, alpha blending, obracanie bitmap oraz mały zestaw przydatnych funkcji wyświetlających własnej roboty. Przyszedł czas na rysowanie własnych figur, czyli prymitywy, obracanie bitmap, oraz alpha blending-czyli półprzezroczystość. Będę opisywał tylko rzeczy nowe-nie ma potrzeby abym się powtarzał. Zaczynajmny

Bardziej szczegółowo

Dodawanie grafiki i obiektów

Dodawanie grafiki i obiektów Dodawanie grafiki i obiektów Word nie jest edytorem obiektów graficznych, ale oferuje kilka opcji, dzięki którym można dokonywać niewielkich zmian w rysunku. W Wordzie możesz zmieniać rozmiar obiektu graficznego,

Bardziej szczegółowo

Adam Dudek, Systemy Multimedialne 2015

Adam Dudek, Systemy Multimedialne 2015 Adam Dudek, Systemy Multimedialne 2015 Logo GIMPA sympatyczna maskotka o imieniu WILBER. 1 3 4 2 5 1. Narzędzia główne zestaw przycisków z symbolami używany do wybierania narzędzi 2. Opcje narzędzi zawartość

Bardziej szczegółowo

1 TEMAT LEKCJI: 2 CELE LEKCJI: 3 METODY NAUCZANIA 4 ŚRODKI DYDAKTYCZNE. Scenariusz lekcji. Scenariusz lekcji. 2.1 Wiadomości: 2.

1 TEMAT LEKCJI: 2 CELE LEKCJI: 3 METODY NAUCZANIA 4 ŚRODKI DYDAKTYCZNE. Scenariusz lekcji. Scenariusz lekcji. 2.1 Wiadomości: 2. Motyle Scenariusz lekcji Scenariusz lekcji 1 TEMAT LEKCJI: Motyle 2 CELE LEKCJI: 2.1 Wiadomości: Uczeń potrafi: opisać sposób tworzenia animacji; opisać sposób zmiany postaci żółwia; wyjaśnić pojęcie klatki;

Bardziej szczegółowo

Użycie przestrzeni papieru i odnośników - ćwiczenie

Użycie przestrzeni papieru i odnośników - ćwiczenie Użycie przestrzeni papieru i odnośników - ćwiczenie Informacje ogólne Korzystanie z ćwiczeń Podczas rysowania w AutoCADzie, praca ta zwykle odbywa się w przestrzeni modelu. Przed wydrukowaniem rysunku,

Bardziej szczegółowo

Spis treści. Księgarnia PWN: Roland Zimek - SWiSH Max2 i SWiSH Max3. Wprowadzenie... 9

Spis treści. Księgarnia PWN: Roland Zimek - SWiSH Max2 i SWiSH Max3. Wprowadzenie... 9 Księgarnia PWN: Roland Zimek - SWiSH Max2 i SWiSH Max3 Spis treści Wprowadzenie... 9 1. Opis programu i instalacja... 13 1.1. Nowości w SWiSH Max2... 13 1.1.1. Wygląd okna programu... 13 1.1.2. Język skryptowy...

Bardziej szczegółowo

Ćwiczenie 5 Animacja tekstu

Ćwiczenie 5 Animacja tekstu Animacja tekstu W tym ćwiczeniu stworzymy animowany napis, np. KURS FLASHA. Pobierz przykład (http://jsekulska.kis.p.lodz.pl/studia.htm). Krok 1 Tworzenie tekstu Otwórz nowy plik i ustal rozmiar stołu

Bardziej szczegółowo

1. Dockbar, CMS + wyszukiwarka aplikacji Dodawanie portletów Widok zawartości stron... 3

1. Dockbar, CMS + wyszukiwarka aplikacji Dodawanie portletów Widok zawartości stron... 3 DODAJEMY TREŚĆ DO STRONY 1. Dockbar, CMS + wyszukiwarka aplikacji... 2 2. Dodawanie portletów... 3 Widok zawartości stron... 3 Omówienie zawartości portletu (usunięcie ramki itd.)... 4 3. Ikonki wybierz

Bardziej szczegółowo

MVVM i XAML w Visual Studio 2015 / Jacek Matulewski. Gliwice, cop Spis treści

MVVM i XAML w Visual Studio 2015 / Jacek Matulewski. Gliwice, cop Spis treści MVVM i XAML w Visual Studio 2015 / Jacek Matulewski. Gliwice, cop. 2016 Spis treści Część I Wzorzec MVVM. Podstawy XAML 7 Rozdział 1. Szybkie wprowadzenie do XAML 9 Wzorzec widoku autonomicznego 9 Tworzenie

Bardziej szczegółowo

Zadanie Wstaw wykres i dokonaj jego edycji dla poniższych danych. 8a 3,54 8b 5,25 8c 4,21 8d 4,85

Zadanie Wstaw wykres i dokonaj jego edycji dla poniższych danych. 8a 3,54 8b 5,25 8c 4,21 8d 4,85 Zadanie Wstaw wykres i dokonaj jego edycji dla poniższych danych Klasa Średnia 8a 3,54 8b 5,25 8c 4,21 8d 4,85 Do wstawienia wykresu w edytorze tekstu nie potrzebujemy mieć wykonanej tabeli jest ona tylko

Bardziej szczegółowo

Ćwiczenie 4 - Podstawy materiałów i tekstur. Renderowanie obrazu i animacji

Ćwiczenie 4 - Podstawy materiałów i tekstur. Renderowanie obrazu i animacji Ćwiczenie 4 - Podstawy materiałów i tekstur. Renderowanie obrazu i animacji Materiał jest zbiorem informacji o właściwościach powierzchni. Składa się na niego kolor, sposób odbijania światła i sposób nakładania

Bardziej szczegółowo