“熊猫视图”.Net图形控件功能介绍 [三]：前景层与背景层

“熊猫视图”.Net图形控件功能介绍 [四]：一行代码实现视图自定义坐标系

---

“熊猫视图”.Net图形控件提供前景层与背景层的显示输出方式。

前景层：通常用于绘制悬浮文字、Logo图等。此层中的所有图形图像使用默认坐标系，永远覆盖在背景层之上，不支持缩放。

背景层：缺省使用系统坐标系，支持自定义坐标系，此层中的所有图形图像支持缩放。

前景层中的图形图像除了不支持自定义坐标系、不支持缩放平操作以外，其它属性方法和在背景中的使用完全一样。

    前文中绘制的100个随机矩形，是默认在背景层中绘制的。在这个基础上添加下面样例代码，实现在前景层中视图四角绘制四个 150x80 像素的矩形，使用红色边框并蓝色透明填充： 

/* 视图四角绘制四个 150x80 像素的矩形 */
//绘制左上角矩形
PandaView.Rectangle recTop1 = new PandaView.Rectangle();
PointF p3 = new PointF(0, 0);
PointF p4 = new PointF(150, 80);
recTop1.Points = new[] { p3, p4 };
recTop1.TopLevel = true;
recTop1.Anchor = PandaView.AnchorStyle.LeftTop;
recTop1.AnchorSpace = new PandaView.AnchorSpace(20, 20);
recTop1.Pen = new Pen(Color.Red);
recTop1.Pen.Width = 4;
recTop1.Fill = true;
recTop1.FillBrush = new SolidBrush(Color.FromArgb(128, 0, 0, 255));
recTop1.Creat(pandaView1);
 
//绘制右上角矩形
PandaView.Rectangle recTop2 = new PandaView.Rectangle();
PointF p5 = new PointF(0, 0);
PointF p6 = new PointF(150, 80);
recTop2.Points = new[] { p5, p6 };
recTop2.TopLevel = true;
recTop2.Anchor = PandaView.AnchorStyle.RightTop;
recTop2.AnchorSpace = new PandaView.AnchorSpace(20, 20);
recTop2.Pen = new Pen(Color.Red);
recTop2.Pen.Width = 4;
recTop2.Fill = true;
recTop2.FillBrush = recTop1.FillBrush;
recTop2.Creat(pandaView1);
 
//绘制左下角矩形
PandaView.Rectangle recTop3 = new PandaView.Rectangle();
PointF p7 = new PointF(0, 0);
PointF p8 = new PointF(150, 80);
recTop3.Points = new[] { p7, p8 };
recTop3.TopLevel = true;
recTop3.Anchor = PandaView.AnchorStyle.LeftBottom;
recTop3.AnchorSpace = new PandaView.AnchorSpace(20, 20);
recTop3.Pen = new Pen(Color.Red);
recTop3.Pen.Width = 4;
recTop3.Fill = true;
recTop3.FillBrush = recTop1.FillBrush;
recTop3.Creat(pandaView1);
 
//绘制右下角矩形
PandaView.Rectangle recTop4 = new PandaView.Rectangle();
PointF p9 = new PointF(0, 0);
PointF p10 = new PointF(150, 80);
recTop4.Points = new[] { p9, p10 };
recTop4.TopLevel = true;
recTop4.Anchor = PandaView.AnchorStyle.RightBottom;
recTop4.AnchorSpace = new PandaView.AnchorSpace(20, 20);
recTop4.Pen = new Pen(Color.Red);
recTop4.Pen.Width = 4;
recTop4.Fill = true;
recTop4.FillBrush = recTop1.FillBrush;
recTop4.Creat(pandaView1);

其中关键代码：

//在前景层绘制
recTop4.TopLevel = true;
 
//定位在右下角
recTop4.Anchor = PandaView.AnchorStyle.RightBottom;
 
//水平和垂直边缘距离
recTop4.AnchorSpace = new PandaView.AnchorSpace(20, 20);

AnchorStyle是个枚举值：

public enum AnchorStyle
{
    /// 
    /// 该图形定位到视图的左上角
    /// 
    LeftTop,
 
    /// 
    /// 该图形定位到视图的右上角
    /// 
    RightTop,
 
    /// 
    /// 该图形定位到视图的左下角
    /// 
    LeftBottom,
 
    /// 
    /// 该图形定位到视图的右下角
    /// 
    RightBottom
}

将上面绘制四个矩形的代码优化后如下：

/* 视图四角绘制四个 150x80 像素的矩形 */
for (int i = 0; i <= 3; i++)
{
    PandaView.Rectangle recTop = new PandaView.Rectangle();
    recTop.Points = new[] { new PointF(0, 0), new PointF(150, 80) };
    recTop.TopLevel = true;
    recTop.Anchor = (PandaView.AnchorStyle)i;
    recTop.AnchorSpace = new PandaView.AnchorSpace(20, 20);
    recTop.Pen = new Pen(Color.Red, 4);
    recTop.Fill = true;
    recTop.FillBrush = new SolidBrush(Color.FromArgb(128, 0, 0, 255));
    recTop.Creat(pandaView1);
}

注意：四个矩形的指定绘制位置都是(0,0)(150,80)，边缘距离都设置为 new PandaView.AnchorSpace(20, 20)，但是每个矩形的AnchorStyle值不同，控件都能够自动定位并偏移。从用户使用角度考虑是非常容易理解和使用的。

演示效果如下：