Benefit portál
Pouze tento týden sleva až 80 % na e-learning týkající se Swift
30 % bodů zdarma na online výuku díky naší Slevové akci!

Vektorová grafika v C# .NET WPF - Kreslení dalších tvarů

V minulém tutoriálu, Vektorová grafika v C# .NET WPF - Úvod, jsme se uvedli do vektorové grafiky v C# .NET WPF a začali s kreslením základních tvarů. Dnes přejdeme k tvarům pokročilejším.

Path - Matematický zápis

Nyní přejdeme k cestám <Path>. Ty využijeme u tvarů vycházející např. z matematického vzorce, případně z datového zápisu bodů:

<Path Stroke="DarkBlue" StrokeThickness="2" Grid.Column="2" Grid.Row="0" Margin="5" Stretch="Uniform">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigureCollection>
                    <PathFigure StartPoint="0,20">
                        <PathFigure.Segments>
                            <PathSegmentCollection>
                                <QuadraticBezierSegment Point1="10,150" Point2="200,50" />
                            </PathSegmentCollection>
                        </PathFigure.Segments>
                    </PathFigure>
                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

Výsledek:

Používají se zde matematické vrcholy, jako např. QuadraticBezierSegment (Bézierovy křivky), které pojí čáru s <PathFigure StartPoint="0,20">, v našem případě parabola. Dále, aby se obraz nedeformoval při změně okna, ale hezky v poměru zvětšoval, použijeme parametr Stretch s hodnotou Uniform.

Path - Datový zápis

<Path> se dá zapsat i jako soubor instrukcí parametrem Data, v našem případě si nakreslíme opět primitivní čáru:

<Path Stroke="DarkGoldenRod" StrokeThickness="5" Stretch="Uniform" Grid.Column="2" Grid.Row="1" Data="M 0,00 C 50,50 20,250 200,25 H 50" />
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Výsledek:

Velké M označuje "MoveTo" a jedná se o absolutní umístění, malé m znamená umístění v relativních souřadnicích. Velké H označuje "LineTo“, malé písmeno je poté opět pro relativní umístění.

Zkusme si něco zajímavějšího:

