パフォーマンスの最適化:2D グラフィックスとイメージングOptimizing Performance: 2D Graphics and Imaging

WPFWPF には、アプリケーションの要件に合わせて最適化できる広範な 2D グラフィックス機能とイメージング機能が用意されています。provides a wide range of 2D graphics and imaging functionality that can be optimized for your application requirements. このトピックでは、この領域でのパフォーマンスの最適化に関する情報を提供します。This topic provides information about performance optimization in those areas.

描画と図形Drawing and Shapes

WPFWPFにはDrawingShapeグラフィック描画コンテンツを表すオブジェクトとオブジェクトの両方が用意されています。provides both Drawing and Shape objects to represent graphical drawing content. ただし、 DrawingオブジェクトはオブジェクトよりもShape単純なコンストラクトであり、より優れたパフォーマンス特性を提供します。However, Drawing objects are simpler constructs than Shape objects and provide better performance characteristics.

Shape使用すると、画面にグラフィカルな図形を描画できます。A Shape allows you to draw a graphical shape to the screen. これらはFrameworkElementクラスから派生するため、 Shapeオブジェクトは、パネルやほとんどのコントロール内で使用できます。Because they are derived from the FrameworkElement class, Shape objects can be used inside panels and most controls.

WPFWPF には、グラフィックス サービスやレンダリング サービスへのアクセスのレイヤーがいくつか用意されています。offers several layers of access to graphics and rendering services. 最上位のレイヤーでShapeは、オブジェクトは簡単に使用でき、レイアウトやイベント処理などの多くの便利な機能を提供します。At the top layer, Shape objects are easy to use and provide many useful features, such as layout and event handling. WPFWPF には、すぐに使用できるさまざまな図形オブジェクトが用意されています。provides a number of ready-to-use shape objects. すべての図形オブジェクトは、 Shapeクラスから継承されます。All shape objects inherit from the Shape class. 使用できる図形オブジェクトEllipse Line Polygon Polylineには、、、 Rectangle、、、およびがあります。 PathAvailable shape objects include Ellipse, Line, Path, Polygon, Polyline, and Rectangle.

Drawing一方、オブジェクトはFrameworkElementクラスから派生せず、形状、画像、およびテキストをレンダリングするための軽量な実装を提供します。Drawing objects, on the other hand, do not derive from the FrameworkElement class and provide a lighter-weight implementation for rendering shapes, images, and text.

オブジェクトには、次Drawingの4種類があります。There are four types of Drawing objects:

オブジェクトGeometryDrawingは、ジオメトリの内容を表示するために使用されます。The GeometryDrawing object is used to render geometry content. クラスGeometryおよびそれから派生した具象クラス ( CombinedGeometryEllipseGeometryPathGeometryなど) は、2d グラフィックスをレンダリングするための手段と、ヒットテストとクリッピングサポートを提供します。The Geometry class and the concrete classes which derive from it, such as CombinedGeometry, EllipseGeometry, and PathGeometry, provide a means for rendering 2D graphics, as well as providing hit-testing and clipping support. ジオメトリ オブジェクトを使用すると、たとえば、コントロールの領域を定義したり、イメージに適用するクリップ領域を定義したりすることができます。Geometry objects can be used to define the region of a control, for example, or to define the clip region to apply to an image. ジオメトリ オブジェクトは、四角形や円などの単純な領域にすることも、2 つ以上のジオメトリ オブジェクトから作成された複合的な領域にすることもできます。Geometry objects can be simple regions, such as rectangles and circles, or composite regions created from two or more geometry objects. ArcSegmentPathSegmentBezierSegmentなどの派生オブジェクトを組み合わせることによって、より複雑なジオメトリック領域をQuadraticBezierSegment作成できます。More complex geometric regions can be created by combining PathSegment-derived objects, such as ArcSegment, BezierSegment, and QuadraticBezierSegment.

