如何在将 Silverlight 剪辑数据作为剪辑应用之前调整其大小答案

【问题标题】：How to Make a Silverlight Clip Data Resize before being Applied as a Clip如何在将 Silverlight 剪辑数据作为剪辑应用之前调整其大小
【发布时间】：2012-01-26 22:34:54
【问题描述】：

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

第一步

<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>

我现在想使用这个路径来剪辑图像。我只能将数据属性复制到剪辑路径中。

<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>

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

【问题讨论】：

标签： silverlight silverlight-4.0

【解决方案1】：

不幸的是，这不是微不足道的。要调整剪切路径，使其初始大小与元素一起调整或调整大小，您必须借助代码。 Blend Samples on codeplex 中的 ClippingBehavior 很好地说明了这种技术。通过将行为应用于 UIElement，您可以获得圆角矩形形式的剪切路径。此剪切路径会随着关联的 UIElement 调整大小而调整大小。

【讨论】：

即使是 ClippingBehavior 代码实际上也会重新创建路径数据以适应新的大小。如果我们谈论的是一个复杂的形状，那么几乎不可能知道如何调整形状中每个节点的大小。我的问题是我如何才能像将 Stretch=Fill 设置为 Path 元素一样拉伸或收缩整个路径形状以适应特定大小。
简短的回答是您必须每次都重新创建几何。 Path 实际上是一个渲染几何图形（由直线、弧线等组成）的 UIElement。要执行剪裁，请使用 Geometry 对象，而不是 Path 对象。您可能能够捕捉图像上的调整大小事件，计算新旧值之间的大小差异，然后使用该值创建一个 ScaleTransform，然后将其应用于几何对象。查看文档，这看起来可能，但我还没有尝试过。我希望你会从缩放中得到扭曲，但在你的场景中它们可能是可以接受的。

【解决方案2】：

我会使用着色器，因为它们的速度要快得多。如果您根本没有使用 WPF/Silverlight 着色器，则必须下载着色器和构建任务。 WPF/Silverlight Shader examples 和 Shader Effect Build Task

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

程序

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

代码

<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>

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

这方面的好处是，只要应用了效果，它就会在形状移动/调整大小/等时快速更新。

【讨论】：