如何在应用为剪辑之前使Silverlight剪辑数据调整大小

Question

我希望剪辑路径自动拉伸到父元素的宽度和高度。

第1步

<Grid x:Name="LayoutRoot" Background="White" Width="600" Height="600">
    <Image Source="/Desert.jpg" Stretch="Fill"/>        
</Grid> 

我绘制的心形大于600x600

<Grid x:Name="LayoutRoot" Background="White" Width="600" Height="600">
    <Image Source="/Desert.jpg" Stretch="Fill"/>        
    <Path Fill="White" Data="M354.67316,103.43996 C347.2861,87.291679 314.84012,29.107136 238.84006,6.6071892 C238.84006,6.6071873 221.0666,0.84548211 194.3698,0.55251884 C178.35172,0.37673342 159.12123,2.1696978 138.58997,8.3571806 C83.839897,24.857141 53.460484,64.142944 45.710514,73.392952 C46.114811,72.734512 22.339975,106.35702 16.710522,129.89299 C16.710522,129.89299 5.8399811,163.85704 2.3399515,201.35704 C-0.48841667,232.44208 0.086564839,263.52527 3.0899818,294.60712 C7.9390402,321.28616 14.078016,345.58807 20.506205,369.35715 C20.506205,369.35715 35.150459,408.43985 42.839603,422.35718 C45.804752,434.26614 72.256622,476.54443 90.59005,496.54446 C96.256668,503.29446 140.23531,550.68713 177.56865,580.35413 C205.90199,603.85406 250.19028,642.08411 362.10699,691.58392 C362.10699,691.58392 362.48297,691.56604 362.48297,691.56604 C474.3996,642.06622 518.73267,603.81635 547.06598,580.31641 C584.39935,550.64935 628.14935,503.25381 633.81598,496.50381 C652.14935,476.50375 678.60126,434.22546 681.56635,422.31653 C689.25555,408.39914 703.89978,369.31644 703.89978,369.31644 C710.32794,345.54733 716.46692,321.24539 721.31592,294.56635 C724.31934,263.48447 724.89435,232.40128 722.06598,201.31622 C718.56592,163.81618 707.6955,129.85211 707.6955,129.85211 C702.06598,106.31613 678.2912,72.693611 678.6955,73.352051 C670.9455,64.102036 640.56616,24.816208 585.8161,8.3162394 C565.28485,2.1287501 546.05432,0.33578444 530.03632,0.51156342 C503.33951,0.80453354 485.56607,6.5662427 485.56607,6.5662479 C409.56607,29.066204 375.85822,86.731186 369.73306,103.39907 C367.48129,109.5267 364.90286,111.34041 362.5423,111.18388 C362.5423,111.18388 359.19095,113.31599 354.67316,103.43996 z" RenderTransformOrigin="0.5,0.5" />
</Grid> 

为了使心形适合600x600，我只需添加填充设置

<Grid x:Name="LayoutRoot" Background="White" Width="600" Height="600">
    <Image Source="/Desert.jpg" Stretch="Fill"/>        
    <Path Fill="White" Stretch="Fill" Data="M354.67316,103.43996 C347.2861,87.291679 314.84012,29.107136 238.84006,6.6071892 C238.84006,6.6071873 221.0666,0.84548211 194.3698,0.55251884 C178.35172,0.37673342 159.12123,2.1696978 138.58997,8.3571806 C83.839897,24.857141 53.460484,64.142944 45.710514,73.392952 C46.114811,72.734512 22.339975,106.35702 16.710522,129.89299 C16.710522,129.89299 5.8399811,163.85704 2.3399515,201.35704 C-0.48841667,232.44208 0.086564839,263.52527 3.0899818,294.60712 C7.9390402,321.28616 14.078016,345.58807 20.506205,369.35715 C20.506205,369.35715 35.150459,408.43985 42.839603,422.35718 C45.804752,434.26614 72.256622,476.54443 90.59005,496.54446 C96.256668,503.29446 140.23531,550.68713 177.56865,580.35413 C205.90199,603.85406 250.19028,642.08411 362.10699,691.58392 C362.10699,691.58392 362.48297,691.56604 362.48297,691.56604 C474.3996,642.06622 518.73267,603.81635 547.06598,580.31641 C584.39935,550.64935 628.14935,503.25381 633.81598,496.50381 C652.14935,476.50375 678.60126,434.22546 681.56635,422.31653 C689.25555,408.39914 703.89978,369.31644 703.89978,369.31644 C710.32794,345.54733 716.46692,321.24539 721.31592,294.56635 C724.31934,263.48447 724.89435,232.40128 722.06598,201.31622 C718.56592,163.81618 707.6955,129.85211 707.6955,129.85211 C702.06598,106.31613 678.2912,72.693611 678.6955,73.352051 C670.9455,64.102036 640.56616,24.816208 585.8161,8.3162394 C565.28485,2.1287501 546.05432,0.33578444 530.03632,0.51156342 C503.33951,0.80453354 485.56607,6.5662427 485.56607,6.5662479 C409.56607,29.066204 375.85822,86.731186 369.73306,103.39907 C367.48129,109.5267 364.90286,111.34041 362.5423,111.18388 C362.5423,111.18388 359.19095,113.31599 354.67316,103.43996 z" RenderTransformOrigin="0.5,0.5" />
