Adding Graphics to C1FlashCanvas

The C1FlashCanvas class exposes several methods that allow you to add graphical elements to your documents, including lines, rectangles, ellipses, pies, arcs, rounded rectangles, polygons, Bezier curves, and so on.

The methods are a subset of those found in the .NET Graphics class, and use the same Brush and Pen classes to control the color and style of the lines and filled areas.

The following example illustrates how similar the graphics methods are between C1FlashCanvas and the .NET Graphics class. The sample declares a C1FlashCanvas class and calls methods to draw/fill shapes with solid color, semi-transparent color, texture brush or gradient brush.

The point of the sample is that if you replaced the C1FlashCanvas class with a regular .NET Graphics object, you would be able to compile the code and get the same results:

To write code in Visual Basic

Visual Basic	Copy Code
Dim canvas As New C1FlashCanvas() 'Draw line sections Dim pen As New Pen(Color.Red, 1) Dim points(4) As Point points(0) = New Point(40, 40) points(1) = New Point(150, 100) points(2) = New Point(150, 300) points(3) = New Point(300, 120) canvas.DrawLines(pen, points) ' Draw Bezier curve Dim start As New Point(100, 100) Dim control1 As New Point(200, 10) Dim control2 As New Point(350, 50) Dim end1 As New Point(500, 100) Dim control3 As New Point(600, 150) Dim control4 As New Point(650, 250) Dim end2 As New Point(500, 300) Dim bezierPoints As Point() = {start, control1, control2, end1, control3, control4, end2} canvas.DrawBeziers(pen, bezierPoints) ' Fill rectangle with solid color Dim rect As New Rectangle(200, 210, 120, 60) canvas.FillRectangle(Brushes.LightBlue, rect) ' Fill the rectangle with color that has alpha value Dim c As Color = Color.FromArgb(90, Color.Blue) Dim b As New SolidBrush(c) rect.Offset(30, 30) canvas.FillRectangle(b, rect) b.Dispose() ' Create a texture brush Dim a As [Assembly] = [Assembly].GetExecutingAssembly() Dim an As String = a.GetName().Name Dim bmp As New Bitmap(a.GetManifestResourceStream((an + ".lvhover.jpg"))) Dim tb As New TextureBrush(bmp) ' Fill the rectangle with texture brush rect = New Rectangle(80, 120, 100, 120) canvas.FillRectangle(tb, rect) ' Fill the pie with texture brush rect = New Rectangle(300, 60, 150, 100) canvas.FillPie(tb, rect, 30, 120) ' Draw a pie as border pen.Color = Color.Green pen.Width = 2 canvas.DrawPie(pen, rect, 30, 120) ' Create a linear gradient brush Dim lb As New LinearGradientBrush(New Point(0, 0), New Point(100, 0), Color.Blue, Color.Red) Dim cb As New ColorBlend(3) cb.Colors = New Color(3) {} cb.Colors(1) = Color.Red cb.Colors(2) = Color.Blue cb.Colors(3) = Color.Yellow cb.Positions = New Single(3) {} cb.Positions(1) = 0 cb.Positions(2) = 0.5F cb.Positions(3) = 1 lb.InterpolationColors = cb ' Fill the rectangle with the linear gradient brush rect = New Rectangle(360, 200, 120, 40) canvas.FillRectangle(lb, rect) ' Fill the ellipse with the linear gradient brush rect = New Rectangle(360, 260, 120, 120) canvas.FillEllipse(lb, rect) lb.Dispose() ' Create a graphics path and add some graphical elements to this path Dim graphPath As New GraphicsPath() graphPath.AddEllipse(0, 0, 200, 100) graphPath.AddRectangle(New Rectangle(20, 20, 200, 100)) graphPath.FillMode = FillMode.Winding graphPath.AddString("Jason", FontFamily.GenericSansSerif, 1, 68, New Rectangle(100, 320, 400, 100), StringFormat.GenericDefault) ' Fill the path canvas.FillPath(Brushes.LightBlue, graphPath) ' Load the image from resource Dim c1logo As New Bitmap(a.GetManifestResourceStream((an + ".c1logo.jpg"))) ' Draw the image canvas.DrawImage(c1logo, New Point(320, 10)) c1logo.Dispose() ' Draw some text Dim font As New Font("MS Sans Serif", 15) canvas.DrawString("Text in normal", font, Brushes.DarkOrange, New PointF(20, 280)) font.Dispose() ' Draw some text in bold font = New Font("MS Sans Serif", 15, FontStyle.Bold) canvas.DrawString("Text in Bold", font, Brushes.DarkOrange, New PointF(20, 300)) font.Dispose() ' Draw some text in italic font = New Font("MS Sans Serif", 15, FontStyle.Italic) canvas.DrawString("Text in Italic", font, Brushes.DarkOrange, New PointF(20, 320)) ' Draw text with right alignment rect = New Rectangle(20, 340, 150, 25) canvas.DrawRectangle(Pens.Black, rect) Dim sf As StringFormat = StringFormat.GenericDefault sf.Alignment = System.Drawing.StringAlignment.Far canvas.DrawString("Right alignment", font, Brushes.DarkOrange, rect, sf) font.Dispose() pen.Dispose() tb.Dispose() bmp.Dispose() canvas.RenderToFile("")

