时间戳

首页 > 解决方案 > 从 SVG 起点确定 Xamarin Forms 4.7 中的 Path.Data

xamarin - 从 SVG 起点确定 Xamarin Forms 4.7 中的 Path.Data

问题描述

我对 XAM Forms 4.7 中包含形状和几何图形感到兴奋，即使它是实验性的。我有几个 svg 文件我想用作 XAML 中 Shapes.Path.Data 语句的起点。

在 ShapesDemo 应用程序中，我看到了 XAML 和它所基于的 SVG。两者都附有。那些 SVG 路径是如何被提炼成那些 XAML 路径语句的？

演示在这里：https ://docs.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/userinterface-shapesdemos/

供考虑的图像： 在此处输入图像描述 附件是源 SVG 和相关的 Xaml Path.Data 转换。

https://docs.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/userinterface-shapesdemos/

该示例中的 Path.Data 具有 xaml：

    <?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ShapesDemos.MonkeyFaceDemoPage"
             Title="Monkey face demo">
    <Grid HorizontalOptions="Center"
          VerticalOptions="Center">
        <!-- Path data from SVG athttps://openclipart.org/detail/86599/monkey-face -->
        <Path Fill="#FF502D16" Data="M122.037181 73.3037037 C122.037181 109.1 94.9029248 138.118519 61.4299587 138.118519 C27.9581001 138.118519 0.822736364 109.1 0.822736364 73.3037037 C0.822736364 37.5074074 27.9569926 8.48888889 61.4299587 8.48888889 C94.9018174 8.48888889 122.037181 37.5074074 122.037181 73.3037037 L122.037181 73.3037037 Z"/>
        <Path Fill="#FFA05A2C" Data="M106.19796 83.3331702 C106.19796 108.901749 87.6972207 129.629096 64.8746074 129.629096 C42.0527494 129.629096 23.5512546 108.901749 23.5512546 83.3331702 C23.5512546 57.7645917 42.0519943 37.0372443 64.8746074 37.0372443 C87.6964653 37.0372443 106.19796 57.7645917 106.19796 83.3331702 L106.19796 83.3331702 Z"/>
        <Path Fill="#FF502D16" Data="M399.5909 72.5324074 C399.5909 108.328704 372.456644 137.347222 338.983678 137.347222 C305.511819 137.347222 278.376455 108.328704 278.376455 72.5324074 C278.376455 36.7361111 305.510712 7.71759259 338.983678 7.71759259 C372.455536 7.71759259 399.5909 36.7361111 399.5909 72.5324074 L399.5909 72.5324074 Z"/>
        <Path Fill="#FFA05A2C" Data="M383.751679 82.5618739 C383.751679 108.130453 365.25094 128.8578 342.428326 128.8578 C319.606469 128.8578 301.104974 108.130453 301.104974 82.5618739 C301.104974 56.9932954 319.605713 36.265948 342.428326 36.265948 C365.250184 36.265948 383.751679 56.9932954 383.751679 82.5618739 L383.751679 82.5618739 Z"/>
        <Path Fill="#FF502D16" Data="M201.239669 0 C411.099174 18.7805556 397.256198 277.296296 198.487603 361.111111 C-19.7024793 254.833333 9.68595041 9.06481481 201.239669 0 Z"/>
        <Path Fill="#FFD38D5F" Data="M201.239669 58.9472222 C377.297521 12.8824074 325.305785 234.169444 205.371901 250.308333 C89.5206612 249.289815 2.2892562 10.5398148 201.239669 58.9472222 Z"/>
        <Path Fill="#FF241F1C" Data="M267.387938 122.225395 C267.600827 141.380032 256.658967 156.769338 242.947772 156.599025 C229.236577 156.428712 217.949569 140.763291 217.73668 121.608655 C217.523791 102.454017 228.465651 87.0647113 242.176846 87.2350243 C255.888041 87.4053373 267.175049 103.070758 267.387938 122.225395 Z" />
        <Path Fill="#FF241F1C" Data="M175.101775 122.379402 C174.888887 141.534039 163.601877 157.19946 149.890683 157.369773 C136.179488 157.540086 125.237629 142.15078 125.450517 122.996143 C125.663406 103.841505 136.950414 88.1760849 150.661609 88.0057719 C164.372804 87.8354589 175.314664 103.224764 175.101775 122.379402 Z" />
        <Path Fill="#FFD38D5F" Data="M326.308234 269.31113 C326.308234 341.333278 270.498044 399.718537 201.650289 399.718537 C132.804813 399.718537 76.992345 341.333278 76.992345 269.31113 C76.992345 197.288981 132.802535 138.903722 201.650289 138.903722 C270.495765 138.903722 326.308234 197.288981 326.308234 269.31113 L326.308234 269.31113 Z"/>
        <Path Fill="#FF241F1C" Data="M104.702479 345.225 C169.520661 360.787037 234.338843 366.664815 299.157025 341.8375 C243.776033 368.156019 181.991736 377.384722 104.702479 345.225 L104.702479 345.225 Z"/>
        <Path Fill="#FF241F1C" Data="M198.066116 174.993519 C195.075124 227.067593 194.034463 279.123148 199.177686 331.113889 C193.755041 286.700926 191.76 237.113889 198.066116 174.993519 Z"/>
        <Path Fill="#FF241F1C" Data="M183.330579 195.215741 C183.330579 203.3125 181.172149 209.875926 178.509669 209.875926 C175.847107 209.875926 173.68876 203.312222 173.68876 195.215741 C173.68876 187.118981 175.84719 180.555556 178.509669 180.555556 C181.172231 180.555556 183.330579 187.119259 183.330579 195.215741 Z"/>
        <Path Fill="#FF241F1C" Data="M220.107438 195.061111 C220.107438 203.15787 217.949008 209.721296 215.286529 209.721296 C212.623967 209.721296 210.46562 203.157593 210.46562 195.061111 C210.46562 186.964352 212.62405 180.400926 215.286529 180.400926 C217.949091 180.400926 220.107438 186.96463 220.107438 195.061111 Z"/>
        <Path Fill="#FFE3DEDB" Data="M263.347107 112.197222 C262.180579 131.525926 252.966942 138.837963 240.640496 141.500926 C248.209256 142.496667 252.414876 151.85 259.983471 136.771574 C261.643719 128.885556 265.049835 122.658611 263.34686 112.196574 L263.347107 112.197222 Z"/>
        <Path Fill="#FFE3DEDB" Data="M167.917355 108.428704 C171.621488 126.532407 164.771901 136.184259 153.840496 142.568519 C161.206612 141.06213 167.485124 148.2975 170.858678 132.046296 C170.461355 124.281759 172.118099 117.480556 167.917686 108.428704 L167.917355 108.428704 Z"/>
    </Grid>
