Silverlight中Image.OpacityMask上的矩形

Question

我想在WinPhone中為Image.OpacityMask添加Rectangle。

在WPF上非常簡單：

<Image 
      Grid.Row="4" Grid.Column="5"
      Height="150"
      Width="200"
      Source="sampleImages/Waterlilies.jpg">
  <Image.OpacityMask>
    <DrawingBrush>
      <DrawingBrush.Drawing>
        <GeometryDrawing>
          <GeometryDrawing.Geometry>
            <RectangleGeometry Rect="0.05,0.05 0.9,0.9" />
          </GeometryDrawing.Geometry>
      </GeometryDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Image.OpacityMask>
</Image>

但是在WinPhone上，我們不能使用DrawingBrush。

如何在WinPhone的OpasityMask上為圖像添加Rectangle？

Answer 1

似乎您只是在嘗試剪切圖像，因此可以使用可以設置為幾何體的Clip屬性。
如果實際上您想實現更復雜的功能，則可以使用WriteableBitmap將Geometry渲染為位圖，並在OpacityMask中使用可寫位圖。 以下附加屬性可以幫助您實現：

public class MyAttached
{

    public static readonly DependencyProperty GeometryOpacityMaskProperty =
        DependencyProperty.RegisterAttached("GeometryOpacityMask", typeof(Path), typeof(MyAttached), new PropertyMetadata(default(Path), GeometryOpacityMaskChanged));

    private static void GeometryOpacityMaskChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        FrameworkElement uiElement = d as FrameworkElement;

        Path path = e.NewValue as Path;
        if (path != null && uiElement != null)
        {
            WriteableBitmap writeableBitmap = new WriteableBitmap((int)uiElement.Width, (int)uiElement.Height);
            writeableBitmap.Render(path, new CompositeTransform());
            writeableBitmap.Invalidate();

            ImageBrush imageBrush=new ImageBrush();
            imageBrush.ImageSource = writeableBitmap;
            uiElement.OpacityMask = imageBrush;
        }
    }

    public static void SetGeometryOpacityMask(UIElement element, Path value)
    {
        element.SetValue(GeometryOpacityMaskProperty, value);
    }

    public static Path GetGeometryOpacityMask(UIElement element)
    {
        return (Path)element.GetValue(GeometryOpacityMaskProperty);
    }
}

您可以這樣使用：

<Image 

  Height="150"
  Width="200"
  Source="sampleImages/Waterlilies.jpg"
        Stretch="UniformToFill"
        >
        <phoneApp1:MyAttached.GeometryOpacityMask>
            <Path>
                <Path.Data>
                    <RectangleGeometry Rect="0.05,0.05 0.9,0.9" />
                </Path.Data>
            </Path>
        </phoneApp1:MyAttached.GeometryOpacityMask>
    </Image>

Answer 2

使用Image.Clip剪切零件圖像。

剪輯橢圓：

<Image Name="Img" Source="/UntitledImage.jpg">
  <Image.Clip>
    <EllipseGeometry Center="115,115" RadiusX="50" RadiusY="50"></EllipseGeometry>
  </Image.Clip>
</Image>

剪輯矩形：

<Image Name="oldImg" Source="/UntitledImage.jpg">
  <Image.Clip>
    <RectangleGeometry Rect="115,115,50,50"></RectangleGeometry>
  </Image.Clip>
</Image>