Visual Basic

Copy Code

Dim canvas As New C1FlashCanvas()
 
'Draw line sections
Dim pen As New Pen(Color.Red, 1)
Dim points(4) As Point
points(0) = New Point(40, 40)
points(1) = New Point(150, 100)
points(2) = New Point(150, 300)
points(3) = New Point(300, 120)
canvas.DrawLines(pen, points)
 
' Draw Bezier curve
Dim start As New Point(100, 100)
Dim control1 As New Point(200, 10)
Dim control2 As New Point(350, 50)
Dim end1 As New Point(500, 100)
Dim control3 As New Point(600, 150)
Dim control4 As New Point(650, 250)
Dim end2 As New Point(500, 300)
Dim bezierPoints As Point() =  {start, control1, control2, end1, control3, control4, end2}
canvas.DrawBeziers(pen, bezierPoints)
 
' Fill rectangle with solid color
Dim rect As New Rectangle(200, 210, 120, 60)
canvas.FillRectangle(Brushes.LightBlue, rect)
 
' Fill the rectangle with color that has alpha value
Dim c As Color = Color.FromArgb(90, Color.Blue)
Dim b As New SolidBrush(c)
rect.Offset(30, 30)
canvas.FillRectangle(b, rect)
b.Dispose()
 
' Create a texture brush
Dim a As [Assembly] = [Assembly].GetExecutingAssembly()
Dim an As String = a.GetName().Name
Dim bmp As New Bitmap(a.GetManifestResourceStream((an + ".lvhover.jpg")))
Dim tb As New TextureBrush(bmp)
 
' Fill the rectangle with texture brush
rect = New Rectangle(80, 120, 100, 120)
canvas.FillRectangle(tb, rect)
 
' Fill the pie with texture brush
rect = New Rectangle(300, 60, 150, 100)
canvas.FillPie(tb, rect, 30, 120)
 
' Draw a pie as border
pen.Color = Color.Green
pen.Width = 2
canvas.DrawPie(pen, rect, 30, 120)
 
' Create a linear gradient brush
Dim lb As New LinearGradientBrush(New Point(0, 0), New Point(100, 0), Color.Blue, Color.Red)
Dim cb As New ColorBlend(3)
cb.Colors = New Color(3) {}
cb.Colors(1) = Color.Red
cb.Colors(2) = Color.Blue
cb.Colors(3) = Color.Yellow
cb.Positions = New Single(3) {}
cb.Positions(1) = 0
cb.Positions(2) = 0.5F
cb.Positions(3) = 1
lb.InterpolationColors = cb
 
' Fill the rectangle with the linear gradient brush
rect = New Rectangle(360, 200, 120, 40)
canvas.FillRectangle(lb, rect)
 
' Fill the ellipse with the linear gradient brush
rect = New Rectangle(360, 260, 120, 120)
canvas.FillEllipse(lb, rect)
lb.Dispose()
 
' Create a graphics path and add some graphical elements to this path
Dim graphPath As New GraphicsPath()
graphPath.AddEllipse(0, 0, 200, 100)
graphPath.AddRectangle(New Rectangle(20, 20, 200, 100))
graphPath.FillMode = FillMode.Winding
graphPath.AddString("Jason", FontFamily.GenericSansSerif, 1, 68, New Rectangle(100, 320, 400, 100), StringFormat.GenericDefault)
 
