Skip to content
25 Oktober 2010 / Jeffrey Hermanto Halimsetiawan

InkCanvas dengan Windows MultiPoint Mouse SDK


InkCanvas adalah sebuah control pada Windows Presentation Foundation (WPF) yang memungkinkan user untuk melakukan coretan-coretan pada control tersebut layaknya aplikasi Paint sederhana pada Microsoft Windows. InkCanvas ini tentunya akan sangat digemari terutama oleh anak-anak yang baru mulai belajar komputer. Di sisi lain, Windows MultiPoint Mouse SDK memungkinkan sebuah komputer dapat digunakan oleh lebih dari satu user secara simultan dimana setiap user akan memiliki mouse pointer nya masing-masing. Tentunya akan sangat mengasyikkan apabila serunya melakukan coretan-coretan tersebut dapat dilakukan secara bersama-sama oleh banyak user. Sayangnya, Control yang didukung oleh MultiPoint baru sebatas MultipointButton, MultipointTextBox, dan MultipointCheckBox pada Samples dari Windows MultiPoint Mouse SDK versi 1.5.1. Memang Controls yang ada memungkinkan untuk menjadi Multipointable (dapat dikenai event multipoint) dengan melakukan pengubahan yang cukup rumit.

Terinspirasi oleh Aplikasi Flash dengan Microsoft MultiPoint Mouse SDK,  cara termudah yang dapat dilakukan adalah meletakkan MultipointButton transparan di depan InkCanvas kemudian MultipointButton inilah yang akan menerima segala MultipointMouseEvent yang ada dan melakukan penambahan coretan secara manual pada InkCanvas. Langkah-langkahnya adalah sebagai berikut:

  1. Buatlah sebuah Project dari template “Multipoint Application” yang disediakan oleh Windows MultiPoint Mouse SDK
  2. Tambahkan InkCanvas pada Window1.xaml dan beri nama icArea
  3. Tambahkan control MultipointButton tepat diatas InkCanvas pada Window1.xaml dan beri nama mpbDrawing
  4. Subscribe MultipointMouseDownEvent, MultipointMouseMoveEvent, dan MultipointMouseUpEvent dari mpbDrawing
  5. /// <summary>
    /// This is event handler for window "Loaded" Event.
    /// All MultiPoint initialization should happen on this event.
    /// </summary>
    private void MultipointWindow_Loaded(object sender, RoutedEventArgs e)
    {
        // initialize the MulitPoint system
        MultipointSdk.Instance.Register(this);
    
        this.mpbDrawing.MultipointMouseDownEvent += new RoutedEventHandler(mpbDrawing_MultiPointMouseDownEvent);
        this.mpbDrawing.MultipointMouseUpEvent += new RoutedEventHandler(mpbDrawing_MultiPointMouseUpEvent);
        this.mpbDrawing.MultipointMouseMoveEvent += new RoutedEventHandler(mpbDrawing_MultipointMouseMoveEvent);
    }
    
  6. Tambahkan field untuk menyimpan posisi pertama dan kedua mouse serta variabel bool sebagai penanda apakah mouse sedang didrag.
  7. private int _secondX;
    private int _secondY;
    private int _firstX;
    private int _firstY;
    private bool _isDraw = false;
    
  8. Definisikan method mpbDrawing_MultiPointMouseDownEvent
  9. private void mpbDrawing_MultiPointMouseDownEvent(object sender, RoutedEventArgs e)
    {
        MultipointMouseEventArgs args = (MultipointMouseEventArgs)e;
        DeviceInfo mouseObject = args.DeviceInfo;
        MultipointMouseDevice mpDevice = (MultipointMouseDevice)mouseObject.DeviceVisual;
        int x = (int)mpDevice.Position.X;
        int y = (int)mpDevice.Position.Y;
    
        if (!_isDraw)
        {
            _isDraw = true;
            _secondX = x;
            _secondY = y;
            _firstX = x;
            _firstY = y;
        }
        else
        {
            mpbDrawing_MultiPointMouseUpEvent(sender, e);
        }
    }
    
  10. Definisikan method mpbDrawing_MultipointMouseMoveEvent
  11. private void mpbDrawing_MultipointMouseMoveEvent(object sender, RoutedEventArgs e)
    {
        if (_isDraw)
        {
            MultipointMouseEventArgs args = (MultipointMouseEventArgs)e;
            DeviceInfo mouseObject = args.DeviceInfo;
            MultipointMouseDevice mpDevice = (MultipointMouseDevice)mouseObject.DeviceVisual;
    
            int x = (int)mpDevice.Position.X;
            int y = (int)mpDevice.Position.Y;
    
            _firstX = _secondX;
            _firstY = _secondY;
            _secondX = x;
            _secondY = y;
    
            AddLine(_firstX, _firstY, _secondX, _secondY);
        }
    }
    
  12. Definisikan method mpbDrawing_MultiPointMouseUpEvent
  13. private void mpbDrawing_MultiPointMouseUpEvent(object sender, RoutedEventArgs e)
    {
        MultipointMouseEventArgs args = (MultipointMouseEventArgs)e;
    
        DeviceInfo mouseObject = args.DeviceInfo;
        MultipointMouseDevice mpDevice = (MultipointMouseDevice)mouseObject.DeviceVisual;
        int x = (int)mpDevice.Position.X;
        int y = (int)mpDevice.Position.Y;
    
        _isDraw = false;
    }
    
  14. Kemudian definisikan method AddLine yang akan melakukan penambahan garis pada icArea
  15. private void AddLine(int x1, int y1, int x2, int y2)
    {
        Line line = new Line();
        line.X1 = x1;
        line.Y1 = y1;
        line.X2 = x2;
        line.Y2 = y2;
        line.Stroke = Brushes.Red;
        this.icArea.Children.Add(line);
    }
    

Berikut adalah hasil dari program sederhana ini:

Contoh Program - Multipoint Ink Canvas

Contoh Program - Multipoint Ink Canvas

Silahkan lakukan modifikasi dengan menambah variabel bool yang ada untuk setiap mouse apabila ingin melakukan coretan secara bersamaan.

Selamat mencoba😀

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: