画像を魚眼レンズ風に拡大できるようにしたいです

Question

画像をマウスカーソルの下に拡大表示させるプログラムを何とか作ることができました
参考にしたサイト
https://thinkit.co.jp/story/2013/11/11/4674

この拡大している画像を魚眼レンズ風の画像に変えたいです
どなたか知恵を貸してください

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="1080" Width="1920" WindowState="Maximized">
    <Canvas Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="1920"  Height="1080">
        <Image x:Name="sourceImage" HorizontalAlignment="Stretch" Height="1080" VerticalAlignment="Stretch"  Width="1920" Canvas.Top="0" Source="Image/S__82993161.jpg" Canvas.Left="0"/>
        <Image x:Name="zoomImage" Stretch="Uniform" IsHitTestVisible="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="1900" Height="1085" Source="Image/S__82993161.jpg" Canvas.Left="10" Canvas.Top="-15">
            <Image.RenderTransform>
                <ScaleTransform   ScaleX="3" ScaleY="3"/>
            </Image.RenderTransform>
            <Image.Clip>
                <EllipseGeometry x:Name="Lens" RadiusX="30" RadiusY="30"  Center="0.0,0.0">
                    <EllipseGeometry.Transform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1"/>
                            <SkewTransform />
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </EllipseGeometry.Transform>
                </EllipseGeometry>
            </Image.Clip>
        </Image>
        <InkPresenter Name="paintCanvas"/>
    </Canvas>
</Window>

Imports Leap
Imports System.Windows.Ink
Imports System
Imports System.Windows
Imports System.Windows.Input
Imports System.Windows.Media.Imaging
Imports System.Windows.Interop






Class MainWindow
    Private Declare Function SetCursorPos Lib "user32" (x As Integer, y As Integer) As Boolean
    Private Declare Function apimouse_event Lib "user32" Alias "mouse_event" (ByVal dwFlags As Int32, ByVal dx As Int32, ByVal dy As Int32, ByVal cButtons As Int32, ByVal dwExtraInfo As Int32) As Boolean
    Private Const MOUSEEVENTF_LEFTDOWN = &H2
    Private Const MOUSEEVENTF_LEFTUP = &H4
    Private Const MOUSEEVENTF_MOVE = &H1
    Private leap As New Controller
    Private touchIndicator As New DrawingAttributes
    Private touchPoint As StylusPoint
    Private tx As Double
    Private ty As Double
    Private x As Integer
    Private y As Integer
    Private ImageX As Double
    Private ImageY As Double
    'Private Index As Integer
    Private windowWidth As Double = 1920
    Private windowHeight As Double = 1080

    'Private no As Integer
    Private FingersCount As Integer




    Private Sub sourceImage_MouseLeftButtonDown(sender As Object, e As MouseButtonEventArgs) Handles sourceImage.MouseLeftButtonDown
        zoomImage.Visibility = Windows.Visibility.Visible
        ImageX = e.GetPosition(sourceImage).X
        ImageY = e.GetPosition(sourceImage).Y
        LensPosition(ImageX, ImageY)
    End Sub

    Private Sub sourceImage_MouseMove(sender As Object, e As MouseEventArgs) Handles sourceImage.MouseMove
        ImageX = e.GetPosition(sourceImage).X
        ImageY = e.GetPosition(sourceImage).Y
        LensPosition(ImageX, ImageY)
    End Sub

    Private Sub sourceImage_MouseLeftButtonUp(sender As Object, e As MouseButtonEventArgs) Handles sourceImage.MouseLeftButtonUp
        zoomImage.Visibility = Windows.Visibility.Collapsed
    End Sub


    Private Sub LensPosition(x As Double, y As Double)
        Lens.Center = New Point(ImageX, ImageY)
        zoomImage.SetValue(Canvas.LeftProperty, ImageX - (ImageX * 3))
        zoomImage.SetValue(Canvas.TopProperty, ImageY - (ImageY * 3))

    End Sub


End Class

Comments

[Zuishin]

https://docs.microsoft.com/ja-jp/dotnet/framework/wpf/graphics-multimedia/3-d-graphics-overview

球に貼ればできそうな気もしますね。

Answer 1

少なくともxamlを数行足すって程度では、できそうにもないですね。
何かライブラリ等はないかなとも思いましたが、見つけられませんでした。

案１ OpenCV的なもので画像を加工して重ねる。
パフォーマンスもよさそうですし、コード量も少なそう。
（私は魚眼にする方法は知りません^^;）

案２ 球に適当に切り出した画像をマテリアルにマップし続ける。
雑に試してみましたが、特に重くはならず使えなくはないって感じでした。
（自分でもよくわかっていない、雑なC#コードでよければ出せます）

参考コード追記

---

画像を加工パターン
OpenCVとかわからないですが、GitHubでピュアC#のものを見つけたので試してみました。
AnthonyNystrom/GenXSource: Genetibase related source code （どういったリポジトリなのか全くわかってません^^;）

IFilter.cs
EffectFilter.cs
FishEye.cs
上記3つをプロジェクトに追加（ライセンスが明示されていないので注意してください）

<Window
  x:Class="Questions228869.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Fisheye"
  MouseMove="Window_MouseMove"
  SizeToContent="WidthAndHeight">
  <Window.Resources>
    <BitmapImage x:Key="earthImage" UriSource="Image/1280px-Tissot_indicatrix_world_map_Lambert_cyl_equal-area_proj.svg.png" />
  </Window.Resources>

  <Canvas Width="400" Height="300">
    <Image x:Name="sourceImage" Source="{StaticResource earthImage}" />
    <Image
      x:Name="zoomImage"
      Width="100"
      Height="100" />

  </Canvas>
</Window>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using Next2Friends.ImageWorks.EffectsFilters;

namespace Questions228869
{
    public partial class MainWindow : Window
    {
        private readonly RenderTargetBitmap inflateImage;
        private const double offset = 200;
        private int lastTimestamp;

        public MainWindow()
        {
            InitializeComponent();

            // CroppedBitmapで例外が出るのでひと回り大きい画像を作る
            var image = (BitmapImage)Resources["earthImage"];
            var visual = new DrawingVisual();
            var dc = visual.RenderOpen();
            var rect = new Rect(0, 0, image.PixelWidth + offset * 2, image.PixelHeight + offset * 2);
            dc.DrawRectangle(Brushes.White, null, rect);
            dc.DrawImage(image, new Rect(offset, offset, image.PixelWidth, image.PixelHeight));
            dc.Close();

            inflateImage = new RenderTargetBitmap((int)rect.Width, (int)rect.Height, 96, 96, PixelFormats.Pbgra32);
            inflateImage.Render(visual);
        }

        private void Window_MouseMove(object sender, MouseEventArgs e)
        {
            // GCが走り続けて引っかかるので適当に間引く
            if(Math.Abs(e.Timestamp - lastTimestamp) < 20) return;
            lastTimestamp = e.Timestamp;

            var p = e.GetPosition(sourceImage);

            zoomImage.SetValue(Canvas.LeftProperty, p.X - zoomImage.Width / 2);
            zoomImage.SetValue(Canvas.TopProperty, p.Y - zoomImage.Height / 2);

            var ratioX = sourceImage.Source.Width / sourceImage.ActualWidth;
            var ratioY = sourceImage.Source.Height / sourceImage.ActualHeight;

            var sourceX = ratioX * p.X;
            var sourceY = ratioY * p.Y;

            var w = ratioX * zoomImage.Width;
            var h = ratioY * zoomImage.Height;
            var x = sourceX - w / 2 + offset;
            var y = sourceY - h / 2 + offset;
            var rect = new Int32Rect((int)x, (int)y, (int)w, (int)h);
            try
            {
                var croppedBitmap = new CroppedBitmap(inflateImage, rect);
                zoomImage.Source = new FisheyeFilter(0.1f).ExecuteFilter(croppedBitmap);
            }
            catch { /* NOP CroppedBitmapが範囲外 */ }
        }
    }
}

使用感

• 画像を凸に加工しているので境目が見えなくて見た目はよい。
• GCが走り続けて引っかかるので、適度に間引いたところまあまあ使えるかなと（高速化の余地はまだまだあるので、不満ならどうにかなる）
• 原寸表示だと1ドットの線とかが荒れがち。

球体に貼るパターン
WPF で 3D（その5） : リード開発メモ
基本的にはここの通り。
Primitive3DとSphere3Dをプロジェクトに追加、GetTextureCoordinateを修正（元ネタはMicrosoftのサンプル 解凍時に使用許諾が出るので確認してください）
xamlで書けることはできるだけ移したため、csは跡形ないです。

ほか参考にしたサイト WPF で地球を回してみるテスト - CX's Hatena Blog

<Window
  x:Class="Questions228869.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:Questions228869"
  Title="Sphere3D"
  MouseMove="Window_MouseMove"
  SizeToContent="WidthAndHeight">
  <Window.Resources>
    <BitmapImage x:Key="earthImage" UriSource="Image/1280px-Tissot_indicatrix_world_map_Lambert_cyl_equal-area_proj.svg.png" />
  </Window.Resources>

  <Canvas Width="400" Height="300">
    <Image x:Name="sourceImage" Source="{StaticResource earthImage}" />
    <Viewport3D
      x:Name="viewport"
      Width="100"
      Height="100">
      <Viewport3D.Camera>
        <PerspectiveCamera
          LookDirection="0,0,-1"
          Position="0,0,3"
          UpDirection="0,1,0" />
      </Viewport3D.Camera>
      <ModelVisual3D>
        <ModelVisual3D.Content>
          <Model3DGroup>
            <AmbientLight Color="#ffffff" />
            <DirectionalLight Direction="-1,-1,-1" Color="#ffffff" />
          </Model3DGroup>
        </ModelVisual3D.Content>
      </ModelVisual3D>
      <local:Sphere3D x:Name="sphere" />
    </Viewport3D>

  </Canvas>
</Window>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Media.Media3D;

namespace Questions228869
{
    public partial class MainWindow : Window
    {
        private readonly RenderTargetBitmap inflateImage;
        // 倍率 それっぽくなるように現物合わせ
        private const double scale = 0.85;
        // 球に巻き始める余白部分 6時が正面とすると3時から反時計回り？
        private const double offset = cropWidth / 4 * 3;
        // 球に巻く画像の幅 高さから逆算
        private const double cropWidth = Math.PI * cropHeight * scale;
        // 球に巻く画像の高さ viewport.Height に合わせた 特に根拠なし
        private const double cropHeight = 100 * scale;

        public MainWindow()
        {
            InitializeComponent();

            // CroppedBitmapで例外が出るのでひと回り大きい画像を作る
            // 上下右はもっと小さくていいが面倒なので全方向同じ数字で広げた
            var image = (BitmapImage)Resources["earthImage"];
            var visual = new DrawingVisual();
            var dc = visual.RenderOpen();
            var rect = new Rect(0, 0, image.PixelWidth + offset * 2, image.PixelHeight + offset * 2);
            dc.DrawRectangle(Brushes.White, null, rect);
            dc.DrawImage(image, new Rect(offset, offset, image.PixelWidth, image.PixelHeight));
            dc.Close();

            inflateImage = new RenderTargetBitmap((int)rect.Width, (int)rect.Height, 96, 96, PixelFormats.Pbgra32);
            inflateImage.Render(visual);
        }

        private void Window_MouseMove(object sender, MouseEventArgs e)
        {
            var p = e.GetPosition(sourceImage);

            viewport.SetValue(Canvas.LeftProperty, p.X - viewport.Width / 2);
            viewport.SetValue(Canvas.TopProperty, p.Y - viewport.Height / 2);

            var ratioX = sourceImage.Source.Width / sourceImage.ActualWidth;
            var ratioY = sourceImage.Source.Height / sourceImage.ActualHeight;

            var sourceX = ratioX * p.X;
            var sourceY = ratioY * p.Y;

            var x = sourceX; // 巻き始め分を大きくしたのでちょうどxで合う
            var y = sourceY - cropHeight / 2 + offset;
            var rect = new Int32Rect((int)x, (int)y, (int)cropWidth, (int)cropHeight);
            try
            {
                var croppedBitmap = new CroppedBitmap(inflateImage, rect);
                sphere.Material = new DiffuseMaterial(new ImageBrush(croppedBitmap));
            }
            catch { /* NOP CroppedBitmapが範囲外 */ }
        }
    }
}

使用感

• 球なので境目がわかってしまう。
• パフォーマンスはよい（特に間引いていなくても普通に使えてる）
• 大きさの調整等がめんどくさい。
• 凸度？の調整が効かない。

使用画像 1280x407 テイソーの指示楕円-ランベルト正積円筒図法の場合

Comments

[rarar]

ご丁寧にありがとうございます
試してみます