' Fill the path
canvas.FillPath(Brushes.LightBlue, graphPath)
 
' Load the image from resource
Dim c1logo As New Bitmap(a.GetManifestResourceStream((an + ".c1logo.jpg")))
 
' Draw the image
canvas.DrawImage(c1logo, New Point(320, 10))
c1logo.Dispose()
 
' Draw some text
Dim font As New Font("MS Sans Serif", 15)
canvas.DrawString("Text in normal", font, Brushes.DarkOrange, New PointF(20, 280))
font.Dispose()
 
' Draw some text in bold
font = New Font("MS Sans Serif", 15, FontStyle.Bold)
canvas.DrawString("Text in Bold", font, Brushes.DarkOrange, New PointF(20, 300))
font.Dispose()
 
' Draw some text in italic
font = New Font("MS Sans Serif", 15, FontStyle.Italic)
canvas.DrawString("Text in Italic", font, Brushes.DarkOrange, New PointF(20, 320))
 
' Draw text with right alignment
rect = New Rectangle(20, 340, 150, 25)
canvas.DrawRectangle(Pens.Black, rect)
Dim sf As StringFormat = StringFormat.GenericDefault
sf.Alignment = System.Drawing.StringAlignment.Far
canvas.DrawString("Right alignment", font, Brushes.DarkOrange, rect, sf)
font.Dispose()
pen.Dispose()
tb.Dispose()
bmp.Dispose()
 
canvas.RenderToFile("")

To write code in C#

C#	Copy Code
C1FlashCanvas canvas = new C1FlashCanvas(); //Draw line sections Pen pen = new Pen(Color.Red, 1); Point[] points = new Point[4]; points[0] = new Point(40, 40); points[1] = new Point(150, 100); points[2] = new Point(150, 300); points[3] = new Point(300, 120); canvas.DrawLines(pen, points); // Draw Bezier curve Point start = new Point(100, 100); Point control1 = new Point(200, 10); Point control2 = new Point(350, 50); Point end1 = new Point(500, 100); Point control3 = new Point(600, 150); Point control4 = new Point(650, 250); Point end2 = new Point(500, 300); Point[] bezierPoints = { start, control1, control2, end1, control3, control4, end2 }; canvas.DrawBeziers(pen, bezierPoints); // Fill rectangle with solid color Rectangle rect = new Rectangle(200, 210, 120, 60); canvas.FillRectangle(Brushes.LightBlue, rect); // Fill the rectangle with color that has alpha value Color c = Color.FromArgb(90, Color.Blue); SolidBrush b = new SolidBrush(c); rect.Offset(30, 30); canvas.FillRectangle(b, rect); b.Dispose(); // Create a texture brush Assembly a = Assembly.GetExecutingAssembly(); string an = a.GetName().Name; Bitmap bmp = new Bitmap(a.GetManifestResourceStream(an + ".lvhover.jpg")); TextureBrush tb = new TextureBrush(bmp); // Fill the rectangle with texture brush rect = new Rectangle(80, 120, 100, 120); canvas.FillRectangle(tb, rect); // Fill the pie with texture brush rect = new Rectangle(300, 60, 150, 100); canvas.FillPie(tb, rect, 30, 120); // Draw a pie as border pen.Color = Color.Green; pen.Width = 2; canvas.DrawPie(pen, rect, 30, 120); // Create a linear gradient brush LinearGradientBrush lb = new LinearGradientBrush(new Point(0, 0), new Point(100, 0), Color.Blue, Color.Red); ColorBlend cb = new ColorBlend(3); cb.Colors = new Color[3]; cb.Colors[1] = Color.Red; cb.Colors[2] = Color.Blue; cb.Colors[3] = Color.Yellow; cb.Positions = new float[3]; cb.Positions[1] = 0; cb.Positions[2] = 0.5F; cb.Positions[3] = 1; lb.InterpolationColors = cb; // Fill the rectangle with the linear gradient brush rect = new Rectangle(360, 200, 120, 40); canvas.FillRectangle(lb, rect); // Fill the ellipse with the linear gradient brush rect = new Rectangle(360, 260, 120, 120); canvas.FillEllipse(lb, rect); lb.Dispose(); // Create a graphics path and add some graphical elements to this path GraphicsPath graphPath = new GraphicsPath(); graphPath.AddEllipse(0, 0, 200, 100); graphPath.AddRectangle(new Rectangle(20, 20, 200, 100)); graphPath.FillMode = FillMode.Winding; graphPath.AddString("Jason", FontFamily.GenericSansSerif, 1, 68, new Rectangle(100, 320, 400, 100), StringFormat.GenericDefault); // Fill the path canvas.FillPath(Brushes.LightBlue, graphPath); // Load the image from resource Bitmap c1logo = new Bitmap(a.GetManifestResourceStream(an + ".c1logo.jpg")); // Draw the image canvas.DrawImage(c1logo, new Point(320, 10)); c1logo.Dispose(); // Draw some text Font font = new Font("MS Sans Serif", 15); canvas.DrawString("Text in normal", font, Brushes.DarkOrange, new PointF(20, 280)); font.Dispose(); // Draw some text in bold font = new Font("MS Sans Serif", 15, FontStyle.Bold); canvas.DrawString("Text in Bold", font, Brushes.DarkOrange, new PointF(20, 300)); font.Dispose(); // Draw some text in italic font = new Font("MS Sans Serif", 15, FontStyle.Italic); canvas.DrawString("Text in Italic", font, Brushes.DarkOrange, new PointF(20, 320)); // Draw text with right alignment rect = new Rectangle(20, 340, 150, 25); canvas.DrawRectangle(Pens.Black, rect); StringFormat sf = StringFormat.GenericDefault; sf.Alignment = System.Drawing.StringAlignment.Far; canvas.DrawString("Right alignment", font, Brushes.DarkOrange, rect, sf); font.Dispose(); pen.Dispose(); tb.Dispose(); bmp.Dispose(); canvas.RenderToFile(@"c:\temp\gdi.swf");

