Skip to main content
Email Password   helpLost your password?

Introduction

CanvasGIS is an object oriented 2D graphics drawing component. It's a part of MVisionTech open source GIS and data visualization framework. CanvasGIS had been used in the GisMap component presented in my previous article.

Many applications require two dimensional graphics to provide graphical input and represent different types of data. Some examples of two dimensional data presentation are charts displaying numerical data, maps representing the geometry of roads and other geographical objects, diagrams representing object relations and CAD/CAM tools. Canvas is an attempt to create a component that will serve them all.

There are some functionalities and requirements which are common among different types of graphical applications:

Layers, scales and graphics optimization

Dealing with large amounts of graphics requires special data structure and optimization. Consider the case where we want to display the roads in a country. When the user zooms out to see them all together, the map will be cluttered with lines (even for a small country) and these lines take a lot of time to draw. On the other hand, when the user zooms into the map to see one single block of streets it takes too much time to find out the lines that should be displayed (polygon clipping).

One of the ways of dealing with different detail levels (multiple resolutions) of data is to introduce graphical layers with different visibility in different scales. In the example below we create different graphic layers for the Earth's image and aerial photo of some city with a polygon outlining the border of a building.

The Earth's image is visible in a range between 0.1 and 0.5 (using layer min and max scale parameters).

Arial photo is in a range between 0.5 and 8, so when we zoom into the map it switches off the Earth's image and turns on the aerial photo. GisMap GIS component uses this functionality to switch between different resolutions of geographical data.

Of course, it's not feasible to have different layers for every possible resolution we need, so we use additional optimization techniques:

Using the component

Canvas consists of two namespaces: CanvasControl and GeomModel. CanvasControl is a view in View/Model pattern and GeomModel is a model:

using GeomModel;
using CanvasControl;

In order to draw shapes on the canvas, one of the "create shape" methods can be used. For example, to draw a line:

 canvas1.CreateLine();

Once the method has been called the canvas is transferred into the drawing state, so that the user can draw a shape. There are create methods for lines, rectangles and polygons, it can also be reused by other shapes, for example, ellipse can be derived from a rectangle:

 // create initial shape:

 EllipseCanvasItem ei = new EllipseCanvasItem(canvas1.CurrentLayer);
 // set canvas to rectangle drawing mode:

 canvas1.setMode(CanvasControl.Canvas.DrawingMode.Rectangle);
 // create shape from selected rectangle

 canvas1.CreateShape(ei);

The shape can also be created directly on the canvas without user drawings:

// create polygon

ArrayList pi = new ArrayList();
pi.Add(new PointF(0,0));
pi.Add(new PointF(10,0));
pi.Add(new PointF(10,10));
pi.Add(new PointF(20,20));
// create polygon shape and put it to the canvas

PolygonCanvasItem pi = new PolygonCanvasItem(pi,canvas1.CurrentLayer);
canvas1.AddShape(pi);

Shapes in the canvas are organized in layers. The layers define the shape colors and the order in which the shapes are presented in the canvas. A new shape can also be created for a group of shapes:

 GeomModel.CanvasLayer lay = 
    new GeomModel.CanvasLayer("new-layer",Color.Blue,0,true);

Different attributes can be assigned to the layer, such as line color, fill color, line width, and scale range from min to max where the group of shapes will be visible. The last feature is used in displaying geographical maps where each scale has different detail level.

Delegates can be assigned to the shapes to handle different events, for example, to handle the find shape event which occurs when the user clicks on the shape (canvas should in "find" mode):

// connect delegate to find event

this.canvas1.ItemFindEvent += 
  new CanvasControl.Canvas.ItemEventHandler(this.canvas1_ItemFindEvent);
...
// event handler

private void canvas1_ItemFindEvent(object sender, 
                                   GeomModel.ItemEventArgs e)
{
    m_selected = e.indx;
    // show shape properties in property grid:

    propertyGrid1.SelectedObject = canvas1.GetItem(e.indx);
    MessageBox.Show("Item:"+e.indx+"found");
}

Design

Canvas consists of two main classes Canvas and GeomModel implementing the Model/View design pattern:

You must Sign In to use this message board.
 
 
Per page   
 FirstPrevNext
GeneralVersion for VS2005? Pin
michael.dearmas
10:13 6 Apr '06  
GeneralRe: Version for VS2005? Pin
boune
7:10 28 Jun '06  
GeneralRe: Version for VS2005? Pin
boune
9:44 29 Jun '06  
GeneralMobile applications? Pin
wegnwa
11:00 8 Mar '06  
GeneralRe: Mobile applications? Pin
Mabuka
5:16 13 Mar '06  
GeneralUsing it in ASP.NET 2.0? Pin
Mateusz www.Kierepka.pl
3:39 7 Dec '05  
GeneralRe: Using it in ASP.NET 2.0? Pin
Eduard Baranovsky
10:27 9 Dec '05  
GeneralRotate and Move Pin
SteveAbbott
8:13 24 Nov '05  
GeneralRe: Rotate and Move Pin
Eduard Baranovsky
4:16 28 Nov '05  
GeneralRe: Rotate and Move Pin
SteveAbbott
4:48 28 Nov '05  
GeneralWrong package? Pin
SteveAbbott
4:06 24 Nov '05  
GeneralRe: Wrong package? Pin
Eduard Baranovsky
6:04 24 Nov '05  
GeneralRe: Wrong package? Pin
SteveAbbott
7:22 24 Nov '05  
GeneralRe: Wrong package? Pin
Eduard Baranovsky
10:36 9 Dec '05  


Last Updated 21 Nov 2005 | Advertise | Privacy | Terms of Use | Copyright © CodeProject, 1999-2009