Moonmile Solutions Blog

こちらは、仕事用のネタのために公開しておきます。

WPFでコントロールをドラッグ(1) – Moonmile Solutions Blog
http://www.moonmile.net/blog/archives/709
[win8] パンダ福笑いを作るために ManipulationDelta を使う – Moonmile Solutions Blog
http://www.moonmile.net/blog/archives/3877

のところで、ManipulationDelta を WinRT（ストアアプリ）で使ったのですが、改めて WPF で作ってみると、ManipulationDelta 関係はタッチイベントでしか発生せず、マウスイベントでは発生しないのですね…勘違いしていました。ストアアプリの場合は、タッチイベントもマウスイベントも統合されているので、問題ないのですが、WPF の場合はやっぱりマウスの移動量を計算する方式ではないと駄目、ということで。

■デザイン時

デザイン時は、こんな風に Grid を使って描画をしておきます。この3つのスイムレーンに、赤、青、黄の3つのタスクを配置する、というイメージです。左下にある薄い赤の矩形は、ドラッグ時の描画用の矩形ですね。

■ドラッグ時のイベント処理

/// <summary>
/// MainWindow.xaml の相互作用ロジック
/// </summary>
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        // ドラッグ用の矩形は隠しておく
        manRect.Visibility = System.Windows.Visibility.Collapsed;
        //　マウスイベントを割り付ける
        foreach (var el in grid1.Children)
        {
            var rec = el as Rectangle;
            if (rec != null)
            {
                if (rec.Fill == new SolidColorBrush( Colors.Beige)) continue;
                rec.MouseDown += manRect_MouseDown;
                rec.MouseMove += manRect_MouseMove;
                rec.MouseUp += manRect_MouseUp;
            }
        }
    }

    // ドラッグ時のフラグ
    private bool _isDrag = false;
    private Point _dragOffset;
    private Rectangle _capRect;

    /// <summary>
    /// マウスダウンイベント
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void manRect_MouseDown(object sender, MouseButtonEventArgs e)
    {
        UIElement el = sender as UIElement;
        if (el != null && e.LeftButton == MouseButtonState.Pressed )
        {
            // ドラッグ開始
            _isDrag = true;
            // オブジェクトとのオフセットを取得
            _dragOffset = e.GetPosition(el);
            // キャプチャ開始
            el.CaptureMouse();
            // ドラッグ対象の矩形（タスク）を保存しておく
            _capRect = (Rectangle)el;
            // ドラッグ用の矩形を表示開始
            manRect.Visibility = System.Windows.Visibility.Visible;
            // ドラッグ用の矩形のサイズを設定
            Point pt = Mouse.GetPosition(board);
            manRect.Width = ((Rectangle)el).ActualWidth;    // 描画時のサイズを取得
            manRect.Height = ((Rectangle)el).ActualHeight;
            manRect.Margin = new Thickness(
                pt.X - _dragOffset.X,
                pt.Y - _dragOffset.Y,
                0, 0);
            // ドラッグ対象のタスクを半透明に
            _capRect.Opacity = 0.5;

        }
    }

    /// <summary>
    /// マウス移動時
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void manRect_MouseMove(object sender, MouseEventArgs e)
    {
        if (_isDrag == true)
        {
            Point pt = Mouse.GetPosition(board);
            UIElement el = sender as UIElement;
            manRect.Margin = new Thickness(
                pt.X - _dragOffset.X,
                pt.Y - _dragOffset.Y,
                0, 0);
        }
    }

    /// <summary>
    /// マウスアップ時
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void manRect_MouseUp(object sender, MouseButtonEventArgs e)
    {
        if (_isDrag == true)
        {
            UIElement el = sender as UIElement;
            // マウスキャプチャをリリース
            el.ReleaseMouseCapture();
            // ドラッグ終了
            _isDrag = false;
            manRect.Visibility = System.Windows.Visibility.Collapsed;
            // タスクをスナッピングさせる
            Point pt = Mouse.GetPosition(grid1);
            // 3x3 の位置で特定
            int col = (int)( pt.X * 3 / grid1.Width);
            int row = (int)(pt.Y * 3 / grid1.Height);
            Grid.SetColumn(_capRect, col);
            Grid.SetRow(_capRect, row);
            _capRect.Opacity = 1.0;
        }
    }
}

