Mouse Move

マウスの操作で図形(円)を動かします。

前田稔の超初心者のプログラム入門

プログラムの説明

  1. Visual Studio Enterprise 2019 を使ってマウスで図形(円)を動かします。
    Visual Studio で UWP(Universal Windows Platform) のプロジェクトを作成します。
    プロジェクトの作成は XAML で図形を描画 を参照して下さい。
  2. MainPage.xaml を直接編集して赤い円を描画します。
    Grid ~ /Grid の間に追加して下さい。
        <Grid>
            <Ellipse x:Name="zukei" Fill="#FFEB0A0A"
            Height="100" Width="100" ManipulationMode="All"
            HorizontalAlignment="Left" VerticalAlignment="Top"
            Canvas.Left="11" Canvas.Top="11"/>
        </Grid>
    
  3. MainPage.xaml.h にマウスの移動を検出する My_ManipulationDelta() 関数を定義します。
    InitManipulationTransforms() は領域を初期化する関数です。
    transforms, previousTransform, deltaTransform は移動を計算する領域です。
        public:
            MainPage();
            void MainPage::My_ManipulationDelta(Platform::Object^ sender,
                Windows::UI::Xaml::Input::ManipulationDeltaRoutedEventArgs^ e);
            void MainPage::InitManipulationTransforms();
        private:
            Windows::UI::Xaml::Media::TransformGroup^ transforms;
            Windows::UI::Xaml::Media::MatrixTransform^ previousTransform;
            Windows::UI::Xaml::Media::CompositeTransform^ deltaTransform;
        };
    
  4. MainPage.xaml.cpp を修正して、マウスの移動を検出します。
    赤い円をマウスでドラッグすると My_ManipulationDelta() 関数が呼び出されます。
    MainPage::MainPage()
    {
        InitializeComponent();
        ManipulationDelta += ref new ManipulationDeltaEventHandler(this, &MainPage::My_ManipulationDelta);
        InitManipulationTransforms();
    }
    
  5. transforms を初期化します。
    void MainPage::InitManipulationTransforms()
    {
        transforms = ref new TransformGroup();
        previousTransform = ref new MatrixTransform();
        deltaTransform = ref new CompositeTransform();
        transforms->Children->Append(previousTransform);
        transforms->Children->Append(deltaTransform);
        zukei->RenderTransform = transforms;
    }
    
  6. マウスの操作を検出して図形を移動します。
    void MainPage::My_ManipulationDelta(Platform::Object^ sender,
        Windows::UI::Xaml::Input::ManipulationDeltaRoutedEventArgs^ e)
    {
        previousTransform->Matrix = transforms->Value;
        Point center = previousTransform->TransformPoint(Point(e->Position.X, e->Position.Y));
        deltaTransform->CenterX = center.X;
        deltaTransform->CenterY = center.Y;
        deltaTransform->Rotation = e->Delta.Rotation;
        deltaTransform->TranslateX = e->Delta.Translation.X;
        deltaTransform->TranslateY = e->Delta.Translation.Y;
    }
    
  7. プロジェクトをコンパイル&ビルドして実行して下さい。
    図形(赤い円)をマウスでドラッグすると、図形が移動します。
    Windows10 の「スタート」ボタンから[すべてのアプリ]を選ぶと今作製したアプリが登録されています。
    残しておく必要がなければ右クリックからアンインストールして下さい。
    C#でも同様のアプリ Mouse Move を作成しています。

超初心者のプログラム入門(C/C++)