none
Imageの拡大について RRS feed

  • 質問

  • WEBカメラから取得した画像をソフト処理で拡大表示したい(WEBカメラにズーム機能無し)と思っていますが、どのように処理したらよいのでしょうか。

    以下を参考に拡大はすることができましたがImageをはみ出してしまうので、ご存じの方がいらっしゃいましたらご教授願います。

    http://ni4muraano.hatenablog.com/entry/2017/10/21/135713

    using System;
    using System.IO;
    using System.Windows;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    
    namespace WpfApp1
    {
        /// <summary>
        /// MainWindow.xaml の相互作用ロジック
        /// </summary>
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
    
                image1.Source = LoadImage(Path.Combine(Directory.GetCurrentDirectory(), "image.jpg"));
            }
    
            private BitmapImage LoadImage(string url)
            {
                BitmapImage bitmap = new BitmapImage();
                bitmap.BeginInit();
                bitmap.UriSource = new Uri(url);
                bitmap.EndInit();
                return bitmap;
            }
    
            private void Image1_MouseWheel(object sender, System.Windows.Input.MouseWheelEventArgs e)
            {
                // スケールの値を変えることでホイールを動かした時の拡大率を制御できます
                const double scale = 1.2;
    
                var matrix = image1.RenderTransform.Value;
                if (e.Delta > 0)
                {
                    // 拡大処理
                    matrix.ScaleAt(scale, scale, e.GetPosition(this).X, e.GetPosition(this).Y);
                }
                else
                {
                    // 縮小処理
                    matrix.ScaleAt(1.0 / scale, 1.0 / scale, e.GetPosition(this).X, e.GetPosition(this).Y);
                }
    
                image1.RenderTransform = new MatrixTransform(matrix);
            }
        }
    }
    

    <Window
        x:Class="WpfApp1.MainWindow"
        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:local="clr-namespace:WpfApp1"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        Title="MainWindow"
        Width="800"
        Height="600"
        mc:Ignorable="d">
        <Grid>
            <Border
                Margin="10,10,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                BorderBrush="Black"
                BorderThickness="1">
                <Image
                    x:Name="image1"
                    Width="300"
                    Height="400"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top" MouseWheel="Image1_MouseWheel" />
            </Border>
    
        </Grid>
    </Window>
    
    WEBカメラから取得する画像は800x600で、中心から400x300分を800x600に引き伸ばしてImageに400x300で表示する感じです。

    2019年6月16日 4:51

回答

  • 方法1: Imageコントロールの表示領域の大きさが変わらないようにする

    private void Image1_MouseWheel(object sender, System.Windows.Input.MouseWheelEventArgs e)
    {
        // スケールの値を変えることでホイールを動かした時の拡大率を制御できます
        const double scale = 1.2;
    
        var matrix = image1.RenderTransform.Value;
        if (e.Delta > 0)
        {
            // 拡大処理
            matrix.ScaleAt(scale, scale, e.GetPosition(this).X, e.GetPosition(this).Y);
        }
        else
        {
            // 縮小処理
            matrix.ScaleAt(1.0 / scale, 1.0 / scale, e.GetPosition(this).X, e.GetPosition(this).Y);
        }
    
        image1.RenderTransform = new MatrixTransform(matrix);
    
        //imageコントロールの大きさをmatrixの逆変換をつかって、
        //画像拡大時には表示可能領域を縮小
        //画像縮小時には表示可能領域を拡大
        //という処理を行うことで、みための表示領域の大きさが変わらないようにする
        Rect rect=new Rect(image1.DesiredSize);
        matrix.Invert();
        rect.Transform(matrix);
        image1.Clip=new System.Windows.Media.RectangleGeometry(rect);
    }

    方法2:Imageコントロールの外側のコントロールのClipToBoundsプロパティをtrueにする

    <Border 
        Margin="10,10,0,0"
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        BorderBrush="Black"
        BorderThickness="1">
            
        <Grid ClipToBounds="true">
            <Image 
                x:Name="image1"
                Width="300"
                Height="400"
                HorizontalAlignment="Left"
                VerticalAlignment="Top" MouseWheel="Image1_MouseWheel" />
        </Grid>
            
    </Border>

    個別に明示されていない限りgekkaがフォーラムに投稿したコードにはフォーラム使用条件に基づき「MICROSOFT LIMITED PUBLIC LICENSE」が適用されます。(かなり自由に使ってOK!)

    2019年6月16日 6:52