wpf : 画像キャプチャーなどに使う枠の楽な作り方

デスクトップの動画や画像をキャプチャーするときに、その範囲をマウスで指定できるツールがあります。 その範囲指定の枠をwpfで楽に作るサンプルです。 あまり試してないけど、そこそこ良さそうな出来でした。 ここにメモを残しておきます。

このページを参考にしました。

• とんがれ! ほげたん ...... WPFでリサイズ可能な枠なしウィンドウを作成する

範囲選択用の枠はこんな感じです。

赤白の点線にしました。 こうすると背景が真っ白でも真っ赤でもどちらかの色は見えます。 左上の赤丸をドラッグすると枠全体を移動させることができます。 枠と赤丸は半透明にして、下が透けるようにしています。

xamlのコードはこちら。 見づらかったらテキストエディタなどにコピー&ペーストして見てください。

<Window x:Class="SimpleDesktopCapture.CaptureRectWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:SimpleDesktopCapture" mc:Ignorable="d" Title="領域選択" ShowInTaskbar="False" Width="800" Height="450" WindowStyle="None" AllowsTransparency="True" Background="Transparent" Topmost="True" Loaded="Window_Loaded" Closing="Window_Closing"> <Grid> <Border Name="border" BorderThickness="8" Opacity="0.5"> <Border.BorderBrush> <VisualBrush> <VisualBrush.Visual> <Grid Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=ActualWidth}" Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=ActualHeight}" > <Rectangle Stroke="White" StrokeThickness="6"/> <Rectangle StrokeDashArray="3 2" Stroke="Red" StrokeThickness="6"/> </Grid> </VisualBrush.Visual> </VisualBrush> </Border.BorderBrush> <Canvas Width="32" Height="32" HorizontalAlignment="Left" VerticalAlignment="Top"> <Ellipse Name="dragRegion" Canvas.Top="0" Canvas.Left="0" Width="32" Height="32" Fill="Red" Opacity="0.5" MouseLeftButtonDown="dragRegion_MouseLeftButtonDown" /> </Canvas> </Border> </Grid> </Window>

見て分かる通り、枠無しwindowを使っています。 Windowクラスのプロパティ(ShowInTaskbar、WindowStyle、AllowsTransparency、Background、Topmost)に必要な設定をします。 xamlにはウィンドウサイズを変更するための機能について書きません。

Windowに載っているのはBorderに囲まれたCanvasだけです。 BorderはVisualBrushで描きます。 完全に透明な部分にはマウスイベントは起きません。 このサンプルでは赤白のどちらかがあるので大丈夫ですが、例えば点線にすると線が途切れた部分はマウスでつかめないので操作しづらくなってしまいます。 そういう場合は十分な太さで非常に小さなOpacityを持つ枠を重ねて、その部分をつかめるようにします。

ペアになるxaml.csのコードはこうなります。