</Grid> 

我现在想使用此路径剪辑图像。我只能将data属性复制到剪辑路径中。

<Grid x:Name="LayoutRoot" Background="White" Width="600" Height="600">
    <Image Source="/Desert.jpg" Stretch="Fill" Clip="M354.67316,103.43996 C347.2861,87.291679 314.84012,29.107136 238.84006,6.6071892 C238.84006,6.6071873 221.0666,0.84548211 194.3698,0.55251884 C178.35172,0.37673342 159.12123,2.1696978 138.58997,8.3571806 C83.839897,24.857141 53.460484,64.142944 45.710514,73.392952 C46.114811,72.734512 22.339975,106.35702 16.710522,129.89299 C16.710522,129.89299 5.8399811,163.85704 2.3399515,201.35704 C-0.48841667,232.44208 0.086564839,263.52527 3.0899818,294.60712 C7.9390402,321.28616 14.078016,345.58807 20.506205,369.35715 C20.506205,369.35715 35.150459,408.43985 42.839603,422.35718 C45.804752,434.26614 72.256622,476.54443 90.59005,496.54446 C96.256668,503.29446 140.23531,550.68713 177.56865,580.35413 C205.90199,603.85406 250.19028,642.08411 362.10699,691.58392 C362.10699,691.58392 362.48297,691.56604 362.48297,691.56604 C474.3996,642.06622 518.73267,603.81635 547.06598,580.31641 C584.39935,550.64935 628.14935,503.25381 633.81598,496.50381 C652.14935,476.50375 678.60126,434.22546 681.56635,422.31653 C689.25555,408.39914 703.89978,369.31644 703.89978,369.31644 C710.32794,345.54733 716.46692,321.24539 721.31592,294.56635 C724.31934,263.48447 724.89435,232.40128 722.06598,201.31622 C718.56592,163.81618 707.6955,129.85211 707.6955,129.85211 C702.06598,106.31613 678.2912,72.693611 678.6955,73.352051 C670.9455,64.102036 640.56616,24.816208 585.8161,8.3162394 C565.28485,2.1287501 546.05432,0.33578444 530.03632,0.51156342 C503.33951,0.80453354 485.56607,6.5662427 485.56607,6.5662479 C409.56607,29.066204 375.85822,86.731186 369.73306,103.39907 C367.48129,109.5267 364.90286,111.34041 362.5423,111.18388 C362.5423,111.18388 359.19095,113.31599 354.67316,103.43996 z"/>       
</Grid> 

所以我的问题是。如何将Path数据用于给定形状，并在将其作为剪辑应用之前调整其边界框的大小。或者如何在调整图像大小后将其剪辑为路径数据。

Answer 1

不幸的是，这不是一件轻而易举的事。要调整剪切路径以使其最初调整大小或与元素一起调整大小，您必须求助于代码。来自ClippingBehavior的Blend Samples on codeplex就是这种技术的一个很好的例证。通过将行为应用于UIElement，您将获得圆角矩形形式的剪切路径。当关联的UIElement调整大小时，此剪切路径会调整大小。

Answer 2

我这样做的方法是使用着色器，因为它们要快得多。如果您还没有搞乱WPF / Silverlight着色器，则必须下载着色器和构建任务。 WPF/Silverlight Shader examples和Shader Effect Build Task

我会告诉你该怎么做但是我需要一个小时左右的时间，如果你想走这条路，我很乐意帮助你。

程序

1. 安装着色器效果构建任务
2. 看作示例项目
3. 使用参数创建剪辑着色器
   1. 图像
   2. 将路径剪切为图像画笔
   3. 剪辑颜色
4. 然后在着色器中叠加图像和路径图像画笔。
5. 删除未覆盖的像素
6. 将原始图像效果设置为您创建的剪辑着色器

CODE

<Grid x:Name="LayoutRoot" Background="White" Width="600" Height="600">
    <Image Source="/Desert.jpg" Stretch="Fill">
        <Image.Effect>
            <effects:ClipShader ClipPath="{Binding ElementName="CLIPPATH"}" ClipColor="{Binding ElementName="CLIPPATH",Path="Fill"}"/>
        <Image.Effect>
    </Image>
</Grid>

effects：是您创建的着色器库的XAML引用。

关于这一点的好处是，只要效果被应用，当形状移动/调整大小/等时，它将立即快速更新。