サーフェイスGeometryでは、クラスShapeとクラスは非常に似ています。On the surface, the Geometry class and the Shape class are quite similar. 両方とも2d グラフィックスのレンダリングで使用されます。 EllipseGeometryまた、とEllipseなど、これらのクラスから派生する類似の具象クラスもあります。Both are used in the rendering of 2D graphics and both have similar concrete classes which derive from them, for example, EllipseGeometry and Ellipse. ただし、この 2 つのクラスのセットの間には重要な違いがいくつかあります。However, there are important differences between these two sets of classes. 1つGeometryのクラスには、クラス自体を描画するShape機能など、クラスの機能の一部が不足しています。For one, the Geometry class lacks some of the functionality of the Shape class, such as the ability to draw itself. ジオメトリ オブジェクトを描画するには、DrawingContext、Drawing、Path (Path が Shape であることは注目に値します) などの別のクラスを使用して描画操作を実行する必要があります。To draw a geometry object, another class such as DrawingContext, Drawing, or a Path (it is worth noting that a Path is a Shape) must be used to perform the drawing operation. 塗りつぶし、ストローク、ストロークの太さなどの描画プロパティは、ジオメトリ オブジェクトを描画するクラスにあります。一方、図形オブジェクトにはこれらのプロパティが含まれています。Rendering properties such as fill, stroke, and the stroke thickness are on the class which draws the geometry object, while a shape object contains these properties. この違いは、ジオメトリ オブジェクトが円などの領域を定義するのに対し、図形オブジェクトは領域を定義するとともに、その領域の塗りつぶしやアウトラインも定義し、レイアウト システムに参加する、と考えることができます。One way to think of this difference is that a geometry object defines a region, a circle for example, while a shape object defines a region, defines how that region is filled and outlined, and participates in the layout system.

オブジェクトShapeFrameworkElementクラスから派生するため、それらを使用すると、アプリケーションのメモリ消費量が大幅に増加する可能性があります。Since Shape objects derive from the FrameworkElement class, using them can add significantly more memory consumption in your application. グラフィカルコンテンツのFrameworkElement機能が不要な場合は、軽量Drawingのオブジェクトを使用することを検討してください。If you really do not need the FrameworkElement features for your graphical content, consider using the lighter-weight Drawing objects.

オブジェクトのDrawing詳細については、「 Drawing オブジェクトの概要」を参照してください。For more information on Drawing objects, see Drawing Objects Overview.

StreamGeometry オブジェクトStreamGeometry Objects

オブジェクトStreamGeometryは、幾何学図形をPathGeometry作成するための軽量の代替です。The StreamGeometry object is a lightweight alternative to PathGeometry for creating geometric shapes. 複雑なStreamGeometryジオメトリを記述する必要がある場合は、を使用します。Use a StreamGeometry when you need to describe a complex geometry. StreamGeometryは、多数PathGeometryのオブジェクトを処理するために最適化されておりPathGeometry 、多くの個別のオブジェクトを使用する場合と比較してパフォーマンスが向上します。StreamGeometry is optimized for handling many PathGeometry objects and performs better when compared to using many individual PathGeometry objects.

次の例では、属性構文を使用StreamGeometryXAMLXAMLて、に三角形を作成します。The following example uses attribute syntax to create a triangular StreamGeometry in XAMLXAML.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <StackPanel>
  
    <Path Data="F0 M10,100 L100,100 100,50Z" 
      StrokeThickness="1" Stroke="Black"/>

  </StackPanel>
</Page>

オブジェクトのStreamGeometry詳細については、「 streamgeometry を使用して図形を作成する」を参照してください。For more information on StreamGeometry objects, see Create a Shape Using a StreamGeometry.

DrawingVisual オブジェクトDrawingVisual Objects

DrawingVisualオブジェクトは、図形、画像、またはテキストを表示するために使用される軽量の描画クラスです。The DrawingVisual object is a lightweight drawing class that is used to render shapes, images, or text. このクラスが軽量と見なされる理由は、レイアウトやイベントの処理を行わないことで、パフォーマンスが向上するからです。This class is considered lightweight because it does not provide layout or event handling, which improves its performance. そのため、背景やクリップ アートの描画に適しています。For this reason, drawings are ideal for backgrounds and clip art. 詳しくは、「DrawingVisual オブジェクトの使用」を参照してください。For more information, see Using DrawingVisual Objects.

画像Images

