有没有办法在后面的代码中解析 UWP 中的矢量路径几何？

Posted 2023-02-22

【中文标题】有没有办法在后面的代码中解析 UWP 中的矢量路径几何？

【英文标题】：Is there a way to parse a vector path geometry in UWP in code behind?

【发布时间】：2016-01-19 15:35:05

【问题描述】：

在跨不同平台渲染矢量图形时，SVG 和 SVG 路径格式的效果非常好。但目前，在通用 Windows 平台上实现这一点是我的挑战。例如，我有一个给定的路径（取自 SVG 文件）：

M 198.09375 723.80859 C 177.18295 774.80866 156.88493 827.84014 140.58594 884.89844 L 140.72461 885.21875 L 142.49609 885.21875 C 161.1353 855.01082 143.6824 808.69757 193.58008 822.50977 C 220.7388 819.58475 192.23555 868.86205 206.17383 873.92578 C 203.13499 858.15989 212.17478 843.34361 213.20312 827.64648 C 216.4534 822.98862 226.9422 827.32963 232.86719 826.05078 C 239.35348 827.82466 259.48464 823.52777 253.90234 835.38867 C 252.16143 848.23286 247.39181 868.36181 258.57812 876.86133 C 275.17557 871.67116 293.30624 867.51489 306.24805 855.00195 C 309.22224 855.27087 320.1309 878.89646 334.30078 869.88281 C 342.81953 864.33463 353.03187 845.67608 358.37891 844.69922 C 358.70487 862.9873 381.18689 865.55311 395.26562 864.39258 C 403.5087 857.10727 407.91814 844.31119 413.10742 836.13867 C 413.72804 849.59522 421.61104 870.22176 438.42969 865.75586 C 449.52198 855.46609 450.22121 835.34205 450.98242 820.66016 C 440.08469 801.05876 470.99505 805.89669 482.05469 800.25 C 476.90476 794.47714 457.46328 802.62763 447.61328 805.58594 C 444.73527 800.59751 438.61005 793.84755 431.14453 800.40625 C 416.99321 808.72215 417.23603 829.81536 405.94141 841.74219 C 400.48764 848.08657 398.31259 865.19549 387.45703 861.5625 C 367.90276 864.11872 352.66459 843.12021 367.92773 827.74219 C 382.01652 798.42739 389.36227 773.69059 391.92773 757.58398 C 383.28497 784.25969 367.28961 818.5148 363.43164 822.48633 C 364.07428 814.47709 365.77944 799.37383 369.08398 783.79688 C 366.4449 793.18051 363.69922 804.07698 360.89648 816.71875 C 361.48939 835.64228 349.1191 850.24112 336.55859 862.86523 C 322.97859 878.53876 301.18236 851.31729 318.63086 839.64844 C 336.61687 805.09083 357.61323 769.08136 367.24609 728.10938 C 333.91868 727.40516 318.03705 810.21063 310.98828 840.47461 C 305.31469 859.28359 283.07607 865.19391 266.34961 870.80273 C 247.72901 876.83871 255.8139 843.70138 257.98438 832.47461 C 266.45336 827.2867 286.39364 829.07792 287.33594 811.02148 C 291.66934 788.31866 263.56198 808.14794 260.3457 819.18164 C 251.10098 831.98222 228.75757 819.36332 214.10156 822.01172 C 221.58584 792.07737 236.75917 758.58129 242.01172 726.59766 C 228.826 757.22131 219.89381 789.50311 210.12695 821.36328 C 195.25141 821.35043 181.74363 813.75195 166.88086 814.64844 C 176.85082 787.46046 194.56222 754.36904 198.09375 723.80859 z M 369.08398 783.79688 C 384.88883 727.60052 396.70513 727.59038 391.92773 757.58398 C 395.19032 747.51409 397.4116 738.51802 397.52734 732.64844 C 382.96385 734.97676 374.14438 759.94316 369.08398 783.79688 z M 352.36328 749.70117 C 354.77494 749.90766 347.99282 769.96334 320.71484 828.82227 C 319.68801 830.81418 318.67223 832.81204 317.5625 834.75977 C 306.90155 826.44708 347.59605 749.29301 352.36328 749.70117 z M 437.77539 799.73438 C 438.30605 799.60547 439.62352 800.55657 442.17773 803.56641 C 441.681 810.22158 436.18342 800.12108 437.77539 799.73438 z M 281.73633 803.74805 C 288.13496 803.44121 281.42291 821.46784 274.14062 824.54883 C 249.75318 832.98346 268.85036 814.16512 275.05859 807.29688 C 278.08583 804.86441 280.25972 803.81885 281.73633 803.74805 z M 436.71484 807.25781 C 439.20814 807.30595 441.96247 808.89375 445.0332 812.71484 C 451.81999 828.77301 444.47494 846.59531 438.73438 861.81836 C 424.83443 868.53922 415.18535 844.58764 417.39258 834.13086 C 422.22834 826.55898 427.81022 807.08588 436.71484 807.25781 z M 424.49805 813.01172 C 424.74071 812.91442 424.78138 813.46109 424.44141 815.08984 C 418.59702 825.96246 423.44649 813.43336 424.49805 813.01172 z 

（这个例子应该只是“你好”这个词，手写的有一些错误和漏洞，这代表了我的要求的一个很好的平均水平。）

目标是将代码后面的这个路径解析为来自 XAML 的 Windows.UI.Xaml.Media.Geometry，not，因为我需要使用生成的 Windows.UI.Xaml.Shapes.Path UI 元素。由于我已经在其他平台上解决了这个问题，所以我有一个简单的WPF解决方案，应该接近UWP，因为它是windows。因此，对于 WPF，我只需使用以下代码创建 Path 并解析该几何图形：

new System.Windows.Shapes.Path

    Data = System.Windows.Media.Geometry.Parse(myVectorDataStringFromAbove),
    Fill = myColorBrush
;

自从微软统一了 API，我的第一个想法就是在 UWP 中做同样的事情：

new Windows.UI.Xaml.Shapes.Path

    Data = Windows.UI.Xaml.Media.Geometry.Parse(myVectorDataStringFromAbove),
    Fill = myColorBrush
;

唯一的问题是，在 WPF 中 Windows.UI.Xaml.Media.Geometry 没有这样的 Parse 方法。我什至在Windows.UI.Xaml.Media.PathGeometry 这样的专业课上都找不到。但据我所知，有可能从 XAML (?) 解析此类路径定义。所以我的问题是：我怎样才能以编程方式做到这一点？

编辑： 我知道这种解决方案也适用于 UWP： Convert path to geometric shape 但是没有更好的方法吗？

【问题讨论】：

在深入了解之前，您可能会先查看this 之类的内容。

由于我需要与路径交互，这对我来说不是解决方案。

你检查过这个案例吗：Setting Path.Data in code-behind？它可能会帮助你。

这是一个很好的信息。 stringtopathgeometry 项目看起来不错且有用。但是由于这个功能已经是框架的一部分，我自己提供/维护这个功能并不是一个好的行为。我正在寻找一种显式访问框架功能的方法。

这篇文章的这个答案有效：***.com/questions/31019687/…

【参考方案1】：

让XamlReader解析几何数据：

var data = "M 198.09375 723.80859 C 177.18295 774.80866 156.88493 827.84014 140.58594 884.89844 L 140.72461 885.21875 L 142.49609 885.21875 C 161.1353 855.01082 143.6824 808.69757 193.58008 822.50977 C 220.7388 819.58475 192.23555 868.86205 206.17383 873.92578 C 203.13499 858.15989 212.17478 843.34361 213.20312 827.64648 C 216.4534 822.98862 226.9422 827.32963 232.86719 826.05078 C 239.35348 827.82466 259.48464 823.52777 253.90234 835.38867 C 252.16143 848.23286 247.39181 868.36181 258.57812 876.86133 C 275.17557 871.67116 293.30624 867.51489 306.24805 855.00195 C 309.22224 855.27087 320.1309 878.89646 334.30078 869.88281 C 342.81953 864.33463 353.03187 845.67608 358.37891 844.69922 C 358.70487 862.9873 381.18689 865.55311 395.26562 864.39258 C 403.5087 857.10727 407.91814 844.31119 413.10742 836.13867 C 413.72804 849.59522 421.61104 870.22176 438.42969 865.75586 C 449.52198 855.46609 450.22121 835.34205 450.98242 820.66016 C 440.08469 801.05876 470.99505 805.89669 482.05469 800.25 C 476.90476 794.47714 457.46328 802.62763 447.61328 805.58594 C 444.73527 800.59751 438.61005 793.84755 431.14453 800.40625 C 416.99321 808.72215 417.23603 829.81536 405.94141 841.74219 C 400.48764 848.08657 398.31259 865.19549 387.45703 861.5625 C 367.90276 864.11872 352.66459 843.12021 367.92773 827.74219 C 382.01652 798.42739 389.36227 773.69059 391.92773 757.58398 C 383.28497 784.25969 367.28961 818.5148 363.43164 822.48633 C 364.07428 814.47709 365.77944 799.37383 369.08398 783.79688 C 366.4449 793.18051 363.69922 804.07698 360.89648 816.71875 C 361.48939 835.64228 349.1191 850.24112 336.55859 862.86523 C 322.97859 878.53876 301.18236 851.31729 318.63086 839.64844 C 336.61687 805.09083 357.61323 769.08136 367.24609 728.10938 C 333.91868 727.40516 318.03705 810.21063 310.98828 840.47461 C 305.31469 859.28359 283.07607 865.19391 266.34961 870.80273 C 247.72901 876.83871 255.8139 843.70138 257.98438 832.47461 C 266.45336 827.2867 286.39364 829.07792 287.33594 811.02148 C 291.66934 788.31866 263.56198 808.14794 260.3457 819.18164 C 251.10098 831.98222 228.75757 819.36332 214.10156 822.01172 C 221.58584 792.07737 236.75917 758.58129 242.01172 726.59766 C 228.826 757.22131 219.89381 789.50311 210.12695 821.36328 C 195.25141 821.35043 181.74363 813.75195 166.88086 814.64844 C 176.85082 787.46046 194.56222 754.36904 198.09375 723.80859 z M 369.08398 783.79688 C 384.88883 727.60052 396.70513 727.59038 391.92773 757.58398 C 395.19032 747.51409 397.4116 738.51802 397.52734 732.64844 C 382.96385 734.97676 374.14438 759.94316 369.08398 783.79688 z M 352.36328 749.70117 C 354.77494 749.90766 347.99282 769.96334 320.71484 828.82227 C 319.68801 830.81418 318.67223 832.81204 317.5625 834.75977 C 306.90155 826.44708 347.59605 749.29301 352.36328 749.70117 z M 437.77539 799.73438 C 438.30605 799.60547 439.62352 800.55657 442.17773 803.56641 C 441.681 810.22158 436.18342 800.12108 437.77539 799.73438 z M 281.73633 803.74805 C 288.13496 803.44121 281.42291 821.46784 274.14062 824.54883 C 249.75318 832.98346 268.85036 814.16512 275.05859 807.29688 C 278.08583 804.86441 280.25972 803.81885 281.73633 803.74805 z M 436.71484 807.25781 C 439.20814 807.30595 441.96247 808.89375 445.0332 812.71484 C 451.81999 828.77301 444.47494 846.59531 438.73438 861.81836 C 424.83443 868.53922 415.18535 844.58764 417.39258 834.13086 C 422.22834 826.55898 427.81022 807.08588 436.71484 807.25781 z M 424.49805 813.01172 C 424.74071 812.91442 424.78138 813.46109 424.44141 815.08984 C 418.59702 825.96246 423.44649 813.43336 424.49805 813.01172 z";

var geometry = (Geometry)XamlReader.Load(
    "<Geometry xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'>"
    + data + "</Geometry>");

path.Data = geometry;

【讨论】：

谢谢。但是我已经在做类似的事情了。因此，对于功能术语，这是上面提到的答案。但从设计的角度来看，与 WPF 方式相比，它闻起来不轻量级，因为我们正在解析 XAML。 有没有办法访问解析器的内部部分，它解析表示我想要在 WPF 中解析的路径的特定数据片段？ 我的意思是它对我来说很清楚，我想要解析 Geometry 那么为什么我需要再次从解析器获取此信息（在本例中为 XamlReader）？

我不知道在 UWP 中解析路径几何的任何其他（内置）方法。

WinUI3 中的类似问题 .. 但是，类似的解决方案适用:)

@MayurPaghdal 显然，因为 API 或多或少相同。

【参考方案2】：

使用 XamlBindingHelper ：

_path.Data = (Geometry)XamlBindingHelper.ConvertValue(typeof(Geometry), "M 0,0 L 23,0 L 31,16 L 23,31 L 0,31 Z");