logo标签列表

在WPF XAML中缩放复杂的SVG路径

wpfxaml
7

我这里有一组非常复杂的可扩展矢量图标，它们是使用Illustrator创建的，并使用Expression Blend和Inkscape Hack将其导入到我的WPF应用程序中：

将SVG转换为XAML

我尝试了多种导入原始图标的方法，但只有上述方法能够正确地在我的应用程序中导入它们。

因此，现在我需要让我的应用程序在新的更小分辨率下工作，即使在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非常相似，但并不完全相同。 - Chris W.
哦，顺便说一句，我建议（既然你已经开始使用Illustrator了），最好使用Mike Swanson的AI to XAML插件，而不是你列出的其他方法。顺便提一下：导出到WPF用于此目的，导出到Silverlight XAML用于其他任何东西，如UWP、WP等。 - Chris W.
是的，如果我在代码中手动更改高度属性，它会缩放，但在视图框中，它不会像其他WPF元素一样自动缩放。为了实现这一点，我需要从画布容器（<Canvas Width="213.333" Height="213.333"）中删除HEIGHT和WIDTH，这将破坏SVG。 - Shawn J. Molloy
啊，好的，你完全误解了ViewBox的意义，兄弟。它并不关心你在其中设置的元素大小。在ViewBox的样式模板中移除你设置的Height/MaxHeight属性，它将根据父容器的大小自动调整尺寸。 - Chris W.
1个回答
8

ViewBox不关心其子元素的预设大小属性。这些属性仅用作基础，但是ViewBox会相应地进行缩放。因此，如果我说从相关的样式模板中删除Height / MaxHeight setter，并执行以下操作，则每个ViewBox都具有不同的高度。您还可以制作整个样式并避免重复的代码，但为了快速脏概念示例而言，我们就这样做。

enter image description here

<StackPanel>

    <Viewbox Height="20" Margin="5">
        <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">
            <Canvas Canvas.Left="0" Canvas.Top="0">
                <Path Width="213.333" Height="213.333" 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 Width="92.2653" Height="115.307" Canvas.Left="60.588" Canvas.Top="46.828">
                    <Path Width="57.6053" Height="40.3173" 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 Width="92.2667" Height="74.9907" 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 Width="17.28" Height="17.2813" 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>
        </Canvas>
    </Viewbox>

    <Viewbox Height="50" Margin="5">
        <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">
            <Canvas Canvas.Left="0" Canvas.Top="0">
                <Path Width="213.333" Height="213.333" 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 Width="92.2653" Height="115.307" Canvas.Left="60.588" Canvas.Top="46.828">
                    <Path Width="57.6053" Height="40.3173" 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 Width="92.2667" Height="74.9907" 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 Width="17.28" Height="17.2813" 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>
        </Canvas>
    </Viewbox>

    <Viewbox Height="100" Margin="5">
        <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">
            <Canvas Canvas.Left="0" Canvas.Top="0">
                <Path Width="213.333" Height="213.333" 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 Width="92.2653" Height="115.307" Canvas.Left="60.588" Canvas.Top="46.828">
                    <Path Width="57.6053" Height="40.3173" 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 Width="92.2667" Height="74.9907" 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 Width="17.28" Height="17.2813" 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>
        </Canvas>
    </Viewbox>

</StackPanel>

现在假设您将ViewBox放置在网格单元中，该单元具有列/行上的*大小，并且您没有在ViewBox上设置Height / Width值。然后它将填充允许的任何空间。随着查看介质（大屏幕，中屏幕，小屏幕无关紧要）的变化，它将根据其父级的尺寸自动调整大小。
你知道的，你说得完全正确。尽管它会按比例缩放高度和宽度，但我所在的网格（或其他父元素）正在阻止缩放。我太习惯于Web了... 嘿，谢谢Chris。 - Shawn J. Molloy
1
@nocarrier 不用担心，我也正在经历相同的小问题，从桌面应用程序转回 Web 开发，需要一些时间来恢复状态。如果你遇到麻烦，随时喊我。 - Chris W.
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接