</ContentPage>

这是从基础 SVG 派生的

   <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:cc="http://creativecommons.org/ns#"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns:ns1="http://sozi.baierouge.fr"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    id="svg5825"
    sodipodi:docname="New document 35"
    viewBox="0 0 482.5 431.67"
    version="1.1"
    inkscape:version="0.47 r22583"
  >
  <sodipodi:namedview
      id="base"
      bordercolor="#666666"
      inkscape:pageshadow="2"
      inkscape:window-y="58"
      pagecolor="#ffffff"
      inkscape:window-height="839"
      inkscape:window-maximized="0"
      inkscape:zoom="1"
      inkscape:window-x="117"
      showgrid="false"
      borderopacity="1.0"
      inkscape:current-layer="layer1"
      inkscape:cx="252.01705"
      inkscape:cy="218.33333"
      inkscape:window-width="693"
      inkscape:pageopacity="0.0"
      inkscape:document-units="px"
  />
  <g
      id="layer1"
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
      transform="translate(-152.5 -86.667)"
    >
    <g
        id="g6873"
      >
      <path
          id="path5837-9"
          sodipodi:rx="164.16667"
          sodipodi:ry="140"
          style="fill:#502d16"
          sodipodi:type="arc"
          d="m371.67 411.67c0 77.32-73.5 140-164.17 140-90.667 0-164.17-62.68-164.17-140s73.5-140 164.17-140c90.667 0 164.17 62.68 164.17 140z"
          transform="matrix(.44670 0 0 0.5 133.14 -40)"
          sodipodi:cy="411.66666"
          sodipodi:cx="207.5"
      />
      <path
          id="path5837-9-3"
          sodipodi:rx="164.16667"
          sodipodi:ry="140"
          style="fill:#a05a2c"
          sodipodi:type="arc"
          d="m371.67 411.67c0 77.32-73.5 140-164.17 140-90.667 0-164.17-62.68-164.17-140s73.5-140 164.17-140c90.667 0 164.17 62.68 164.17 140z"
          transform="matrix(.30457 0 0 .35714 166.8 29.643)"
          sodipodi:cy="411.66666"
          sodipodi:cx="207.5"
      />
      <path
          id="path5837-9-38"
          sodipodi:rx="164.16667"
          sodipodi:ry="140"
          style="fill:#502d16"
          sodipodi:type="arc"
          d="m371.67 411.67c0 77.32-73.5 140-164.17 140-90.667 0-164.17-62.68-164.17-140s73.5-140 164.17-140c90.667 0 164.17 62.68 164.17 140z"
          transform="matrix(.44670 0 0 0.5 468.98 -40.833)"
          sodipodi:cy="411.66666"
          sodipodi:cx="207.5"
      />
      <path
          id="path5837-9-3-4"
          sodipodi:rx="164.16667"
          sodipodi:ry="140"
          style="fill:#a05a2c"
          sodipodi:type="arc"
          d="m371.67 411.67c0 77.32-73.5 140-164.17 140-90.667 0-164.17-62.68-164.17-140s73.5-140 164.17-140c90.667 0 164.17 62.68 164.17 140z"
          transform="matrix(.30457 0 0 .35714 502.64 28.81)"
          sodipodi:cy="411.66666"
          sodipodi:cx="207.5"
      />
      <path
          id="path5835"
          sodipodi:nodetypes="ccc"
          style="fill:#502d16"
          d="m395 86.667c253.93 20.283 237.18 299.48-3.33 390-264.01-114.78-228.45-380.21 3.33-390z"
      />
      <path
          id="path5952"
          sodipodi:nodetypes="ccc"
          style="fill:#d38d5f"
          d="m395 150.33c213.03-49.75 150.12 189.24 5 206.67-140.18-1.1-245.73-258.95-5-206.67z"
      />
      <path
          id="path6770-6"
          sodipodi:rx="30"
          sodipodi:ry="37.5"
          style="fill:#241f1c"
          sodipodi:type="arc"
          d="m101.67 289.17c0 20.711-13.431 37.5-30 37.5s-30-16.789-30-37.5 13.431-37.5 30-37.5 30 16.789 30 37.5z"
          transform="matrix(.99459 .10389 -.10389 .99459 403.76 -76.714)"
          sodipodi:cy="289.16666"
          sodipodi:cx="71.666664"
      />
      <path
          id="path6770"
          sodipodi:rx="30"
          sodipodi:ry="37.5"
          style="fill:#241f1c"
          sodipodi:type="arc"
          d="m101.67 289.17c0 20.711-13.431 37.5-30 37.5s-30-16.789-30-37.5 13.431-37.5 30-37.5 30 16.789 30 37.5z"
          transform="matrix(.99459 -.10389 .10389 .99459 232.01 -60.99)"
          sodipodi:cy="289.16666"
          sodipodi:cx="71.666664"
      />
      <path
          id="path5837"
          sodipodi:rx="164.16667"
          sodipodi:ry="140"
          style="fill:#d38d5f"
          sodipodi:type="arc"
          d="m371.67 411.67c0 77.32-73.5 140-164.17 140-90.667 0-164.17-62.68-164.17-140s73.5-140 164.17-140c90.667 0 164.17 62.68 164.17 140z"
          transform="matrix(.91878 0 0 1.006 204.85 -36.617)"
          sodipodi:cy="411.66666"
          sodipodi:cx="207.5"
      />
      <path
          id="path6722"
          sodipodi:nodetypes="ccc"
          style="fill:#241f1c"
          d="m278.19 459.51c78.43 16.807 156.86 23.155 235.29-3.6585-67.011 28.424-141.77 38.391-235.29 3.6585z"
      />
      <path
          id="path6722-5"
          sodipodi:nodetypes="ccc"
          style="fill:#241f1c"
          d="m391.16 275.66c-3.6191 56.24-4.8783 112.46 1.345 168.61-6.5614-47.966-8.9754-101.52-1.345-168.61z"
      />
      <path
          id="path6746"
          sodipodi:rx="5.8333335"
          sodipodi:ry="15.833333"
          style="fill:#241f1c"
          sodipodi:type="arc"
          d="m138.33 327.5c0 8.7445-2.6117 15.833-5.8333 15.833-3.2217 0-5.8333-7.0888-5.8333-15.833 0-8.7445 2.6117-15.833 5.8333-15.833 3.2217 0 5.8333 7.0888 5.8333 15.833z"
          transform="translate(235,-30)"
          sodipodi:cy="327.5"
          sodipodi:cx="132.5"
      />
      <path
          id="path6746-0"
          sodipodi:rx="5.8333335"
          sodipodi:ry="15.833333"
          style="fill:#241f1c"
          sodipodi:type="arc"
          d="m138.33 327.5c0 8.7445-2.6117 15.833-5.8333 15.833-3.2217 0-5.8333-7.0888-5.8333-15.833 0-8.7445 2.6117-15.833 5.8333-15.833 3.2217 0 5.8333 7.0888 5.8333 15.833z"
          transform="translate(279.5 -30.167)"
          sodipodi:cy="327.5"
          sodipodi:cx="132.5"
      />
      <path
          id="path6830"
          sodipodi:nodetypes="cccc"
          style="fill:#e3dedb"
          d="m470.15 207.84c-1.4115 20.875-12.56 28.772-27.475 31.648 9.1582 1.0754 14.247 11.177 23.405-5.1077 2.0089-8.5169 6.1303-15.242 4.0697-26.541z"
      />
      <path
          id="path6830-8"
          sodipodi:nodetypes="cccc"
          style="fill:#e3dedb"
          d="m354.68 203.77c4.482 19.552-3.806 29.976-17.033 36.871 8.913-1.6269 16.51 6.1873 20.592-11.364-0.48076-8.3857 1.5239-15.731-3.5586-25.507z"
      />
    </g
    >
  </g
  >
  <metadata
    >
    <rdf:RDF
      >
      <cc:Work
        >
        <dc:format
          >image/svg+xml</dc:format
        >
        <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage"
        />
        <cc:license
            rdf:resource="http://creativecommons.org/licenses/publicdomain/"
        />
        <dc:publisher
          >
          <cc:Agent
              rdf:about="http://openclipart.org/"
            >
            <dc:title
              >Openclipart</dc:title
            >
          </cc:Agent
          >
        </dc:publisher
        >
        <dc:title
          >Monkey Face</dc:title
        >
        <dc:date
          >2010-09-25T05:06:29</dc:date
        >
        <dc:description
          >Based on a photo of my favorite cuddly monkey Jefro.</dc:description
        >
        <dc:source
          >https://openclipart.org/detail/86599/monkey-face-by-stevepetmonkey</dc:source
        >
        <dc:creator
          >
          <cc:Agent
            >
            <dc:title
              >stevepetmonkey</dc:title
            >
          </cc:Agent
          >
        </dc:creator
        >
        <dc:subject
          >
          <rdf:Bag
            >
            <rdf:li
              >Jungle Animal</rdf:li
            >
            <rdf:li
              >Monkey</rdf:li
            >
            <rdf:li
              >Monkey Face</rdf:li
            >
          </rdf:Bag
          >
        </dc:subject
        >
      </cc:Work
      >
      <cc:License
          rdf:about="http://creativecommons.org/licenses/publicdomain/"
        >
        <cc:permits
            rdf:resource="http://creativecommons.org/ns#Reproduction"
        />
        <cc:permits
            rdf:resource="http://creativecommons.org/ns#Distribution"
        />
        <cc:permits
            rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
        />
      </cc:License
      >
    </rdf:RDF
    >
  </metadata
  >
</svg
>

标签： xamarinsvgxamarin.formspath

解决方案

为此，您必须使用设计工具（例如 Adob​​e Illustrator 和/或其他工具/插件）转换 SVG，以将 SVG 导出为 XAML 几何图形。一个有用的工具可能是https://github.com/ElinamLLC/SharpVectors

另请参阅此处的讨论：如何将 Illustrator 文件转换为 WPF 的路径

但我建议通过 SkiaSharp SKCanvasView 渲染 SVG 图像。编写您自己的 SvgImage 类。它会为你节省大量的应用程序内存（不需要 png 和位图），并且可以很好地使用 Xamarin.Forms，适用于 Android、iOS、UWP 等所有平台。请参阅如何在 Xamarin 表单上使用 SkiaSharp 加载文件 .svg？

推荐阅读