HOW TO:對圖形套用 BitmapEffect

更新:2007 年 11 月

本範例說明如何將 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>

請參閱

概念

繪圖物件概觀

點陣圖效果概觀

Freezable 物件概觀

參考

BitmapEffect

PresentationOptions:Freeze 屬性

Freeze