Как изменить размер данных клипа 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

Я бы использовал шейдеры, потому что они намного быстрее. Если вы вообще не сталкивались с шейдерами WPF / Silverlight, вам придется загрузить шейдеры и задачу сборки. Примеры шейдеров WPF / Silverlight и Задача построения эффекта шейдера

Я бы показал вам, как это сделать, но это заняло бы у меня около часа или около того, и если вы захотите пойти по этому пути, я с радостью вам помогу.

Процедура

1. Установить задачу построения эффекта шейдера
2. Посмотрите как пример проекта
3. Создать шейдер клипов с параметрами
   1. Изображение
   2. Путь к клипам как изображение
   3. Клипса цветная
4. Затем в шейдере наложить изображение и кисть Path Path.
5. Удалить пиксели, которые не наложены
6. Установите исходное изображение Efeect для созданного вами шейдера Clip

КОД

<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 ссылка на созданную вами библиотеку шейдеров.

Хорошая сторона этого заключается в том, что до тех пор, пока эффект применяется, он будет ДЕЙСТВИТЕЛЬНО быстро обновляться при перемещении / изменении размера фигуры / и т.д.

Answer 2

К сожалению, это нетривиально.Чтобы скорректировать обтравочный контур таким образом, чтобы он либо изначально имел размер, либо изменял размер вместе с элементом, вам нужно прибегнуть к коду. ClippingBehavior из Blend Samples на codeplex является хорошей иллюстрацией этого метода.Применяя поведение к UIElement, вы получаете обтравочный контур в форме скругленного прямоугольника.Этот обтравочный контур изменяет размеры при изменении размера соответствующего UIElement.