Copy Code

C1FlashCanvas canvas = new C1FlashCanvas();
 
//Draw line sections
Pen pen = new Pen(Color.Red, 1);
Point[] points = new Point[4];
points[0] = new Point(40, 40);
points[1] = new Point(150, 100);
points[2] = new Point(150, 300);
points[3] = new Point(300, 120);
canvas.DrawLines(pen, points);
 
// Draw Bezier curve
Point start = new Point(100, 100);
Point control1 = new Point(200, 10);
Point control2 = new Point(350, 50);
Point end1 = new Point(500, 100);
Point control3 = new Point(600, 150);
Point control4 = new Point(650, 250);
Point end2 = new Point(500, 300);
Point[] bezierPoints = { start, control1, control2, end1, control3, control4, end2 };
canvas.DrawBeziers(pen, bezierPoints);
 
// Fill rectangle with solid color
Rectangle rect = new Rectangle(200, 210, 120, 60);
canvas.FillRectangle(Brushes.LightBlue, rect);
 
// Fill the rectangle with color that has alpha value
Color c = Color.FromArgb(90, Color.Blue);
SolidBrush b = new SolidBrush(c);
rect.Offset(30, 30);
canvas.FillRectangle(b, rect);
b.Dispose();
 
// Create a texture brush
Assembly a = Assembly.GetExecutingAssembly();
string an = a.GetName().Name;
Bitmap bmp = new Bitmap(a.GetManifestResourceStream(an + ".lvhover.jpg"));
TextureBrush tb = new TextureBrush(bmp);
 
// Fill the rectangle with texture brush
rect = new Rectangle(80, 120, 100, 120);
canvas.FillRectangle(tb, rect);
 
// Fill the pie with texture brush
rect = new Rectangle(300, 60, 150, 100);
canvas.FillPie(tb, rect, 30, 120);
 
// Draw a pie as border
pen.Color = Color.Green;
pen.Width = 2;
canvas.DrawPie(pen, rect, 30, 120);
 
// Create a linear gradient brush
LinearGradientBrush lb = new LinearGradientBrush(new Point(0, 0), new Point(100, 0), Color.Blue, Color.Red);
ColorBlend cb = new ColorBlend(3);
cb.Colors = new Color[3];
cb.Colors[1] = Color.Red;
cb.Colors[2] = Color.Blue;
cb.Colors[3] = Color.Yellow;
cb.Positions = new float[3];
cb.Positions[1] = 0;
cb.Positions[2] = 0.5F;
cb.Positions[3] = 1;
lb.InterpolationColors = cb;
 