<Path StrokeThickness="5" Stretch="Uniform" Grid.Column="0" Grid.Row="2" Margin="5"
              Data="m122,337c2.766151,8.272369 10.701385,-15.370941 13.49205,-4.029388c4.268234,13.285126 -17.094383,11.512512 -13.402222,24.248383c1.43734,15.111694 3.378983,30.196777 3.082054,
              45.425537c0.871315,11.088745 8.337242,19.651917 13.534843,28.50238c8.980682,6.523346 21.897232,1.595703 29.3647,-5.251465c8.393921,-6.943634 9.231735,-18.631378 17.571945,-25.90097c6.345062,
              -10.120544 10.713989,-21.04007 18.427032,-30.511871c4.249893,-12.268219 12.16864,-23.688141 13.550446,-37.227722c1.514603,-11.099579 5.235214,-21.871887 4.828583,-33.208282c1.097183,
              -13.394287 1.119064,-26.967194 -1.637421,-40.159882c1.394699,-12.029984 13.950974,-18.491516 21.032578,-27.101776c4.01207,-4.942551 6.152618,-4.343018 10.310196,-10.172546c11.167938,
              -5.908432 16.104675,-15.089813 27.128906,-20.449066c16.694336,-11.244766 34.838226,-21.066223 54.716309,-25.16333c9.237335,-3.763016 20.163879,-1.919632 29.756805,-3.091034c9.182922,
              3.406418 19.85675,3.327057 27.711609,9.4077c8.351837,5.928284 15.930634,12.843201 23.531586,19.683334c3.588348,9.894409 12.086639,17.042114 15.402161,27.137238c8.646118,16.991653 14.124695,
              35.325897 19.185303,53.633881c7.295197,29.703217 11.454102,60.504822 8.411041,91.075836c-1.128387,12.52063 -4.615723,24.73584 -7.296356,36.980133c-12.836548,
              44.277649 -42.349274,81.275787 -74.148254,113.660889c-17.034424,16.69165 -35.615021,31.719116 -53.633728,47.327209c-31.274841,24.452576 -59.372498,52.750122 -91.428467,76.246826c-20.16394,
              18.804565 -42.488953,35.132263 -62.479858,54.149841c-22.084564,19.894409 -42.555542,41.553406 -61.629837,64.30188c-9.155602,9.702698 -15.903915,21.358948 -24.461113,31.572327c-12.128693,
              17.472656 -22.909142,35.901001 -32.984081,54.615662c-13.433609,29.517761 -24.881279,60.505249 -27.25914,93.123657c-3.053789,30.451416 1.39102,61.052795 9.266321,90.460876c4.870268,
              24.175171 14.016878,47.217773 25.946459,68.751587c6.629242,10.837646 11.408119,22.913452 19.029892,33.068115c5.894478,5.882202 8.927315,14.809082 14.945488,19.739624c4.785774,
              3.942993 9.334564,9.259766 12.83046,14.216553c9.30648,3.78418 13.222198,15.558716 22.768555,19.307007c10.736481,12.271606 25.894684,19.91626 40.90062,25.682007c8.520172,
              2.887939 14.704224,10.488159 24.932892,10.456299c9.690491,2.550171 17.289398,4.50293 26.981079,7.823242c4.952133,1.014404 11.500229,1.266235 11.723831,2.842896c4.670822,
              -3.583252 0.001389,4.145142 3.90361,0.369629c9.7901,4.390625 21.664169,2.167725 31.791611,6.351318c11.264679,1.325562 22.820526,1.388794 33.850311,1.727173c9.027496,0.178101 19.667877,
              1.50354 29.936096,0.509521c11.597504,-0.931396 20.271332,0.44873 31.515106,-3.131226c7.596527,3.848633 17.491364,-0.932251 24.691895,-3.481079c9.40918,-0.103394 17.281799,-3.22937 26.476959,
              -5.081299c10.47345,-1.113159 19.213928,-7.042358 29.220367,-9.999878c8.36087,-3.867188 17.504639,-6.506714 25.285156,-11.547485c11.100739,-4.796387 22.229797,-11.350952 31.676605,-19.008423c7.720215,
              -4.404419 15.567719,-8.846191 21.011322,-16.115845c8.144043,-7.369141 15.730591,-14.790161 24.039795,-22.799438c5.863953,-9.665527 15.306702,-16.906982 19.988342,-27.297852c5.52301,-9.806519 11.936646,
              -19.40686 15.689026,-30.20105c5.629211,-13.197754 11.609375,-26.327148 14.115356,-40.547974c1.927795,-7.974976 3.890076,-15.941528 5.805176,-23.919678c1.821106,-10.319275 3.387756,-21.189575 3.346252,
              -32.230896c0.633545,-10.864197 2.436768,-21.581604 0.836426,-32.532471c-0.237854,-11.381104 -3.310608,-22.624207 -4.447693,-33.955994c-2.320862,-13.268005 -4.637024,-26.622375 -10.44165,-38.908569c-5.598083,
              -14.604065 -10.536072,-29.620056 -19.844604,-42.402771c-6.250671,-11.14563 -12.074219,-22.643555 -20.767578,-32.184082c-10.862793,-14.510193 -24.744019,-26.221863 -37.681152,-38.785217c-23.279175,
              -16.441406 -47.578278,-32.074768 -74.944092,-40.808838c-28.706329,-10.892639 -60.865448,-12.129578 -90.19342,-2.941284c-31.193573,10.328918 -60.82901,25.561523 -87.526306,44.695435c-31.864868,
              24.579285 -52.270798,62.574463 -56.688065,102.440369c0.290131,7.237244 -4.490402,23.296814 4.313232,24.609619c6.400055,-7.792786 8.417435,-18.42688 14.111389,-26.798462c6.463409,-9.432495 12.330444,
              -18.328003 21.023514,-25.946106c9.495132,-7.348999 16.735168,-15.104675 27.117981,-20.603577c11.834778,-3.730957 22.388184,-10.827576 34.506744,-13.472534c12.809937,-1.42981 25.222778,-6.273254 38.279022,
              -5.174622c-2.790314,2.230591 8.810333,-2.509094 7.165527,1.012024c9.393616,-1.364502 18.437927,-1.569336 27.775177,-0.199585c19.795898,-0.271362 38.945068,6.230042 57.133881,13.392944c5.380798,
              6.050903 14.096863,6.223938 17.925415,10.435242c2.56839,4.430603 10.03479,2.749634 8.775604,8.716003c10.05011,0.211426 11.889862,13.907593 20.437775,19.059326c6.953918,9.529236 13.413208,19.721375 18.838654,
              30.262817c3.725922,10.726501 9.660553,20.659485 11.283875,32.044983c6.203949,23.30542 8.900787,47.945496 4.965912,71.855652c-2.180725,27.930969 -12.650604,54.812927 -27.159424,78.592346c-12.747833,20.626099 -31.242737,
              37.226685 -51.640533,50.028809c-8.877106,2.734497 -16.40567,8.133057 -25.356415,10.787964c-21.703278,5.732422 -43.398102,12.223022 -65.969177,13.391724c-21.446442,1.316895 -43.237122,1.264038 -64.42627,-2.505249c-12.25,
              -2.625 -24.5,-5.25 -36.75,-7.875c-8.907715,-5.769897 -19.639404,-8.046143 -28.801834,-13.456543c-16.824844,-8.144531 -32.931229,-18.526245 -46.270813,-31.600586c-12.37796,-14.269165 -27.783859,-26.682251 -35.161377,
              -44.609863c-5.880753,-11.13501 -10.125275,-23.075562 -13.28093,-35.200317c-3.374939,-9.985107 -4.267006,-21.126404 -4.37764,-31.33551c-1.092094,-6.803528 -1.579865,-15.731812 -0.927223,-20.857544c2.112076,
              -9.985352 1.830795,-22.383362 5.005859,-32.957031c4.820129,-20.410889 9.730873,-41.06897 19.549553,-59.753906c6.054688,-14.436768 14.78891,-27.551453 22.390137,-41.202148c4.274612,-7.139771 8.916809,-14.162598 14.874268,
              -20.02655c3.699432,-8.616638 11.332565,-14.566895 15.746933,-22.5271c10.15065,-8.138306 17.221954,-19.631531 27.061951,-28.24585c13.351791,-13.218811 27.158371,-26.00824 41.313217,-38.347046c8.657532,-7.85675 19.726868,
              -11.828918 27.853668,-20.119019c5.358063,-8.054077 15.265991,-7.936218 21.906647,-14.507141c9.798157,-6.433105 19.118469,-14.156006 30.663849,-17.136108c10.635986,-3.683533 20.097931,-9.389282 30.219421,-14.038025c8.522583,
              -6.072815 16.019989,-8.651917 24.60022,-15.037476c6.820465,-5.085022 13.993744,-8.855408 20.724243,-15.254578c9.780396,-7.522217 19.462006,-15.329346 27.873444,-24.292053c8.95694,-2.578308 11.334442,-15.321289 19.921936,
              -18.624573c2.035675,-3.668823 3.935059,-6.971313 6.083527,-6.132935c-0.861542,-6.347717 5.171295,-1.461914 6.362305,-7.943115c9.36853,-9.396606 16.597961,-20.301575 24.407623,-30.928711c8.15564,-9.383911 13.870758,
              -19.970093 20.042267,-30.579712c7.794678,-8.798676 9.729431,-20.900818 17.091003,-29.95459c4.859009,-9.772766 7.483582,-20.49411 11.779114,-30.526764c4.791321,-11.901611 5.401489,-24.764099 10.405396,-36.50235c1.547485,
              -10.097809 4.700928,-19.814606 3.159546,-30.099915c-1.128967,-5.779968 3.939758,-16.686798 1.749451,-17.550415c0.387451,-9.356476 1.390137,-18.209747 -0.812988,-28.840942c-2.230347,-11.325653 -2.008728,-23.09375 -5.786194,
              -34.185364c-3.056824,-9.72644 -3.757507,-22.663666 -9.755981,-29.852142c-3.334595,-8.33606 -5.209351,-17.055634 -8.874084,-25.297714c-10.924255,-19.987625 -20.938843,-40.682877 -35.220306,-58.592636c-12.570923,
              -16.416672 -28.121124,-30.223984 -43.859253,-43.493912c-12.505127,-9.422821 -26.800415,-16.100723 -40.716766,-23.137543c-42.24881,-19.358627 -91.552307,-26.508415 -136.68103,-13.503204c-49.935028,15.50486 -90.405289,
              52.838547 -117.629456,96.629532c-14.388214,21.508972 -25.197128,45.081741 -36.224701,68.394379c-7.733276,15.805129 -18.709221,32.087067 -16.270706,50.509857c0.667709,4.052948 2.996246,8.000671 6.865707,9.717163zm295,
              -128c-1.058746,2.692017 2.524536,-1.217636 0,0zm150,141c-1.058777,2.692017 2.524536,-1.217621 0,0zm-173,5c0.410806,1.803223 1.496033,5.9841 0.43457,1.738251l-0.43457,-1.738251zm-32,464c-1.058746,2.692017 2.524536,
              -1.217651 0,0zm64,12c-1.058746,2.692017 2.524536,-1.217651 0,0zm-203,51c-1.058762,2.692017 2.524536,-1.217652 0,0zm-58,70c1.352402,-1.352417 4.488083,-4.488098 1.303696,-1.303711l-1.303696,1.303711zm-106,
              158c-1.05875,2.692017 2.524529,-1.217651 0,0zm371,121c-1.058746,2.692017 2.524536,-1.217651 0,0zm-190,9c-1.048746,2.692017 2.524536,-1.217651 0,0zm57,7c-1.058746,2.692017 2.524536,-1.217651 0,0zm11,0c-1.058746,
              2.692017 2.524536,-1.217651 0,0z" Fill="#FF2C256C" />