WPFWPFイメージングを使用すると、以前のバージョンの Windows では、イメージング機能が大幅に向上します。imaging provides a significant improvement over the imaging capabilities in previous versions of Windows. イメージング機能 (ビットマップの表示や一般的なコントロール上でのイメージの使用など) は、以前は主に Microsoft Windows Graphics Device Interface (GDI) または Microsoft Windows GDI+ のアプリケーション プログラミング インターフェイス (API) によって処理されていました。Imaging capabilities, such as displaying a bitmap or using an image on a common control were primarily handled by the Microsoft Windows Graphics Device Interface (GDI) or Microsoft Windows GDI+ application programming interface (API). これらの API では、基本的なイメージング機能は提供されていましたが、コーデック拡張機能のサポートや高品質なイメージのサポートなどの機能が不足していました。These API provided baseline imaging functionality, but lacked features such as support for codec extensibility and high fidelity image support. WPF Imaging API は、GDI および GDI+ の欠点を克服し、アプリケーション内でイメージを表示および使用するための新しい API のセットを提供するために再設計されています。WPF Imaging API have been redesigned to overcome the shortcomings of GDI and GDI+ and provide a new set of API to display and use images within your applications.

イメージを使用する際には、パフォーマンスを向上させるために以下の推奨事項をご検討ください。When using images, consider the following recommendations for gaining better performance:

  • アプリケーションでサムネイル イメージを表示する必要がある場合は、縮小版のイメージを作成することをご検討ください。If your application requires you to display thumbnail images, consider creating a reduced-sized version of the image. 既定では、WPFWPFは読み込んだイメージを本来のサイズにデコードします。By default, WPFWPF loads your image and decodes it to its full size. サムネイル バージョンのイメージのみが必要な場合は、WPFWPF がイメージを本来のサイズにデコードしてからサムネイル サイズに縮小するという無駄が生じます。If you only want a thumbnail version of the image, WPFWPF unnecessary decodes the image to its full-size and then scales it down to a thumbnail size. この不要なオーバーヘッドを回避するには、WPFWPF に対してイメージをサムネイル サイズにデコードするように要求するか、WPFWPF にサムネイル サイズのイメージを読み込むように要求します。To avoid this unnecessary overhead, you can either request WPFWPF to decode the image to a thumbnail size, or request WPFWPF to load a thumbnail size image.

  • イメージは常に、既定のサイズではなく必要なサイズにデコードするようにしてください。Always decode the image to desired size and not to the default size. 前述のように、既定の実際のサイズではなく必要なサイズにイメージをデコードするように WPFWPF に要求します。As mentioned above, request WPFWPF to decode your image to a desired size and not the default full size. これにより、アプリケーションの作業セットを縮小できるだけでなく、実行速度も向上します。You will reduce not only your application's working set, but execution speed as well.

  • 可能であれば、複数のイメージを 1 つに結合します (複数のイメージから成るフィルム ストリップなど)。If possible, combine the images into a single image, such as a film strip composed of multiple images.

  • 詳しくは、「 イメージングの概要」をご覧ください。For more information, see Imaging Overview.

BitmapScalingModeBitmapScalingMode

ビットマップのスケーリングをアニメーション化する場合、既定の高品質イメージの再サンプリング アルゴリズムは、フレーム レートを低下させるほどシステム リソースを消費する場合があり、実際にはアニメーションの動きが滑らかでなくなることがあります。When animating the scale of any bitmap, the default high-quality image re-sampling algorithm can sometimes consume sufficient system resources to cause frame rate degradation, effectively causing animations to stutter. オブジェクトのプロパティをにLowQuality設定すると、ビットマップをスケーリングするときに、より滑らかなアニメーションを作成できます。 BitmapScalingMode RenderOptionsBy setting the BitmapScalingMode property of the RenderOptions object to LowQuality you can create a smoother animation when scaling a bitmap. LowQualityモードは、 WPFWPFイメージを処理するときに品質最適化アルゴリズムから速度最適化アルゴリズムに切り替えるようにレンダリングエンジンに指示します。LowQuality mode tells the WPFWPF rendering engine to switch from a quality-optimized algorithm to a speed-optimized algorithm when processing images.

