如何在应用为剪辑之前使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

不幸的是，这并不是一件小事。要调整剪切路径以使其初始大小适合或随元素一起调整大小，您必须求助于代码。codeplex上混合样本的ClippingBehavior很好地说明了该技术。通过将行为应用于 UIElement，您将获得圆角矩形形式的剪切路径。此剪切路径的大小会随着关联的 UIElement 的大小调整而调整。