using System; using System.Windows; using System.Windows.Input; using System.Windows.Interop; namespace SimpleDesktopCapture { public partial class CaptureRectWindow : Window { private HwndSource _hWndSource = null; public CaptureRectWindow() { InitializeComponent(); } private void dragRegion_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { this.DragMove(); } private void Window_Loaded(object sender, RoutedEventArgs e) { _hWndSource = HwndSource.FromHwnd(new WindowInteropHelper(this).Handle); _hWndSource.AddHook(this.WndProc); } private void Window_Closing(object sender, System.ComponentModel.CancelEventArgs e) { if(_hWndSource != null) _hWndSource.Dispose(); } private IntPtr WndProc(IntPtr hwnd, int msg, IntPtr wParam, IntPtr lParam, ref bool handled) { if(msg != WinSdk.WM_NCHITTEST) return IntPtr.Zero; handled = true; var pt = new Point((int)lParam & 0xFFFF, ((int)lParam >> 16) & 0xFFFF); pt = PointFromScreen(pt); var th = border.BorderThickness.Top; var aw = this.ActualWidth; var ah = this.ActualHeight; var r = new Rect(0, 0, th, th); // 4つ角 if(r.Contains(pt)) return WinSdk.HTTOPLEFT; r.X = aw - th; if(r.Contains(pt)) return WinSdk.HTTOPRIGHT; r.X = 0; r.Y = ah - th; if(r.Contains(pt)) return WinSdk.HTBOTTOMLEFT; r.X = aw - th; if(r.Contains(pt)) return WinSdk.HTBOTTOMRIGHT; // 4辺 r.X = 0; r.Y = 0; r.Width = aw; r.Height = th; if(r.Contains(pt)) return WinSdk.HTTOP; r.Width = th; r.Height = ah; if(r.Contains(pt)) return WinSdk.HTLEFT; r.X = aw - th; if(r.Contains(pt)) return WinSdk.HTRIGHT; r.X = 0; r.Y = ah - th; r.Width = aw; r.Height = th; if(r.Contains(pt)) return WinSdk.HTBOTTOM; handled = false; // クライアント領域の処理は本来のものに任せる。 return WinSdk.HTCLIENT; } } }

赤丸の部分で左クリックされたらDragMoveでWindowの位置を動かせるようにしています。 その部分は基本的な事柄なのでそのまんまです。

Loadedイベントでウィンドウプロシージャをフックして、Closingイベントで外しています。 (フックするのはSourceInitializedイベントでもよかったかも?) って事で使うのはWin32SDKでプログラムを書いていた時代のテクニックです。

WM_NCHITTESTメッセージを処理することで、ウィンドウの好きな領域を枠扱いにすることができます。 lParamにスクリーン上での座標が格納されているので取り出して、ウィンドウ上の座標に変換します。 その座標が枠の左上の角だったらHTTOPLEFTを、右上の角だったらHTTOPRIGHTなどというように元から用意されている値を返します。 そうするとデフォルトのウィンドウで角や枠をつかんだ場合などの処理が勝手に動きます。 枠以外の領域(赤丸の部分やその他の部分)はhandled = falseにしてメソッドを終えることで本来の処理に任せます。

HTTOPLEFTなどの定数はWin32SDK用のヘッダファイルに書かれていた値を手書きします。 こんな感じです。

using System; namespace SimpleDesktopCapture { internal class WinSdk { internal const int WM_NCHITTEST = 0x0084; internal const int WM_DRAWCLIPBOARD = 0x0308; internal const int WM_CHANGECBCHAIN = 0x030D; internal static readonly IntPtr HTCLIENT = new IntPtr(1); internal static readonly IntPtr HTCAPTION = new IntPtr(2); internal static readonly IntPtr HTLEFT = new IntPtr(10); internal static readonly IntPtr HTRIGHT = new IntPtr(11); internal static readonly IntPtr HTTOP = new IntPtr(12); internal static readonly IntPtr HTTOPLEFT = new IntPtr(13); internal static readonly IntPtr HTTOPRIGHT = new IntPtr(14); internal static readonly IntPtr HTBOTTOM = new IntPtr(15); internal static readonly IntPtr HTBOTTOMLEFT = new IntPtr(16); internal static readonly IntPtr HTBOTTOMRIGHT = new IntPtr(17); } }

このやり方の便利なところは、角や枠をドラッグするときマウスカーソルが勝手にウィンドウサイズ変更時のものに変わってくれることですね。 「全画面を透明なウィンドウで覆ってドラッグでRectangleを……」などと自前でコードを書くと細かい部分が大変ですが、これだと書かなくて済みます。

一応注意点もあります。 このやり方、というかwpfでキャプチャー用の枠を書くときに注意しなければならないのは論理座標と実際の座標のズレです。 ディスプレイのDPIをいじっていなければ問題ないハズですが、「字が小さくて読めな～い!!」などとDPIを変更されると論理座標と実際の座標がズレてしまいます。 そうすると枠がにじんでしまうんですよね。 そのせいで枠の内側をキャプチャー範囲にすると、そのにじみをキャプチャーしてしまう可能性があります。 そのため、「枠はキャプチャー中ずっと表示するのではなく範囲を決めるときだけ表示する」などの作りにする必要があります。

使用感については、まだあまり触ってないので分かりません。 今作っている自分用ツールができたら、ある程度使って確認しようと思います。