ITnetwork summer 2020
80 % bodů zdarma na online výuku díky naší Letní akci!
Pouze tento týden sleva až 80 % na e-learning týkající se PHP

Vektorová grafika v C # .NET WPF - Kreslenie ďalších tvarov

V minulom tutoriále, Vektorová grafika v C# .NET WPF - Úvod, sme sa uviedli do vektorovej grafiky v C# .NET WPF a začali s kreslením základných tvarov. Dnes prejdeme k tvarom pokročilejším.

Path - Matematický zápis

Teraz prejdeme k cestám <Path>. Tie využijeme u tvarov vychádzajúce napr. Z matematického vzorca, prípadne z dátového zápisu bodov:

<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ýsledok:

Používajú sa tu matematické vrcholy, ako napr. QuadraticBezierSegment (Bézierove krivky), ktoré spája čiaru s <PathFigure StartPoint="0,20">, v našom prípade parabola. Ďalej, aby sa obraz nedeformoval pri zmene okna, ale pekne v pomere zväčšoval, použijeme parameter Stretch s hodnotou Uniform.

Path - Dátový zápis

<Path> sa dá zapísať aj ako súbor inštrukcií parametrom Data, v našom prípade si nakreslíme opäť primitívne čiaru:

<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íjať nasledujúce firmy, ktoré možno hľadajú práve teba!

výsledok:

Veľké M označuje "MOVETO" a ide o absolútne umiestnenie, malé m znamená umiestnenie v relatívnych súradniciach. Veľké H označuje "Linet", malé písmeno je potom opäť pre relatívnu umiestnenie.

Skúsme si niečo zaujímavejšie:

<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ýsledok:

V ďalšom obrazcami, opäť pomocou <Path>, za pomocou dátovej väzby, nakreslíme pekného hada. V ďalšom článku sa dozviete, kde k takýmto informáciám prídeme.

Polygón

Posledný zo základných metód kreslenie je <Polygon>, kde sa určujú čítať body a tie sa spájajú či vypĺňajú pomocou Stroke alebo 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ýsledok:

V našom prípade sa vykreslí modrá šípka s červeným ohraničením. Tú sme okorenili jednoduchým efektom tieňa, ktorý pridal objektu na priestorovosti.

Záver

Po dopísaní článku som ešte pridal <Image> fotkou polygónu tak, aby bol viditeľný na prvý pohľad deficit rastrovej grafiky v priamom porovnaní s vektorovou verzií:

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

Všetky obrazce by sa mali zväčšovať a zmenšovať spolu s oknom, bez žiadneho rozpadu či iné straty informácií, mimo rastrového príklade v pravom dolnom rohu. Aplikácia teda bude vyzerať takto:

Nabudúce si ukážeme ako do XAML vkladať SVG obrázky.


 

Stiahnuť

Stiahnuté 1x (123.69 kB)
Aplikácia je vrátane zdrojových kódov v jazyku C#

 

Všetky články v sekcii
Okenné aplikácie v C # .NET WPF
Článok pre vás napísal Michal Kotek
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
Autor se věnuje programování již od útlých let, aktuálně programuje rok v .NET framework pomocí C#.
Aktivity (1)

 

 

Komentáre

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!