What is ImageGlue?
| Overview | ||
|
ImageGlue is a toolkit that allows you to create and modify still images. It can be used in .NET desktop applications or in ASP.NET server pages. |
Points
If you are drawing onto the Canvas you need to specify where you want your drawing to take place. You do this by giving the distance from the top left of the Canvas. You need a horizontal offset and a vertical offset (often called the x and y coordinates respectively). These offsets are measured in numbers of pixels starting at zero. Together these two coordinates are called a Point.
The point at the top left of a Canvas is always 0,0 and is often called the Origin.
Often you need to use groups of points to specify what you want drawn and where. Say you want to draw a line. To describe where you want it to be you need to state a start Point and an end Point. Many shapes are described using sets of Points. For instance, a rectangle only needs two Points to describe it (just like the line).
Transforms
if you first move an object right (1) and then rotate it by 45 degrees round the origin (2),
the effect can be completely different than if you rotate the object and then move it,
Drawing an Image
Creating the Canvas
Canvas canvas = new Canvas();
canvas.TextFont = "Arial";
canvas.TextSize = 7;
canvas.TextColor = new XColor(System.Drawing.Color.Gray);
canvas.Width = 300;
Drawing the Image
XImage image = XImage.FromFile(Server.MapPath("rez/birds.jpg"));
DrawOptions drawOpts = new DrawOptions(canvas);
drawOpts.ImageFit = DrawOptions.ImageFitType.AspectRatio;
drawOpts.VAlign = 0.5;
drawOpts.HAlign = 0.5;
canvas.DrawImage(image, drawOpts);
Drawing a Frame
drawOpts.ShapeDrawing = DrawOptions.ShapeDrawingType.Draw;
canvas.DrawRect(new XRect(0, 0, image.Width, image.Height), drawOpts);
Drawing the Text
XText text = canvas.GetTextMetrics("Copyright John Smith 2002", drawOpts);
canvas.Width += text.LineHeight + 2;
drawOpts.Transform.Rotate(-90, 0, 0);
drawOpts.Transform.Translate(300, canvas.Height-1);
canvas.DrawText(text.Text, drawOpts);
Saving
canvas.Export.Quality = 75;
canvas.SaveAs(Server.MapPath("Drawing_an_Image_1.jpg"));
Cropping an image
Creating the Canvas
Canvas canvas = new Canvas();
Creating the image
We create an image and find the portion of the image we want to draw. To do this we get the image Bounding Box. We then shrink this rectangle by 20 pixels on each side and set it as the image selection in the draw options.
XImage image = XImage.FromFile(Server.MapPath("rez/birds.jpg"));
DrawOptions drawOpts = new DrawOptions();
drawOpts.Selection = image.BoundingBox;
drawOpts.Selection.Shrink(20, 20);
Drawing the image
The default size of the Canvas is the natural, un-cropped size of the first image drawn on it. We are going to crop the image so we have to manually set the Canvas size to take this into account. Then we draw the image onto the Canvas. We also specify the image position to shift the image up and left to cater for our border width.
canvas.Width = drawOpts.Selection.Width;
canvas.Height = drawOpts.Selection.Height;
canvas.DrawImage(image, new XPoint(-20, -20), drawOpts);
Saving
canvas.SaveAs(Server.MapPath("Cropping_an_Image_4.jpg"));
Input and Output
Making Thumbnails (Easy)
Canvas canvas = new Canvas();
XImage image = XImage.FromFile(Server.MapPath("rez/pic.jpg"));
DrawOptions drawOpts = new DrawOptions();
drawOpts.Limit = new Size(0, 120); //等比例缩放，按照高度120pix为标准
canvas.DrawImage(image, drawOpts);
canvas.SaveAs(Server.MapPath("Making_Thumbnails_Easy_5.jpg"));
Making Thumbnails (Complete)
Canvas canvas = new Canvas();
XImage image = XImage.FromFile(Server.MapPath("rez/pic.jpg"));
DrawOptions drawOpts = new DrawOptions();
drawOpts.ImageFit = DrawOptions.ImageFitType.AspectRatio;
double ratio = (double)image.Height / (double)image.Width;
canvas.Width = 240;
canvas.Height = 240 * ratio;
canvas.DrawImage(image, drawOpts);
canvas.SaveAs(Server.MapPath("Making_Thumbnails_Complete_6_large.jpg"));
canvas.Clear();
