Shine Draw

With the advantage of rendering speed, Flash and Silverlight can provide a richer experience in drawing and image filtering. Moreover, by using the Timer Event, real time replay of drawing bring us into another generation of art.

Recently, I got quite many application requests. I think a implementation list will be made to give you a better idea what will happen in the next few days.

Vote for this sample

Comparison

Flash implementation: 1 hour 10 minutes  
Silverlight implementation: 1 hour 30 minutes 
What’s the difference?

• Line Drawing: moveTo, LineTo [AS3] vs System.Windows.Shapes.Line [C#]

Source codes

•   Simple Drawing [Flash 9, AS3] (16.2 KiB, 975 hits)
•   Simple Drawing [Silverlight 2, C#] (48.8 KiB, 1,152 hits)

Line: moveTo, LineTo [AS3] vs System.Windows.Shapes.Line [C#]

I think drawing in AS3 is pretty straight forward and easy. It’s because all of the drawing libraries can be found inside the graphics object.

// AS3
// draw a square
var shape:Shape = new Shape();
shape.graphics.lineStyle(LINE_WIDTH, 0x000000);
shape.graphics.moveTo(0, 0);
shape.graphics.lineTo(0, 100);
// you can change the lineStyle anytime
shape.graphics.lineStyle(LINE_WIDTH, 0x000000);
shape.graphics.lineTo(100, 100);
shape.graphics.lineTo(100, 0);
shape.graphics.lineTo(0, 0);
addChild(shape);

How about in C#? Silverlight has a wide range of line drawing libraries. Though it’s powerful, but I really find it hard to learn. By a series of trial and error, I have come up a solution to draw a square using code. I think much more time is needed to explore the whole mystery of the Line Class.

Other than that, Silverlight has a readily available control (InkPresenter) for drawing lines. However, if you really want to produce the “ink” effect similar to the above sample, you may only do it by yourself.

// C#
// draw a square
PolyLineSegment polyLineSegment = new PolyLineSegment();
polyLineSegment.Points.Add(new Point(0, 100));
polyLineSegment.Points.Add(new Point(100, 100));
polyLineSegment.Points.Add(new Point(100, 0));
polyLineSegment.Points.Add(new Point(0, 0));

PathFigure pathFigure = new PathFigure();
pathFigure.StartPoint = new Point(0, 0);
pathFigure.Segments.Add(polyLineSegment);

PathGeometry pathGeometry = new PathGeometry();
pathGeometry.Figures.Add(pathFigure);

Path path = new Path();
path.Stroke = new SolidColorBrush(Colors.Black);
path.StrokeThickness = 10;
path.Data = pathGeometry;

// add to the stage
LayoutRoot.Children.Add(path);