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" />

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.