元の矩形（タスク）をドラッグしても良いのですが、キャンセルや移動時にもともと何処にあったのかを分かりやすくするために、元の矩形は残したままドラッグさせます。なので、ドラッグ用の矩形（manRect）を移動させています。マウスキャプチャ el.CaptureMouse() をすると、元の矩形の位置からはみ出てもマウス移動を追ってくれるので、これを使います。元の矩形を移動させる場合にもマウスキャプチャを使ったほうが、マウスを高速に移動させたときにも追随します。

矩形のサイズを ActualWidth 等で取ってきているのは、スイムレーンを Grid で作って、これに完全にスナップさせているからです。このため、元の矩形は Width/Height ではサイズが取れないので（設定されていないので）、ActualWidth で実際の描画時のサイズを取得します。

■実行してみる

移動中のカラーを揃えていないのと、横長の青い矩形のスナップ判定がいまいちなのですが、ひとまずドラッグは綺麗に動いています。同じことを、ストアアプリでやる場合には、ManipulationDelta を使うとドラッグ中のフラグとかが必要なくなります。

サンプルはこちら http://sdrv.ms/17ZZ5UF

こんな風なタスクの置き換えツールは、マウスでやるよりもタブレット使ってタッチでやるほうが素早くできるので、Excel で PERT 的にタスク管理をするよりも、何らかのタブレットツールがあると計画の立て直しとかが手早くできるのではないかな…と思いつつ数年たっていますが。まあ、今回のタスク配置の画面で使うといとで、メモ的に。

Flashのswfファイルから画像を抽出する…わけは艦これ諜報員用なのですが、完全に実装する前にメモ程度に残しておきます。いくつか、MFCのライブラリとかJava,PHPのライブラリはあるのですが、やっぱりC#のほうがいいですよね。

neue cc – C#でFlash Liteなswfをバイナリ編集して置換する
http://neue.cc/2013/01/10_393.html
debreuil/Swf2XNA
https://github.com/debreuil/Swf2XNA
SWFバイナリ編集のススメ第三回 (JPEG) | GREE Engineers’ Blog
http://labs.gree.jp/blog/2010/09/782/

github に Swf2XNA というプロジェクトがあります。neue さん言う通り、完全に使うには XNA のライブラリが必要なのですが、そこまで面倒ではなくて SwfFormat プロジェクトだけが必要です。

※一応、但し書きを書いておきますが、画像の著作権は艦これ自体に帰属するので、悪用しないように。

■手っ取り早く画像ファイルを抽出したい

用途としては、艦これでダウンロードしている *.swf ファイルから画像を抜き出したいだけです。画像の取り出し自体は HugFlash – 窓の杜ライブラリ  というツールがあるので、特に問題はありません。艦これ諜報員の榛名の画像は、これを使って取り出したものですが。が、どうせならば実行時に画像を取り出したいですよね。そうすると、秘書艦を変えたときに、同期して諜報員の画像も変えることがでいそうです。

さて、先の記事を読むと Flash の中身は Tag に分かれています。この中で画像に関係するところの

• TagType.DefineBits
• TagType.DefineBitsJPEG2
• TagType.DefineBitsJPEG3

の3つを取り出せばよさそうです。実は、TagType.DefineBits のときの JPEGTables+DefineBits の組み合わせは真面目にやらないといけないのですが、幸いにして（？）、艦これで扱っている swf は JPEGTables の長さが 0 のために、そのまま DefineBits 内のバイナリデータが使えます。これでいいのかどうかは不明なのですが、まあ、用途に足りるので。

private void button1_Click(object sender, EventArgs e)
{
    var reader = new SwfReader(File.ReadAllBytes(@"d:work14.swf"));
    var swf = new SwfCompilationUnit(reader);
    var lst = swf.Tags.FindAll(x =>
        x.TagType == TagType.DefineBits ||
        x.TagType == TagType.DefineBitsJPEG3 ||
        x.TagType == TagType.DefineBitsJPEG2);
    int i = 1;
    foreach (var it in lst)
    {
        var tag = it as DefineBitsTag;
        var path = string.Format(@"d:work14-{0}.png",tag.CharacterId);
        Bitmap bmp = tag.ToBitmap();
        if (bmp != null)
        {
            bmp.Save(path, ImageFormat.Png);
        }
        i++;
    }
}