// Fill the rectangle with the linear gradient brush
rect = new Rectangle(360, 200, 120, 40);
canvas.FillRectangle(lb, rect);
 
// Fill the ellipse with the linear gradient brush
rect = new Rectangle(360, 260, 120, 120);
canvas.FillEllipse(lb, rect);
lb.Dispose();
 
// Create a graphics path and add some graphical elements to this path
GraphicsPath graphPath = new GraphicsPath();
graphPath.AddEllipse(0, 0, 200, 100);
graphPath.AddRectangle(new Rectangle(20, 20, 200, 100));
graphPath.FillMode = FillMode.Winding;
graphPath.AddString("Jason", FontFamily.GenericSansSerif, 1, 68, new Rectangle(100, 320, 400, 100), StringFormat.GenericDefault);
 
// Fill the path
canvas.FillPath(Brushes.LightBlue, graphPath);
 
// Load the image from resource
Bitmap c1logo = new Bitmap(a.GetManifestResourceStream(an + ".c1logo.jpg"));
 
// Draw the image
canvas.DrawImage(c1logo, new Point(320, 10));
c1logo.Dispose();
 
// Draw some text
Font font = new Font("MS Sans Serif", 15);
canvas.DrawString("Text in normal", font, Brushes.DarkOrange, new PointF(20, 280));
font.Dispose();
 
// Draw some text in bold
font = new Font("MS Sans Serif", 15, FontStyle.Bold);
canvas.DrawString("Text in Bold", font, Brushes.DarkOrange, new PointF(20, 300));
font.Dispose();
 
// Draw some text in italic
font = new Font("MS Sans Serif", 15, FontStyle.Italic);
canvas.DrawString("Text in Italic", font, Brushes.DarkOrange, new PointF(20, 320));
 
// Draw text with right alignment
rect = new Rectangle(20, 340, 150, 25);
canvas.DrawRectangle(Pens.Black, rect);
StringFormat sf = StringFormat.GenericDefault;
sf.Alignment = System.Drawing.StringAlignment.Far;
canvas.DrawString("Right alignment", font, Brushes.DarkOrange, rect, sf);
font.Dispose();
pen.Dispose();
tb.Dispose();
bmp.Dispose();
 
canvas.RenderToFile(@"c:\temp\gdi.swf");

Here is the resulting Flash document:

Transforming the Graphic

As in the .NET Graphics class, you can rotate/scale/translate the coordinate by modifying the Transform property or call the corresponding methods of the C1FlashCanvas.

The following example rotates and scales the coordinate in a circle and draws the same rectangle in each coordinate.

To write code in Visual Basic

Visual Basic	Copy Code
Dim canvas As New C1FlashCanvas() ' Resets the coordinate transform canvas.ResetTransform() Dim ptCenter As New Point(canvas.Width / 2, canvas.Height / 2) ' Moves the coordinate origin point to the center of the canvas canvas.TranslateTransform(ptCenter.X, ptCenter.Y) Dim rect As New Rectangle(0, 0, 100, 40) Dim i As Integer For i = 0 To 11 ' Draws the rectangle with the same rectangle parameter canvas.DrawRectangle(Pens.Orange, rect) ' Rotates the coordination by 30 degrees canvas.RotateTransform(30) ' Scales the coordination canvas.ScaleTransform(1.075F, 1.075F) Next i canvas.RenderToFile("c:\temp\transform.swf")

To write code in C#

C#	Copy Code
C1FlashCanvas canvas = new C1FlashCanvas(); // Resets the coordinate transform canvas.ResetTransform(); Point ptCenter = new Point(canvas.Width/2, canvas.Height/2); // Moves the coordinate origin point to the center of the canvas canvas.TranslateTransform(ptCenter.X, ptCenter.Y); Rectangle rect = new Rectangle(0, 0, 100, 40); for(int i = 0; i < 12; i++) { // Draws the rectangle with the same rectangle parameter canvas.DrawRectangle(Pens.Orange, rect); // Rotates the coordination by 30 degrees canvas.RotateTransform(30); // Scales the coordination canvas.ScaleTransform(1.075F, 1.075F); } canvas.RenderToFile(@"c:\temp\transform.swf");

Here is the result of the code: