【发布时间】:2016-04-07 17:23:26
【问题描述】:
我这里有一组极其复杂的可缩放矢量图形图标,它们是使用 Illustrator 创建的,并使用 Expression Blend 和 Inkscape hack 导入到我的 WPF 应用程序中:
我尝试了各种导入原始图标的方法,这是上述方法是他们在我的应用程序中正确导入的唯一方法。
所以现在我需要让我的应用在新的更小分辨率下运行,即使在 ViewBox 中这些图标也不会缩放。
如果我删除宽度/高度属性,它会破坏 SVG,并且图标基本上会消失。
<Style x:Key="BenefitsIconFlexBox" TargetType="{x:Type Viewbox}">
<Setter Property="MaxHeight" Value="240"/>
<Setter Property="Height" Value="201"/>
<Setter Property="Margin" Value="10,0,0,10"/>
</Style>
...
<Viewbox Style="{StaticResource BenefitsIconFlexBox}">
<Canvas Width="213.333" Height="213.333" Clip="F1 M 0,0L 213.333,0L 213.333,213.333L 0,213.333L 0,0" UseLayoutRounding="False">
<Path Canvas.Left="0" Canvas.Top="3.05176e-005" Stretch="Fill" Fill="#FFEDEDED" Data="F1 M 213.333,106.667C 213.333,165.579 165.579,213.333 106.667,213.333C 47.7547,213.333 0,165.579 0,106.667C 0,47.7547 47.7547,3.05176e-005 106.667,3.05176e-005C 165.579,3.05176e-005 213.333,47.7547 213.333,106.667 Z "/>
<Canvas Canvas.Left="60.588" Canvas.Top="46.828">
<Path Canvas.Left="17.276" Canvas.Top="0" Stretch="Fill" Fill="#FF424242" Data="F1 M 46.0787,0C 30.1827,0 17.276,13.0107 17.276,28.7973L 17.276,40.3173L 28.7973,40.3173L 28.7973,28.7973C 28.7973,19.308 36.584,11.5213 46.0787,11.5213C 55.5733,11.5213 63.36,19.308 63.36,28.7973L 63.36,40.3173L 74.8813,40.3173L 74.8813,28.7973C 74.8813,13.0107 61.9747,0 46.0787,0 Z "/>
</Canvas>
<Path Canvas.Left="60.588" Canvas.Top="87.1454" Stretch="Fill" Fill="#FFFB8C00" Data="F1 M 141.229,162.136L 72.104,162.136C 65.812,162.136 60.588,156.907 60.588,150.615L 60.588,98.6667C 60.588,92.3747 65.812,87.1454 72.104,87.1454L 141.333,87.1454C 147.625,87.1454 152.855,92.3747 152.855,98.6667L 152.855,150.505C 152.745,156.907 147.625,162.136 141.229,162.136 Z "/>
<Path Canvas.Left="98.0267" Canvas.Top="116.052" Stretch="Fill" Fill="#FFC76E00" Data="F1 M 115.307,124.693C 115.307,129.495 111.469,133.333 106.667,133.333C 101.864,133.333 98.0267,129.495 98.0267,124.693C 98.0267,119.896 101.864,116.052 106.667,116.052C 111.469,116.052 115.307,119.896 115.307,124.693 Z "/>
</Canvas>
</Viewbox>
我愿意使用转换或一些 c# 逻辑来进行分辨率数学和缩放,但更愿意在视图框上使用缩放。
我不确定为什么 SVG 在删除维度数据后会变得怪异,但这肯定是问题所在。我觉得如果我可以摆脱高度和宽度属性,这将缩放。
欢迎提出任何建议!谢谢你。
【问题讨论】:
-
我刚刚对此进行了测试,它适用于您的方式。默认的 Stretch 枚举是
Uniform,当我更改高度值时,它的工作原理与预期一样。哦,我删除了 SVG 标记,因为 WPF 使用 Path Markup Syntax,它与 SVG 非常接近,但并不完全。 -
哦,还有 PS,我建议(因为您无论如何都在使用 Illustrator 作为初学者)改用 Mike Swanson 的 AI to XAML 插件,而不是您列出的其他方法。旁注:为它导出到 WPF,为其他任何东西(如 UWP、WP 等)导出到 Silverlight XAML。
-
是的,如果我在代码中手动更改高度属性,它将缩放,但在视图框中,它不会像其他 WPF 元素那样自动缩放。为此,我需要从破坏 SVG 的画布容器 (
-
啊,好吧,你错过了 ViewBox 兄弟的全部观点。它不关心您为其中的元素设置的大小。删除 ViewBox 样式模板上的 Height/MaxHeight 设置器,它会根据父容器允许的大小自行调整大小。