WPF几何（路径）部分填充形状 [英] WPF geometry (Path) partly filled shapes

问题描述

这个想法是获得评级控制，可以有0.3的值，并将其作为部分填充的形状。

我使用的方法在CodeProject文章中有描述。有路径，添加蒙版（矩形），添加大纲。

使用的原始代码保证金 for掩码和固定宽度的路径。

问题是使用矩形作为蒙版重新绘制背景，这是渐变，所以我不能为蒙版设置相同的背景值。
我改变了颜色，以使它更清晰。

The idea is to get rating control, that could have value like 0.3 and draw it as partly filled shape.
The approach I used was described in CodeProject article. Have Path, add mask (rectangle), add outline.
Original code used Margin for mask and fixed-width paths.
The problem is that using rectangle as mask re-draws background, which is gradient, so I can't set the same background value for mask. I've changed colors just to make it more clear.

有可能模拟部分填充的路径吗？

Is it possible to simulate partly filled paths?

<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

    <Grid x:Name="gdStar" Width="Auto" Height="Auto">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.5*"/>
            <ColumnDefinition Width="0.5*"/>
        </Grid.ColumnDefinitions>

        <Path 
            Grid.ColumnSpan="2"
        Fill="Red" Stretch="Fill" Stroke="Blue" StrokeThickness="1"  Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z"/>

        <Rectangle Grid.Column="1"
        Fill="Yellow"/>

        <Path 
            Grid.ColumnSpan="2"
            Fill="Transparent" Stretch="Fill" Stroke="Red" StrokeThickness="1" Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z"/>

    </Grid>


</Page>

编辑

这可能是错误的做法。还有什么可以使用的？ OpacityBrush / Clip？

EDIT
This could be wrong approach. What else could be used? OpacityBrush/Clip?

推荐答案

您是否在寻找类似这样的内容：

Are you looking for something like this:

<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">   
    <Grid x:Name="gdStar" Width="Auto" Height="Auto">
        <Path 
        Fill="Red" Stretch="Fill" Stroke="Blue" StrokeThickness="1"  Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z">
            <Path.OpacityMask>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop Color="Transparent" Offset="0.3"/>
                    <GradientStop Color="White" Offset="0.3"/>
                </LinearGradientBrush>
            </Path.OpacityMask>
        </Path>
        <Path 
            Fill="Transparent" Stretch="Fill" Stroke="Red" StrokeThickness="1" Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z"/> 
    </Grid>
</Page>

编辑这是一个版本，

<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" Background="yellow">   
    <Grid x:Name="gdStar" Width="Auto" Height="Auto">
        <Path 
        Fill="White" Stretch="Fill" Stroke="Blue" StrokeThickness="1"  Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z"/>
        <Path 
        Fill="Red" Stretch="Fill" Stroke="Blue" StrokeThickness="1"  Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z">
            <Path.OpacityMask>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop Color="Transparent" Offset="0.3"/>
                    <GradientStop Color="White" Offset="0.3"/>
                </LinearGradientBrush>
            </Path.OpacityMask>
        </Path>
        <Path 
            Fill="Transparent" Stretch="Fill" Stroke="Red" StrokeThickness="1" Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z"/> 
    </Grid>
</Page>

这篇关于WPF几何（路径）部分填充形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！