WPF:如何绘制多边形以在调整大小时保留线段的角度

发布于 2024-12-10 11:59:28 字数 3686 浏览 0 评论 0原文

我创建了一个如下所示的光泽面板效果:

Glossy panel

这是 XAML:

  <Window x:Class="Window1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="Window1" Height="200" Width="300">
      <StackPanel Orientation="Vertical">
          <StackPanel.Background>
              <DrawingBrush>
                  <DrawingBrush.Drawing>
                      <DrawingGroup>
                          <GeometryDrawing>
                              <GeometryDrawing.Geometry>
                                  <RectangleGeometry Rect="0,0,1,1"></RectangleGeometry>
                              </GeometryDrawing.Geometry>
                              <GeometryDrawing.Brush>
                                  <SolidColorBrush Opacity="0.5" Color="Blue" />
                              </GeometryDrawing.Brush>
                          </GeometryDrawing>
                          <GeometryDrawing>
                              <GeometryDrawing.Geometry>
                                  <PathGeometry>
                                      <PathGeometry.Figures>
                                          <PathFigureCollection>
                                              <PathFigure IsClosed="True" StartPoint="0,0">
                                                  <PathFigure.Segments>
                                                      <PathSegmentCollection>
                                                          <LineSegment Point="0.3,0" />
                                                          <LineSegment Point="0.2,1" />
                                                          <LineSegment Point="0,1" />
                                                          <LineSegment Point="0,0" />
                                                      </PathSegmentCollection>
                                                  </PathFigure.Segments>
                                              </PathFigure>
                                          </PathFigureCollection>
                                      </PathGeometry.Figures>
                                  </PathGeometry>
                              </GeometryDrawing.Geometry>
                              <GeometryDrawing.Brush>
                                  <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                                      <GradientStop Offset="0.0" Color="Transparent" />
                                      <GradientStop Offset="0.7" Color="#58FFFFFF" />
                                      <GradientStop Offset="1.0" Color="#AFFFFFFF" />
                                  </LinearGradientBrush>
                              </GeometryDrawing.Brush>
                          </GeometryDrawing>
                      </DrawingGroup>
                  </DrawingBrush.Drawing>
              </DrawingBrush>
          </StackPanel.Background>
      </StackPanel>
  </Window>

现在,如果我将此窗口大小调整为高度的一半,闪烁的倾斜角度与以前不同:

Resized to half the height

我明白上面的代码应该是像这样工作,我的问题是:如何创建相同的效果,以便在调整大小时保留多边形段的角度?半高调整大小所需的最终结果是:

Desired resize to half the height: angle of the glint is returned

I created a glossy panel effect that looks like this:

Glossy panel

This is the XAML:

  <Window x:Class="Window1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="Window1" Height="200" Width="300">
      <StackPanel Orientation="Vertical">
          <StackPanel.Background>
              <DrawingBrush>
                  <DrawingBrush.Drawing>
                      <DrawingGroup>
                          <GeometryDrawing>
                              <GeometryDrawing.Geometry>
                                  <RectangleGeometry Rect="0,0,1,1"></RectangleGeometry>
                              </GeometryDrawing.Geometry>
                              <GeometryDrawing.Brush>
                                  <SolidColorBrush Opacity="0.5" Color="Blue" />
                              </GeometryDrawing.Brush>
                          </GeometryDrawing>
                          <GeometryDrawing>
                              <GeometryDrawing.Geometry>
                                  <PathGeometry>
                                      <PathGeometry.Figures>
                                          <PathFigureCollection>
                                              <PathFigure IsClosed="True" StartPoint="0,0">
                                                  <PathFigure.Segments>
                                                      <PathSegmentCollection>
                                                          <LineSegment Point="0.3,0" />
                                                          <LineSegment Point="0.2,1" />
                                                          <LineSegment Point="0,1" />
                                                          <LineSegment Point="0,0" />
                                                      </PathSegmentCollection>
                                                  </PathFigure.Segments>
                                              </PathFigure>
                                          </PathFigureCollection>
                                      </PathGeometry.Figures>
                                  </PathGeometry>
                              </GeometryDrawing.Geometry>
                              <GeometryDrawing.Brush>
                                  <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                                      <GradientStop Offset="0.0" Color="Transparent" />
                                      <GradientStop Offset="0.7" Color="#58FFFFFF" />
                                      <GradientStop Offset="1.0" Color="#AFFFFFFF" />
                                  </LinearGradientBrush>
                              </GeometryDrawing.Brush>
                          </GeometryDrawing>
                      </DrawingGroup>
                  </DrawingBrush.Drawing>
              </DrawingBrush>
          </StackPanel.Background>
      </StackPanel>
  </Window>

Now, if I resize this window to half the height, the glint is slanted at a different angle than before:

Resized to half the height

I understand that the code above is supposed to work like this, and my question is: How do I create the same effect such that the angle of the polygon segment is preserved on resize? The desired end result for the half height resize is:

Desired resize to half the height: angle of the glint is preserved

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

蝶…霜飞 2024-12-17 11:59:28

我认为

    <DrawingBrush Stretch="UniformToFill">
        ...

应该做到这一点。

I think

    <DrawingBrush Stretch="UniformToFill">
        ...

should do the trick.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文