File.ReadAllBytes メソッドで byte[] として取り出しデータを SwfReader を喰わせた後、SwfCompilationUnit クラスでパースします。そのあと、Tags コレクションの中身を覗けばOKです。
DefineBitsTag クラスの ToBitmap メソッドは自作の拡張メソッドです。

public static class DefineBitsTagExtention
{
    public static Bitmap ToBitmap(this DefineBitsTag tag)
    {
        Bitmap png = null;
        if (tag.TagType == TagType.DefineBitsJPEG2 ||
            tag.TagType == TagType.DefineBitsJPEG3)
        {
            if (tag.HasAlphaData == false)
            {
                var mem = new MemoryStream(tag.JpegData);
                png = new Bitmap(mem);
                //mem.Close();
            }
            else
            {
                var mem = new MemoryStream(tag.JpegData);
                Bitmap bmp = new Bitmap(mem);
                png = new Bitmap(bmp.Width, bmp.Height);
                Graphics g = Graphics.FromImage(png);
                g.DrawImage(bmp, 0, 0);
                var alpha = SwfReader.Decompress(tag.CompressedAlphaData,
					(uint)(bmp.Width * bmp.Height));
                int j = 0;
                for (int y = 0; y < bmp.Height; y++)
                {
                    for (int x = 0; x < bmp.Width; x++)
                    {
                        int a = alpha[j];
                        var c = bmp.GetPixel(x, y);
                        var col = Color.FromArgb(a, c);
                        png.SetPixel(x, y, col);
                        j++;
                    }
                }
            }
        }
        else if (tag.TagType == TagType.DefineBits)
        {
            int size = tag.JpegData.Count() + 4;
            byte[] buf = new byte[size];

            for (int i = 0; i < tag.JpegData.Count(); i++)
            {
                buf[i + 2] = tag.JpegData[i];
            }
            buf[0] = 0xFF;
            buf[1] = 0xD8;
            buf[2+tag.JpegData.Count()] = 0xFF;
            buf[2+tag.JpegData.Count()+1] = 0xD9;
            var mem = new MemoryStream(buf);
            png = new Bitmap(mem);
            // mem.Close();
        }
        return png;
    }
}

DefineBitsJPEG2 と DefineBitsJPEG3 の場合は、画像ファイルそのもの（jpeg,png,gif）が JpegData 配列に入っているので、Bitmap に落とせます。アルファチャンネルがある場合は、HasAlphaData をチェックして透過データを追加してやります。いちいち GetPixel/SetPixel とやるとスピードが遅いので、適当に unsafe してバイナリを直接扱うとかすると良いでしょう。実際 SwfFormat の中ではそういうコードがあります。

JPEGTables + DefineBits の組み合わせのときは、本当はきちんとやらないと駄目なのですが、そもそもが JPEGTables のサイズが 0 なので、ここでは決め打ちで書いています。前後に SOI と EOI を追加してやれば JPENG として読み込みます。

こんな風に全ての画像ファイルを抽出できます…と思ったのですが、HugFlash の出力と見比べると、ひとつだけファイルが足りないんですよね。どうやら、TagType.DefineBitsLossless か TagType.DefineBitsLossless2 に入っている画像データを忘れていた模様。これはちょっと後で。

■秘書艦の切り替えメモ

こんな訳で、リアルタイムに画像抽出ができそうです。ちなみに SwfFormat を使うと「画像改変」もできるので、Faddler と組み合わせれば、あんな画像やこんな画像ですり替えることは可能ですね。ただし、Faddler 自体がプロキシなので差し替えは可能だし、しかし、304 でローカルキャッシュから持ってきている問題もあるので簡単には差し替えできないという要因もありますが。

ひとまず、13番と15番決め打ちで画像を取り出して、諜報員の画像を切りかえることは可能そうです。