Výsledek:

V dalším obrazci, opět pomocí <Path>, za pomocí datové vazby, nakreslíme hezkého hada. V dalším článku se dozvíte, kde k takovým informacím přijdeme.

Polygon

Poslední ze základních metod kreslení je <Polygon>, kde se určují čište body a ty se spojují či vyplňují pomocí Stroke nebo Fill:

<Polygon  Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="3"
    Stretch="Uniform" Margin="10"
    Points="0,10 40,5 20,27 22,14"
    Stroke="Purple"
    StrokeThickness="2" FillRule="Nonzero">
    <Polygon.Effect>
        <DropShadowEffect BlurRadius="15"/>
    </Polygon.Effect>
    <Polygon.Fill>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="Black" Offset="1"/>
            <GradientStop Color="#FF6C80FF"/>
        </LinearGradientBrush>
    </Polygon.Fill>
</Polygon>

Výsledek:

V našem případě se vykreslí modrá šipka s červeným ohraničením. Tu jsme okořenili jednoduchým efektem stínu, který přidal objektu na prostorovosti.

Závěr

Po dopsání článku jsem ještě přidal <Image> fotkou polygonu tak, aby byl patrný na první pohled deficit rastrové grafiky v přímém porovnání s vektorovou verzí:

<Image Grid.Row="2" Grid.Column="2" Stretch="Uniform" Source="sipka.png" Margin="10"/>

Všechny obrazce by se měly zvětšovat a zmenšovat spolu s oknem, bez žádného rozpadu či jiné ztráty informací, mimo rastrového příkladu v pravém dolním rohu. Aplikace tedy bude vypadat takto:

Příště si ukážeme jak do XAML vkládat SVG obrázky.


 

Stáhnout

Staženo 1x (123.69 kB)
Aplikace je včetně zdrojových kódů v jazyce C#

 

Všechny články v sekci
WPF - Okenní aplikace v C# .NET
Článek pro vás napsal Michal Kotek
Avatar
Jak se ti líbí článek?
1 hlasů
Autor se věnuje programování již od útlých let, aktuálně programuje rok v .NET framework pomocí C#.
Aktivity (3)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!