次の例は、 BitmapScalingModeイメージオブジェクトのを設定する方法を示しています。The following example shows how to set the BitmapScalingMode for an image object.

// Set the bitmap scaling mode for the image to render faster.
RenderOptions.SetBitmapScalingMode(MyImage, BitmapScalingMode.LowQuality);
' Set the bitmap scaling mode for the image to render faster.
RenderOptions.SetBitmapScalingMode(MyImage, BitmapScalingMode.LowQuality)

CachingHintCachingHint

既定WPFWPFでは、は、 DrawingBrushVisualBrushなどのオブジェクトTileBrushの表示内容をキャッシュしません。By default, WPFWPF does not cache the rendered contents of TileBrush objects, such as DrawingBrush and VisualBrush. シーンTileBrush内のの内容も使用も変更されていない静的なシナリオでは、ビデオメモリを節約するため、これは理にかなっています。In static scenarios where neither the contents nor use of the TileBrush in the scene is changing, this makes sense, since it conserves video memory. 静的なコンテンツTileBrushを含むが静的な方法で使用されている場合 (たとえば、回転する3d オブジェクトの表面に静的DrawingBrushまたVisualBrushはが割り当てられている場合)、あまり意味がありません。It does not make as much sense when a TileBrush with static content is used in a non-static way—for example, when a static DrawingBrush or VisualBrush is mapped to the surface of a rotating 3D object. WPFWPF既定の動作では、コンテンツが変更されていDrawingBrushない場合でも、すべてのフレームに対してまたはVisualBrushのコンテンツ全体が再レンダリングされます。The default behavior of WPFWPF is to re-render the entire content of the DrawingBrush or VisualBrush for every frame, even though the content is unchanging.

オブジェクトのプロパティをにCache設定すると、タイル化されたブラシオブジェクトのキャッシュされたバージョンを使用してパフォーマンスを向上させることができます。 CachingHint RenderOptionsBy setting the CachingHint property of the RenderOptions object to Cache you can increase performance by using cached versions of the tiled brush objects.

プロパティCacheInvalidationThresholdMinimumCacheInvalidationThresholdMaximumとプロパティ値は、スケールの変更によっTileBrushてオブジェクトを再生成するタイミングを決定する相対サイズ値です。The CacheInvalidationThresholdMinimum and CacheInvalidationThresholdMaximum property values are relative size values that determine when the TileBrush object should be regenerated due to changes in scale. たとえば、 CacheInvalidationThresholdMaximumプロパティを2.0 に設定すると、そのサイズが現在TileBrushのキャッシュのサイズの2倍を超える場合にのみ、のキャッシュを再生成する必要があります。For example, by setting the CacheInvalidationThresholdMaximum property to 2.0, the cache for the TileBrush only needs to be regenerated when its size exceeds twice the size of the current cache.

次の例は、のDrawingBrushキャッシュヒントオプションを使用する方法を示しています。The following example shows how to use the caching hint option for a DrawingBrush.

DrawingBrush drawingBrush = new DrawingBrush();
            
// Set the caching hint option for the brush.
RenderOptions.SetCachingHint(drawingBrush, CachingHint.Cache);

// Set the minimum and maximum relative sizes for regenerating the tiled brush.
// The tiled brush will be regenerated and re-cached when its size is
// 0.5x or 2x of the current cached size.
RenderOptions.SetCacheInvalidationThresholdMinimum(drawingBrush, 0.5);
RenderOptions.SetCacheInvalidationThresholdMaximum(drawingBrush, 2.0);
Dim drawingBrush As New DrawingBrush()

' Set the caching hint option for the brush.
RenderOptions.SetCachingHint(drawingBrush, CachingHint.Cache)

' Set the minimum and maximum relative sizes for regenerating the tiled brush.
' The tiled brush will be regenerated and re-cached when its size is
' 0.5x or 2x of the current cached size.
RenderOptions.SetCacheInvalidationThresholdMinimum(drawingBrush, 0.5)
RenderOptions.SetCacheInvalidationThresholdMaximum(drawingBrush, 2.0)

関連項目See also