Vektor Grafik/SVG in einer Windows Forms Anwendung [VB.NET 2010]

  • VB.NET

Es gibt 20 Antworten in diesem Thema. Der letzte Beitrag () ist von Sonorpearl.

    VincentTB schrieb:

    WPF kann von Haus aus Pfade anzeigen (= Vektorgrafiken). Wieso willst du das eigentlich machen? WinForms basiert auf Rastergrafiken. Egal, so einfach geht das:

    VB.NET-Quellcode

    1. Dim viewBox = New Viewbox()
    2. Dim path = New Path()
    3. path.Fill = Brushes.Black
    4. path.Data = Geometry.Parse("M27.25,3.125h-22c-1.104,0-2,0.896-2,2v22c0,1.104,0.896,2,2,2h22c1.104,0,2-0.896,2-2v-22C29.25,4.021,28.354,3.125,27.25,3.125zM11.219,26.781h-4v-14h4V26.781zM9.219,11.281c-1.383,0-2.5-1.119-2.5-2.5s1.117-2.5,2.5-2.5s2.5,1.119,2.5,2.5S10.602,11.281,9.219,11.281zM25.219,26.781h-4v-8.5c0-0.4-0.403-1.055-0.687-1.213c-0.375-0.211-1.261-0.229-1.665-0.034l-1.648,0.793v8.954h-4v-14h4v0.614c1.583-0.723,3.78-0.652,5.27,0.184c1.582,0.886,2.73,2.864,2.73,4.702V26.781z")
    5. viewBox.Child = path
    6. ElementHost1.Child = viewBox


    Den Pfad bekommst du entweder direkt von den Seiten (zB hier: raphaeljs.com/icons/#linkedin ) oder du kannst ihn aus allen Formaten mit dem Adobe Illustrator extrahieren, einfach dieses Plugin dafür nutzen:
    mikeswanson.com/xamlexport/ (Es gibt bestimmt auch weiter Möglichkeiten, einfach mal Svg to xaml suchen)


    So ich habe mal deinen Rat befolgt. Meine SVG-Dateien enthalten mehrere Formen und Farben.
    Um mal ein Beispiel zu testen habe ich folgende Datei verwendet:
    upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg

    Jetzt habe ich die Datei mithilfe des SharpVectors C# Tools in eine SVG umgewandelt (Gibt ja auch wie du gesagt hast einige andere Methoden).
    Dies kam dabei raus:

    XML-Quellcode

    1. <Canvas Width="0" Height="0" ClipToBounds="True" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
    2. <Rectangle RadiusX="4" RadiusY="4" Fill="#FFFF9900" Name="background" Width="100" Height="100" Canvas.Left="0" Canvas.Top="0" />
    3. <Rectangle RadiusX="4" RadiusY="4" Fill="#FFFFB13B" Name="top_left" Width="50" Height="50" Canvas.Left="0" Canvas.Top="0" />
    4. <Rectangle RadiusX="4" RadiusY="4" Fill="#FFDE8500" Name="bottom_right" Width="50" Height="50" Canvas.Left="50" Canvas.Top="50" />
    5. <Canvas Name="circles"><Path Fill="#FFFF9900" Name="n">
    6. <Path.Data><EllipseGeometry RadiusX="18.4" RadiusY="18.4" Center="50,18.4" /></Path.Data></Path><Path Fill="#FFFF9900" Name="ne">
    7. <Path.Data><EllipseGeometry RadiusX="18.4" RadiusY="18.4" Center="72.4,27.6" /></Path.Data></Path><Path Fill="#FFFF9900" Name="e">
    8. <Path.Data><EllipseGeometry RadiusX="18.4" RadiusY="18.4" Center="81.6,50" /></Path.Data></Path><Path Fill="#FFFF9900" Name="se">
    9. <Path.Data><EllipseGeometry RadiusX="18.4" RadiusY="18.4" Center="72.4,72.4" /></Path.Data></Path><Path Fill="#FFFF9900" Name="s">
    10. <Path.Data><EllipseGeometry RadiusX="18.4" RadiusY="18.4" Center="50,81.6" /></Path.Data></Path><Path Fill="#FFFF9900" Name="sw">
    11. <Path.Data><EllipseGeometry RadiusX="18.4" RadiusY="18.4" Center="27.6,72.4" /></Path.Data></Path><Path Fill="#FFFF9900" Name="w">
    12. <Path.Data><EllipseGeometry RadiusX="18.4" RadiusY="18.4" Center="18.4,50" /></Path.Data></Path><Path Fill="#FFFF9900" Name="nw">
    13. <Path.Data><EllipseGeometry RadiusX="18.4" RadiusY="18.4" Center="27.6,27.6" /></Path.Data></Path></Canvas>
    14. <Canvas Name="stars"><Path Fill="#FF000000" Name="black_star">
    15. <Path.Data><PathGeometry FillRule="Nonzero" Figures="M63.086,18.385C63.086,11.158 57.227,5.299 49.986,5.299 42.751,5.299 36.89,11.158 36.89,18.385 31.79,13.275 23.495,13.275 18.393,18.385 13.274,23.505 13.274,31.793 18.393,36.909 11.159,36.909 5.29,42.768 5.29,49.994 5.29,57.224 11.16,63.092 18.393,63.092 13.274,68.202 13.274,76.487 18.393,81.607 23.495,86.711 31.79,86.711 36.89,81.607 36.89,88.835 42.75,94.69 49.986,94.69 57.226,94.69 63.086,88.835 63.086,81.607 68.204,86.711 76.502,86.711 81.599,81.607 86.7,76.487 86.7,68.197 81.599,63.092 88.815,63.092 94.68,57.223 94.68,49.994 94.68,42.767 88.815,36.909 81.599,36.909 86.7,31.79 86.7,23.503 81.599,18.385 76.502,13.275 68.206,13.275 63.086,18.385z" /></Path.Data></Path>
    16. <Path Fill="#FFFFFFFF" Name="white_star"><Path.Data><PathGeometry FillRule="Nonzero" Figures="M55.003,23.405L55.003,37.893 65.26,27.64C65.26,25.828 65.951,24.022 67.326,22.635 70.106,19.864 74.601,19.864 77.35,22.635 80.121,25.401 80.121,29.89 77.35,32.662 75.973,34.037 74.155,34.734 72.335,34.734L62.101,44.982 76.59,44.982C77.88,43.702 79.644,42.906 81.601,42.906 85.501,42.906 88.679,46.085 88.679,49.993 88.679,53.899 85.501,57.081 81.601,57.081 79.644,57.081 77.88,56.283 76.59,55.009L62.1,55.009 72.329,65.253C74.153,65.253 75.971,65.947 77.344,67.339 80.118,70.098 80.118,74.589 77.344,77.349 74.594,80.123 70.105,80.123 67.319,77.349 65.947,75.977 65.255,74.157 65.255,72.346L55,62.094 55,76.593C56.271,77.869 57.084,79.647 57.084,81.606 57.084,85.512 53.907,88.683 49.986,88.683 46.067,88.683 42.892,85.516 42.892,81.606 42.892,79.647 43.703,77.874 44.973,76.593L44.973,62.094 34.738,72.346C34.738,74.158 34.033,75.973 32.654,77.349 29.885,80.121 25.403,80.121 22.63,77.349 19.855,74.585 19.855,70.096 22.63,67.337 24.007,65.947 25.844,65.251 27.642,65.251L37.899,55.009 23.414,55.009C22.125,56.285 20.342,57.081 18.399,57.081 14.482,57.081 11.303,53.901 11.303,49.993 11.303,46.085 14.48,42.906 18.399,42.906 20.339,42.906 22.124,43.702 23.414,44.982L37.902,44.982 27.646,34.736C25.849,34.736 24.014,34.039 22.634,32.665 19.859,29.893 19.859,25.405 22.634,22.638 25.407,19.867 29.89,19.867 32.661,22.638 34.036,24.024 34.744,25.833 34.744,27.643L44.979,37.895 44.979,23.407C43.709,22.12 42.897,20.354 42.897,18.384 42.897,14.476 46.072,11.305 49.993,11.305 53.912,11.305 57.09,14.473 57.09,18.384 57.088,20.356 56.274,22.119 55.003,23.405z" /></Path.Data></Path></Canvas>
    17. <Canvas Name="svg_textbox"><Path Fill="#FF000000" Name="text_backdrop"><Path.Data><PathGeometry FillRule="Nonzero" Figures="M5.3,50L94.68,50 94.68,90Q94.68,95,89.68,95L10.3,95Q5.3,95,5.3,90z" /></Path.Data></Path><Path Fill="#FF3F3F3F" Name="shine"><Path.Data><PathGeometry FillRule="Nonzero" Figures="M14.657,54.211L86.051,54.211C88.959,54.211,91.363,56.596,91.363,59.526L91.363,77.436C63.779,74.033,36.437,69.311,9.352,69.753L9.352,59.526C9.353,56.596,11.743,54.211,14.657,54.211L14.657,54.211z" /></Path.Data></Path>
    18. <Canvas Name="svg_text"><Path Fill="#FFFFFFFF" Stroke="#FF000000" StrokeThickness="0.5035" StrokeMiterLimit="4" Name="S"><Path.Data><PathGeometry FillRule="Nonzero" Figures="M18.312,72.927C16.209,70.82 14.905,67.899 14.905,64.674 14.905,58.229 20.128,53.002 26.571,53.002 33.017,53.002 38.238,58.227 38.238,64.674L31.406,64.674C31.406,62 29.238,59.837 26.571,59.837 23.908,59.837 21.733,62 21.733,64.674 21.733,66.012 22.282,67.21 23.148,68.094L23.148,68.094C24.031,68.968,25.249,69.499,26.571,69.499L26.571,69.511C29.803,69.511,32.716,70.82,34.814,72.927L34.814,72.927C36.932,75.038 38.238,77.961 38.238,81.175 38.238,87.629 33.017,92.855 26.571,92.855 20.129,92.855 14.905,87.633 14.905,81.175L21.733,81.175C21.733,83.854 23.908,86.01 26.571,86.01 29.238,86.01 31.406,83.854 31.406,81.175 31.406,79.846 30.861,78.648 29.977,77.768L29.977,77.768C29.113,76.888,27.895,76.35,26.571,76.35L26.571,76.35C23.341,76.35,20.429,75.036,18.312,72.927L18.312,72.927 18.312,72.927z" /></Path.Data></Path><Path Fill="#FFFFFFFF" Stroke="#FF000000" StrokeThickness="0.5035" StrokeMiterLimit="4" Name="V">
    19. <Path.Data><PathGeometry FillRule="Nonzero" Figures="M61.588,53.005L53.344,92.854 46.494,92.854 38.236,53.005 45.082,53.005 49.92,76.342 54.755,53.005z" /></Path.Data></Path>
    20. <Path Fill="#FFFFFFFF" Stroke="#FF000000" StrokeThickness="0.5035" StrokeMiterLimit="4" Name="G"><Path.Data><PathGeometry FillRule="Nonzero" Figures="M73.255,69.513L84.938,69.513 84.938,81.177 84.938,81.177C84.938,87.629 79.712,92.855 73.269,92.855 66.828,92.855 61.603,87.629 61.603,81.177L61.603,81.177 61.603,64.676 61.586,64.676C61.586,58.229 66.827,53 73.253,53 79.712,53 84.936,58.225 84.936,64.676L78.087,64.676C78.087,62.002 75.935,59.839 73.253,59.839 70.606,59.839 68.433,62.002 68.433,64.676L68.433,81.177 68.433,81.177C68.433,83.852 70.606,86.014 73.253,86.014 75.935,86.014 78.087,83.852 78.087,81.187L78.087,81.175 78.087,76.348 73.253,76.348 73.255,69.513 73.255,69.513z" />
    21. </Path.Data></Path></Canvas></Canvas></Canvas>


    Wie kann ich das denn jetzt in meine Windows Forms Anwendung übertragen?


    --

    Andererseits wäre die Lösung über SVG´s auch immernoch denkbar und einfacher: Hier nochmal der Post mit meiner Test-Anwendung und dem Problem: Vektor Grafik/SVG in einer Windows Forms Anwendung [VB.NET 2010]

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Sonorpearl“ ()

Facebook