HOW TO:對圖形套用 BitmapEffect

本範例說明如何將 BitmapEffect 套用到繪圖。 使用 BitmapEffect 可產生模糊或浮凸效果,或將其他視覺效果套用到呈現的內容。

只有 DrawingGroup 物件才支援點陣圖效果。 若要將點陣圖效果套用到其他型別的 Drawing 物件,請將物件加入到 DrawingGroup,然後設定 DrawingGroup 物件的 BitmapEffect 屬性。

注意事項注意事項

Windows Presentation Foundation (WPF) 點陣圖效果是由軟體呈現的。任何套用 BitmapEffect 的物件也會呈現在軟體中。請避免在大型圖形或動畫使用 BitmapEffect,因為這會導致系統效能降低。

範例

下列範例會使用 DrawingGroup,將 BlurBitmapEffect 套用至多個 GeometryDrawing 物件。

下圖顯示的是前述範例的輸出。

具有 BlurBitmapEffect 的 DrawingGroup

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Media.Effects;

namespace SDKSample 
{

    /// <summary>
    /// This example creates two DrawingGroup objects,
    /// one with a bitmap effect and one without.
    /// </summary>
    public class BitmapEffectExample : Page
    {
        public BitmapEffectExample()
        {

            //
            // Create a DrawingGroup
            // that has no BitmapEffect
            //
            PathFigure pLineFigure = new PathFigure();
            pLineFigure.StartPoint = new Point(25, 25);
            PolyLineSegment pLineSegment = new PolyLineSegment();
            pLineSegment.Points.Add(new Point(0,50));
            pLineSegment.Points.Add(new Point(25, 75));
            pLineSegment.Points.Add(new Point(50, 50));
            pLineSegment.Points.Add(new Point(25, 25));
            pLineSegment.Points.Add(new Point(25, 0));
            pLineFigure.Segments.Add(pLineSegment);
            PathGeometry pGeometry = new PathGeometry();
            pGeometry.Figures.Add(pLineFigure);

            GeometryDrawing drawing1 = new GeometryDrawing(
                    Brushes.Lime, 
                    new Pen(Brushes.Black, 10),
                    pGeometry
                );

            GeometryDrawing drawing2 = new GeometryDrawing(
                    Brushes.Lime,
                    new Pen(Brushes.Black, 2),
                    new EllipseGeometry(new Point(10,10), 5, 5)
                );

            // Create a DrawingGroup
            DrawingGroup drawingGroupWithoutBitmapEffect = new DrawingGroup();
            drawingGroupWithoutBitmapEffect.Children.Add(drawing1);
            drawingGroupWithoutBitmapEffect.Children.Add(drawing2);

            // Use an Image control and a DrawingImage to
            // display the drawing.
            DrawingImage drawingImage01 = new DrawingImage(drawingGroupWithoutBitmapEffect);

            // Freeze the DrawingImage for performance benefits.
            drawingImage01.Freeze();

            Image image01 = new Image();
            image01.Source = drawingImage01;
            image01.Stretch = Stretch.None;
            image01.HorizontalAlignment = HorizontalAlignment.Left;

            //
            // Create another DrawingGroup and apply 
            // a blur effect to it.
            //

            // Create a clone of the first DrawingGroup.
            DrawingGroup drawingGroupWithBitmapEffect = 
                drawingGroupWithoutBitmapEffect.Clone();

            // Create a blur effect.
            BlurBitmapEffect blurEffect = new BlurBitmapEffect();
            blurEffect.Radius = 3.0;

            // Apply it to the drawing group.
            drawingGroupWithBitmapEffect.BitmapEffect = blurEffect;

            // Use another Image control and DrawingImage
            // to display the drawing.
            DrawingImage drawingImage02 = new DrawingImage(drawingGroupWithBitmapEffect);

            // Freeze the DrawingImage for performance benefits.
            drawingImage02.Freeze();

            Image image02 = new Image();
            image02.Source = drawingImage02;
            image02.Stretch = Stretch.None;
            image02.HorizontalAlignment = HorizontalAlignment.Left;

            // Create borders around the images and add them to the
            // page.
            Border border01 = new Border();
            border01.BorderBrush = Brushes.Gray;
            border01.BorderThickness = new Thickness(1);
            border01.VerticalAlignment = VerticalAlignment.Top;
            border01.Margin = new Thickness(10);
            border01.Child = image01;

            Border border02 = new Border();
            border02.BorderBrush = Brushes.Gray;
            border02.BorderThickness = new Thickness(1);
            border02.VerticalAlignment = VerticalAlignment.Top;
            border02.Margin = new Thickness(50,10,10,10);
            border02.Child = image02;

            StackPanel mainPanel = new StackPanel();
            mainPanel.Orientation = Orientation.Horizontal;
            mainPanel.HorizontalAlignment = HorizontalAlignment.Left;
            mainPanel.VerticalAlignment = VerticalAlignment.Top;
            mainPanel.Children.Add(border01);
            mainPanel.Children.Add(border02);

            //
            // Use a DrawingBrush to create a checkered background for the page.
            //
            GeometryDrawing backgroundSquareDrawing = 
                new GeometryDrawing(
                    Brushes.White,
                    null,
                    new RectangleGeometry(new Rect(0,0,1,1)));
            GeometryGroup twoRectangles = new GeometryGroup();
            twoRectangles.Children.Add(new RectangleGeometry(new Rect(0,0,0.5,0.5)));
            twoRectangles.Children.Add(new RectangleGeometry(new Rect(0.5,0.5,0.5,0.5)));
            SolidColorBrush squaresBrush = 
                new SolidColorBrush(Color.FromArgb(102,204,204,204));
            squaresBrush.Opacity = 0.4;
            GeometryDrawing checkerDrawing = 
                new GeometryDrawing(
                    squaresBrush,
                    null,
                    twoRectangles);
            DrawingGroup checkerDrawings = new DrawingGroup();
            checkerDrawings.Children.Add(backgroundSquareDrawing);
            checkerDrawings.Children.Add(checkerDrawing);
            DrawingBrush checkerBrush = new DrawingBrush(checkerDrawings);
            checkerBrush.Viewport = new Rect(0,0,10,10);
            checkerBrush.ViewportUnits = BrushMappingMode.Absolute;
            checkerBrush.TileMode = TileMode.Tile;
            checkerBrush.Freeze();

            this.Background = checkerBrush;
            this.Content = mainPanel;

        }

    }
}
<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:PresentationOptions="https://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
  xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="PresentationOptions">

  <StackPanel Margin="20" Orientation="Horizontal" 
    HorizontalAlignment="Left" VerticalAlignment="Top">

    <!-- Shows the DrawingGroup without the blur effect. -->
    <Border BorderBrush="Gray" BorderThickness="1"  Margin="10"
      VerticalAlignment="Top">
      <Image Stretch="None" HorizontalAlignment="Left">
        <Image.Source>
          <DrawingImage PresentationOptions:Freeze="True">
            <DrawingImage.Drawing>
              <DrawingGroup>
                <GeometryDrawing Brush="Lime" Geometry="M 25,25 L 0,50 25,75 50,50 25,25 25,0">
                  <GeometryDrawing.Pen>
                    <Pen Thickness="10" Brush="Black" />
                  </GeometryDrawing.Pen>
                </GeometryDrawing>
                <GeometryDrawing Brush="Lime">
                  <GeometryDrawing.Geometry>
                    <EllipseGeometry Center="10,10" RadiusX="5" RadiusY="5" />
                  </GeometryDrawing.Geometry>
                  <GeometryDrawing.Pen>
                    <Pen Thickness="2" Brush="Black" />
                  </GeometryDrawing.Pen>
                </GeometryDrawing>
              </DrawingGroup>
            </DrawingImage.Drawing>
          </DrawingImage>
        </Image.Source>
      </Image>
    </Border>

    <Border BorderBrush="Gray" BorderThickness="1" Margin="50,10,10,10"
      VerticalAlignment="Top">
      <Image Stretch="None" HorizontalAlignment="Left">
        <Image.Source>
          <DrawingImage PresentationOptions:Freeze="True">
            <DrawingImage.Drawing>

              <!-- The drawing group, with a BlurBitmapEffect. -->
              <DrawingGroup>
                <GeometryDrawing Brush="Lime" Geometry="M 25,25 L 0,50 25,75 50,50 25,25 25,0">
                  <GeometryDrawing.Pen>
                    <Pen Thickness="10" Brush="Black" />
                  </GeometryDrawing.Pen>
                </GeometryDrawing>
                <GeometryDrawing Brush="Lime">
                  <GeometryDrawing.Geometry>
                    <EllipseGeometry Center="10,10" RadiusX="5" RadiusY="5" />
                  </GeometryDrawing.Geometry>
                  <GeometryDrawing.Pen>
                    <Pen Thickness="2" Brush="Black" />
                  </GeometryDrawing.Pen>
                </GeometryDrawing>

                <DrawingGroup.BitmapEffect>
                  <BlurBitmapEffect Radius="5"  />
                </DrawingGroup.BitmapEffect>
              </DrawingGroup>
            </DrawingImage.Drawing>
          </DrawingImage>
        </Image.Source>
      </Image>
    </Border>
  </StackPanel>

  <Page.Background>

    <!-- Creates a checkered background. -->
    <DrawingBrush Viewport="0,0,10,10" ViewportUnits="Absolute" TileMode="Tile"
      PresentationOptions:Freeze="True">
      <DrawingBrush.Drawing>
        <DrawingGroup>
          <GeometryDrawing Brush="White">
            <GeometryDrawing.Geometry>
              <RectangleGeometry Rect="0 0 1 1"/>
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
          <GeometryDrawing Brush="#66CCCCCC">
            <GeometryDrawing.Geometry>
              <GeometryGroup>
                <RectangleGeometry Rect="0 0 0.5 0.5" />
                <RectangleGeometry Rect="0.5 0.5 0.5 0.5"/>
              </GeometryGroup>
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
        </DrawingGroup>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Page.Background>
</Page>

請參閱

參考

BitmapEffect

PresentationOptions:Freeze 屬性

Freeze

概念

繪圖物件概觀

點陣圖效果概觀

Freezable 物件概觀