How drawing and merging.
The problem is quite
trivial and, in this article, I’m going to explain how we can do this.
The first step is to
create a Form where to locate a panel for drawing.
The example will consist
in three layers, each of these with an assigned name and fore-color.
It should be possible to
draw lines, with mouse use, on different layers, each properly selected.
The combobox contains a
list of layers and allows user to enable the current one, while the checkbox allows
to enable the layer visibility.
Layer Definition
I have imagined that a layer
has three simple properties: Name, Canvas, and a Visible.
public class DGLayerItem
{
public string Name { get; set; }
public Bitmap Canvas { get; set; }
public bool Visible { get; set; } = true;
public Color ForeColor { get; set; } = Color.Black;
public DGLayerItem(string name, Bitmap canvas, Color forecolor)
{
Name = name;
Canvas = canvas;
ForeColor = forecolor;
}
}
The above class
represents a layer.
Then, I defined a layer
list on a Form:
List<dglayeritem> _layers = new List<dglayeritem>();
For practical reason
this is a list of three layer
_layers.Add(new DGLayerItem("Layer 1", new Bitmap(panCanvas.Width,
panCanvas.Height), Color.Green));
_layers.Add(new DGLayerItem("Layer 2", new Bitmap(panCanvas.Width,
panCanvas.Height), Color.Blue));
_layers.Add(new DGLayerItem("Layer 3", new Bitmap(panCanvas.Width,
panCanvas.Height), Color.Red));
Each Canvas has the panel
size.
This is quite all we
need in terms of logic; the next step is how to draw and showing the miracle.
Drawing
The key point for
drawing is to manage the mouse events on a panel. For example, we need to
intercept the click on the area and the mouse moving.
For that reason, we
have to manage three events:
- MouseDown: initialize drawing.
- MouseMove: manage drawing.
- MouseUp: terminate drawing phase.
MousDown
private void
panCanvas_MouseDown(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
_prevPoint = e.Location;
string selectedLayerName = mbLayers.Items[cmbLayers.SelectedIndex].ToString();
_layer = _layers.FirstOrDefault(i
=> i.Name == selectedLayerName);
}
}
Current point
_prevPoint = e.Location;
Current Layer
string selectedLayerName = cmbLayers.Items[cmbLayers.SelectedIndex].ToString();
_layer = _layers.FirstOrDefault(i =>
i.Name == selectedLayerName);
MouseMove
private void
panCanvas_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
int mouseX = e.X;
int mouseY = e.Y;
using (Graphics g1 =
panCanvas.CreateGraphics())
{
using (Graphics g2 =
Graphics.FromImage(_layer.Canvas))
{
g1.Line(_prevPoint, e.Location, _layer.ForeColor);
g2.Line(_prevPoint, e.Location, _layer.ForeColor);
}
}
_prevPoint = e.Location;
}
}
Layer not selected
if (_layer == null) return;
Get instruments
using (Graphics g1 =
panCanvas.CreateGraphics())
In order to draw with
GDI+ we have to get a Graphics object.
This object it is a fundamental part in
every drawing phase. Every bitmap owns a graphic object.
We have to ask the
object, use it, and dispose it. The using keyword guarantee creation and
destruction.
In the procedure we
draw in two different places! g1 and g2:
The layer canvas
g2.Line(_prevPoint, e.Location,
_layer.ForeColor);
And the panel canvas
g1.Line(_prevPoint, e.Location, _layer.ForeColor);
Why drawing in two areas?
It is a trick in order
to avoid loss of time and obtain a good quality result.
It should be possible
to draw only in the layer and the merge every think on the panel, but with
problems of flickering or line width increasing.
MouseUp
private void
panCanvas_MouseUp(object sender, MouseEventArgs e)
{
if (_status == DrawStatus.Drawing)
{
RepaintLayers(true);
}
}
The final part is
resumed on a RepaintLayer() procedure:
private void RepaintLayers(bool clearCanvas = false)
{
Rectangle rect = new Rectangle(panCanvas.Location,
panCanvas.Size);
using (Graphics g =
panCanvas.CreateGraphics())
{
if (clearCanvas)
g.Clear(panCanvas.BackColor);
foreach (var item in _layers)
{
if (item.Visible)
g.DrawImage(item.Canvas, 0, 0);
}
}
}
The core part of this
code is:
foreach (var item in _layers)
{
if (item.Visible)
g.DrawImage(item.Canvas, 0,
0);
}
Every visible layer is
merged on the panel bitmap.
