Simple Spline

<< Back to the SDG Toolkit page



In this tutorial you will learn how to build a program that allows multiple users cooperating with each other to manipulate a spline curve. You will create control points as an SDG user control and add four of these to your application. You will then add code allowing people to move these control points with multiple mice, and a spline will be drawn that is dependant on the locations of these points.

Download: SdgSimpleSpline.zip
Source: SdgSimpleSplineSrc.zip
Unzip all files (executables plus dependancies) into a single folder

Introduction

Below is the full code required to make a minimal SDG Simple Spline program that works for up to four people with four attached mice. Users can drag the control points of a spline curve with their own mice simultaneously. The curve will change its shape correspondingly.

Tutorial - Part 1. Create an SDG-aware Form

1) Create the empty project. As in the other tutorials, create a C# project (Windows Application). Call it SimpleSpline.

2) Add SdgManager to the Form. Sdg Manager Component in the Toolbox in the Tab where you had previously installed it. Click on the SdgManager component and drag an instance onto the form. In Properties (bottom right), change RelativeTo to Form1.

Tutorial - Part 2. Create a User Control that displays a Control Point

3) Add Inherited User Control. In the Solution Explorer, right click SimpleSpline->Add->Add Inherited Control. Highlight Inherited User Control and name it ControlPoint. Click open, then Browse. Find the location where you saved the SDG Toolkit and double click the dll. Highlight the dll and then click OK. (These first three steps are the same as the previous tutorial (Simple Text)).

4) Resize the control point. In the ControlPoint Design tap, scale it down to the desired size of a control point.

5) Add paint event (to draw control points). In the Properties of ControlPoint, click the lighting bolt, then double click Paint.

6) Draw circle as control point. Add the following code for the paint event.

//Draw a red circle to fit the user control
e.Graphics.FillEllipse(new SolidBrush(Color.Red), 0, 0, this.Width, this.Height);

7) Build Solution. Otherwise, ControlPoint cannot be used. Hit Ctrl+Shift+b to build.

Tutorial - Part 3. Code the Main Application

8) Add 4 control points to Form1. Switch to the Form1 Designer. In the Toolbox under My User Controls, drag the ControlPoint control to Form1 in the Design tab. Drag four of them in total.

9) Add paint event (to draw a spline curve). In the Properties of Form1, click the lighting bolt, then double click Paint.

10) Draw a spline curve. Add the following code for the paint event.

//Draw a spline curve around the current locations of the 4 control points
Pen p = new Pen(new SolidBrush(Color.Black), 2);
e.Graphics.DrawBezier(p, controlPoint1.Location, controlPoint2.Location, controlPoint3.Location, controlPoint4.Location);

11) Add several required storage variables. Add the following declarations after the line "private System.ComponentModel.IContainer components;"

private int[] DraggingObject;
private Point[] DraggingOffset;
private ArrayList ControlPoints; //Array to hold the Control Points user control

12) Initialize these variables.

a) Add the following code after InitializeComponent()

// Add control point user controls to the ControlPoints Array.
ControlPoints = new ArrayList();
ControlPoints.Add((object) controlPoint1);
ControlPoints.Add((object) controlPoint2);
ControlPoints.Add((object) controlPoint3);
ControlPoints.Add((object) controlPoint4);

b) Add mouse down and up event handlers for each control point user control. Insert this code just after what you typed above.

  • Tip 1: Don't copy and paste this section of code. Type it. After you type "+=", hit Tab twice. An empty function of the handler will be automatically generated at the end of the class.
  • Tip 2: Because we called our project SimpleSpline, that is its namespace. If you called your project something different, you will have to replace SimpleSpine in the code below with your project name.
//Create an SDGMouseDown/Up callback for each control point user control
foreach (SimpleSpline.ControlPoint c in ControlPoints){
  c.SdgMouseDown += new Sdgt.SdgMouseEventHandler(c_SdgMouseDown);
  c.SdgMouseUp += new Sdgt.SdgMouseEventHandler(c_SdgMouseUp);
}

c) Initialize the DraggingObject and Offset. Insert this code just after what you typed above.

DraggingObject = new int[sdgManager1.Mice.Count];
DraggingOffset = new Point[sdgManager1.Mice.Count];
for (int i=0; i < sdgManager1.Mice.Count; ++i)
{
  DraggingObject[i] = -1;
  DraggingOffset[i] = new Point(0,0);
}

13) Add this code to the c_SdgMouseDown event handler.

//Calculate the dragging offset, and record which object is being dragged
DraggingOffset[e.ID] = new Point(e.X, e.Y);
for (int i=0; i < ControlPoints.Count; ++i) {
  if (sender == ControlPoints[i]) {
    DraggingObject[e.ID] = i;
  }
}

14) Add this code to the c_SdgMouseUp event handler.

//-1 means we are done dragging
DraggingObject[e.ID] = -1;

15) Add this code to the mouse move event of sdgManager1. In the Properties, select sdgManager1 in the drop down menu, click the lighting bolt, then double click MouseMove.

16) Add code for mouse move event.

// If the object is still being dragged, move the control point to the new location
// and refresh (and thus repaint the spline)
if (-1 != DraggingObject[e.ID]) {
  ControlPoint c = (ControlPoint) ControlPoints[DraggingObject[e.ID]];
  c.Location = new Point(e.X - DraggingOffset[e.ID].X, e.Y - DraggingOffset[e.ID].Y);
  this.Refresh();
}

17) Compile. From the running program, try to simultaneously drag control points to adjust the spline.