在上篇文章中，韦恩卑鄙提出了silverlight3.0版本中增加了本地动态生成图片的方法，我又搜索了一下，的确可以了，您可以访问http://developer.51cto.com/art/200903/115552.htm查看详细信息，特此感谢韦恩卑鄙。
上文已经搭建除了一个生成图片的框架，但是还没有完成具体的代码，本章将继续上一章的内容。本章内容很简单，如果您不想往下继续看了，请下载源代码看一下实际效果吧。
源代码下载：http://www.shareidea.net/opensource.htm
在线演示：http://www.shareidea.net/workflow.htm
视频教程: http://www.shareidea.net/video/sharedesigner/sharedesigner.html
QQ群：85444465
本文系列索引：
使用silverlight构建一个工作流设计器(一)
使用silverlight构建一个工作流设计器(二)
使用silverlight构建一个工作流设计器(三)
使用silverlight构建一个工作流设计器(四)
使用silverlight构建一个工作流设计器(五)
使用silverlight构建一个工作流设计器(六)
使用silverlight构建一个工作流设计器(七)
使用silverlight构建一个工作流设计器(八)
使用silverlight构建一个工作流设计器(九)
使用silverlight构建一个工作流设计器(十)
使用silverlight构建一个工作流设计器(十一)
使用silverlight构建一个工作流设计器(十二)
使用silverlight构建一个工作流设计器(十三)
使用silverlight构建一个工作流设计器(十四)
在上篇文章中，韦恩卑鄙提出了silverlight3.0版本中增加了本地动态生成图片的方法，我又搜索了一下，的确可以了，您可以访问http://developer.51cto.com/art/200903/115552.htm查看详细信息，特此感谢韦恩卑鄙。
上文已经搭建除了一个生成图片的框架，但是还没有完成具体的代码，本章将继续上一章的内容。本章内容很简单，如果您不想往下继续看了，请下载源代码看一下实际效果吧。
九、动态生成流程图片
9.4 生成图片
为了动态生成图片，我们需要使用到两个主要的类：
l Bitmap：是用于处理由像素数据定义的图像的对象,它封装 GDI+ 位图，此位图由图形图像及其属性的像素数据组成。
l Graphics：它封装一个 GDI+ 绘图图面。我们主要使用这个提供的各种方法来绘制矩形，椭圆，直线，文字等。
根据上节的内容，我们需要根据从客户端传递过来的工作流xml描述文件生成一个对应的图片，这个xml文件具体描述了工作流的图形属性，包括容器图形，活动图形和规则图形。对应的，我们也需要设计三个类，分别表示容器，活动和规则的图形，然后分析xml文件，创建一个容器，并且根据xml文件创建相应的规则和活动。
9.4.1 容器类
容器类比较简单，包含四个属性：
l Width：容器宽。
l Height：容器高。
l RulePictureCollection：规则集合。
l ActivityPictureCollection：活动集合。
还有一个方法ParseWorkFlowXML(string xml)，这个方法主要功能就是分析接收的xml参数，然后动态生成活动和规则类，并把xml里面的相关信息关联到规则和活动类中。
下面是容器类的代码
Code
public class ContainerPicture
{
/// <summary>
/// 分析xml字符串
/// </summary>
/// <param name="xmlString"></param>
public void ParseWorkFlowXML(string xmlString)
{
float left;
float top;
string activityType = "";
string repeatDirection = "";
string uniqueID = "";
string activityID = "";
string activityName = "";
Byte[] b = System.Text.UTF8Encoding.UTF8.GetBytes(xmlString);
XElement xele = XElement.Load(System.Xml.XmlReader.Create(new MemoryStream(b)));
double.TryParse(xele.Attribute(XName.Get("Width")).Value, out _width);
double.TryParse(xele.Attribute(XName.Get("Height")).Value, out _height);
var partNos = from item in xele.Descendants("Activity") select item;
foreach (XElement node in partNos)
{
activityType = node.Attribute(XName.Get("Type")).Value;
repeatDirection = node.Attribute(XName.Get("RepeatDirection")).Value;
uniqueID = node.Attribute(XName.Get("UniqueID")).Value;
activityID = node.Attribute(XName.Get("ActivityID")).Value;
activityName = node.Attribute(XName.Get("ActivityName")).Value;
float.TryParse(node.Attribute(XName.Get("PositionX")).Value, out left);
float.TryParse(node.Attribute(XName.Get("PositionY")).Value, out top);
//float.TryParse(node.Attribute(XName.Get("ZIndex")).Value, out zIndex);
ActivityPicture a = new ActivityPicture();
a.RepeatDirection = repeatDirection;
a.ActivityName = activityName;
a.ActivityType = activityType;
a.Left = left;
a.Top = top;
ActivityPictureCollection.Add(a);
}
partNos = from item in xele.Descendants("Rule") select item;
foreach (XElement node in partNos)
{
RulePicture r = new RulePicture();
r.LineType = node.Attribute(XName.Get("LineType")).Value;
r.RuleName = node.Attribute(XName.Get("RuleName")).Value;
double.TryParse(node.Attribute(XName.Get("BeginPointX")).Value, out r.BeginPointX);
double.TryParse(node.Attribute(XName.Get("BeginPointY")).Value, out r.BeginPointY);
double.TryParse(node.Attribute(XName.Get("EndPointX")).Value, out r.EndPointX);
double.TryParse(node.Attribute(XName.Get("EndPointY")).Value, out r.EndPointY);
double.TryParse(node.Attribute(XName.Get("TurnPoint1X")).Value, out r.TurnPoint1X);
double.TryParse(node.Attribute(XName.Get("TurnPoint1Y")).Value, out r.TurnPoint1Y);
double.TryParse(node.Attribute(XName.Get("TurnPoint2X")).Value, out r.TurnPoint2X);
double.TryParse(node.Attribute(XName.Get("TurnPoint2Y")).Value, out r.TurnPoint2Y);
RulePictureCollection.Add(r);
}
}
double _width = 1024;
/// <summary>
/// 容器宽
/// </summary>
public double Width
{
get { return _width; }
set
{
_width = value;
}
}
double _height = 800;
/// <summary>
/// 容器高
/// </summary>
public double Height { get { return _height; }
set
{
_height = value;
}
}
List<RulePicture> _rulePictureCollection;
/// <summary>
/// 规则集合
/// </summary>
public List<RulePicture> RulePictureCollection
{
get
{
if (_rulePictureCollection == null)
_rulePictureCollection = new List<RulePicture>();
return _rulePictureCollection;
}
}
List<ActivityPicture> _activityPictureCollection;
/// <summary>
/// 活动集合
/// </summary>
public List<ActivityPicture> ActivityPictureCollection
{
get
{
if (_activityPictureCollection == null)
_activityPictureCollection = new List<ActivityPicture>();
return _activityPictureCollection;
}
}
}
9.4.2 活动类
活动类包含以下几个重要属性：
l ActivityName：活动名称
l ActivityType：活动类型
l RepeatDirection：如果活动类型是汇聚活动，那么指出图形的摆放方向
l Left：活动相对于容器的X坐标
l Top：活动相对与容器的Y坐标
l Width：活动的宽
l Height：活动的高
活动还包含一个重要的方法，DrawingPic(Graphics gr),这个方法根据活动的属性来绘制活动的图形。下面的活动类的代码：
Code
public class ActivityPicture
{
public string RepeatDirection;
public string ActivityType;
float _left;
public float Left
{
get
{
if (ActivityType.ToLower() == "INTERACTION".ToLower())
{
}
else if (ActivityType.ToLower() == "INITIAL".ToLower()
|| ActivityType.ToLower() == "COMPLETION".ToLower()
|| ActivityType.ToLower() == "SUBPROCESS".ToLower()
|| ActivityType.ToLower() == "AUTOMATION".ToLower())
{
return _left + 25;
}
else if (ActivityType.ToLower() == "AND_MERGE".ToLower()
|| ActivityType.ToLower() == "OR_MERGE".ToLower()
|| ActivityType.ToLower() == "VOTE_MERGE".ToLower())
{
if (RepeatDirection.ToLower() == "Horizontal".ToLower())
return _left + 20;
else
return _left + 40;
}
else if (ActivityType.ToLower() == "AND_BRANCH".ToLower()
|| ActivityType.ToLower() == "OR_BRANCH".ToLower())
{
return _left + 10;
}
return _left;
}
set
{
_left = value;
}
}
public float Top;
public float Width
{
get
{
if (ActivityType.ToLower() == "INTERACTION".ToLower())
{
return 100;
}
else if (ActivityType.ToLower() == "INITIAL".ToLower()
|| ActivityType.ToLower() == "COMPLETION".ToLower()
|| ActivityType.ToLower() == "SUBPROCESS".ToLower()
|| ActivityType.ToLower() == "AUTOMATION".ToLower())
{
return 50;
}
else if (ActivityType.ToLower() == "AND_MERGE".ToLower()
|| ActivityType.ToLower() == "OR_MERGE".ToLower()
|| ActivityType.ToLower() == "VOTE_MERGE".ToLower())
{
if (RepeatDirection.ToLower() == "Horizontal".ToLower())
return 60;
else
return 20;
}
else if (ActivityType.ToLower() == "AND_BRANCH".ToLower()
|| ActivityType.ToLower() == "OR_BRANCH".ToLower())
{
return 60;
}
return 100;
}
}
public float Height
{
get
{
if (ActivityType.ToLower() == "INTERACTION".ToLower())
{
return 60;
}
else if (ActivityType.ToLower() == "INITIAL".ToLower()
|| ActivityType.ToLower() == "COMPLETION".ToLower()
|| ActivityType.ToLower() == "SUBPROCESS".ToLower()
|| ActivityType.ToLower() == "AUTOMATION".ToLower())
{
return 50;
}
else if (ActivityType.ToLower() == "AND_MERGE".ToLower()
|| ActivityType.ToLower() == "OR_MERGE".ToLower()
|| ActivityType.ToLower() == "VOTE_MERGE".ToLower())
{
if (RepeatDirection.ToLower() == "Horizontal".ToLower())
return 20;
else
return 60;
}
else if (ActivityType.ToLower() == "AND_BRANCH".ToLower()
|| ActivityType.ToLower() == "OR_BRANCH".ToLower())
{
return 60;
}
return 100;
}
}
public string ActivityName;
public void DrawingPic(Graphics gr)
{
if (ActivityType.ToLower() == "INTERACTION".ToLower())
{
gr.DrawRectangle(new Pen(Brushes.Green), Left, Top, Width, Height);
Font fn = new Font("@宋体", 12);
SolidBrush solidBlack = new SolidBrush(Color.White);
gr.DrawString(ActivityName, fn, solidBlack, Left + 5, Top + Height / 2 - 10);
}
else if (ActivityType.ToLower() == "INITIAL".ToLower()
|| ActivityType.ToLower() == "COMPLETION".ToLower()
|| ActivityType.ToLower() == "SUBPROCESS".ToLower()
|| ActivityType.ToLower() == "AUTOMATION".ToLower())
{
//Left += 25;
gr.DrawEllipse(new Pen(Brushes.Green), Left, Top, Width, Height);
Font fn = new Font("@宋体", 12);
SolidBrush solidBlack = new SolidBrush(Color.White);
gr.DrawString(ActivityName, fn, solidBlack, Left + 5, Top + Height / 2 - 10);
}
else if (ActivityType.ToLower() == "AND_MERGE".ToLower()
|| ActivityType.ToLower() == "OR_MERGE".ToLower()
|| ActivityType.ToLower() == "VOTE_MERGE".ToLower())
{
// Left += 20;
gr.DrawRectangle(new Pen(Brushes.Green), Left, Top, Width, Height);
Font fn = new Font("@宋体", 12);
SolidBrush solidBlack = new SolidBrush(Color.White);
gr.DrawString(ActivityName, fn, solidBlack, Left + 5, Top + Height / 2 - 10);
}
else if (ActivityType.ToLower() == "AND_BRANCH".ToLower()
|| ActivityType.ToLower() == "OR_BRANCH".ToLower())
{
// Left += 10;
Point[] ps = new Point[5];
ps[0].X = (int)Left + 50;
ps[0].Y = (int)Top;
ps[1].X = (int)Left + 80;
ps[1].Y = (int)Top + 30;
ps[2].X = (int)Left + 50;
ps[2].Y = (int)Top + 60;
ps[3].X = (int)Left + 20;
ps[3].Y = (int)Top + 30;
ps[4].X = (int)Left + 50;
ps[4].Y = (int)Top + 0;
GraphicsPath gp = new GraphicsPath();
gp.AddLine(ps[0], ps[1]);
gp.AddLine(ps[1], ps[2]);
gp.AddLine(ps[2], ps[3]);
gp.AddLine(ps[3], ps[4]);
gr.DrawPath(new Pen(Brushes.Green), gp);
Font fn = new Font("@宋体", 12);
SolidBrush solidBlack = new SolidBrush(Color.White);
gr.DrawString(ActivityName, fn, solidBlack, Left + 5, Top + Height / 2 - 10);
}
}
}
9.4.3 规则类
和活动类类似，规则类也包含了一些表示规则图形的重要属性，包括以下几个：
l RuleName：规则名称
l LineType：线条类型
l BeginPointX：起始点X坐标
l BeginPointY：起始点Y坐标
l EndPointX：终点X坐标
l EndPointY：终点Y坐标
l TurnPoint1X：转折点1X坐标
l TurnPoint1Y：转折点1Y坐标
l TurnPoint2X：转折点2X坐标
l TurnPoint2Y：转折点2Y坐标
以及一个重要的方法，DrawingPic(Graphics gr)，这个方法根据规则的属性绘制规则图形，下面是规则类的具体代码：
Code
public class RulePicture
{
public string RuleName;
public string LineType;
public double BeginPointX;
public double BeginPointY;
public double EndPointX;
public double EndPointY;
public double TurnPoint1X;
public double TurnPoint1Y;
public double TurnPoint2X;
public double TurnPoint2Y;
public void DrawingPic(Graphics gr)
{
Point[] ps = null;
if (LineType.ToLower() == "Polyline".ToLower())
{
ps = new Point[4];
ps[0].X = (int)BeginPointX;
ps[0].Y = (int)BeginPointY;
ps[1].X = (int)TurnPoint1X;
ps[1].Y = (int)TurnPoint1Y;
ps[2].X = (int)TurnPoint2X;
ps[2].Y = (int)TurnPoint2Y;
ps[3].X = (int)EndPointX;
ps[3].Y = (int)EndPointY;
}
else
{
ps = new Point[2];
ps[0].X = (int)BeginPointX;
ps[0].Y = (int)BeginPointY;
ps[1].X = (int)EndPointX;
ps[1].Y = (int)EndPointY;
}
gr.DrawLines(new Pen(Brushes.Green), ps);
}
}
9.4.4 主控逻辑
有了以上的基础，我们就可以来动态创建一个表示流程图的图片了，具体请看下面的代码：
public void CreatePicture(string pictureName, string xml)
{
//创建容器
ContainerPicture con = new ContainerPicture();
//分析xml字符串
con.ParseWorkFlowXML(xml);
Bitmap pg = new Bitmap((int)con.Width, (int)con.Height);
Graphics gr = Graphics.FromImage(pg);
gr.CompositingQuality = CompositingQuality.HighQuality;
gr.PixelOffsetMode = PixelOffsetMode.HighQuality;
gr.SmoothingMode = SmoothingMode.HighQuality;
//遍历规则集合，生成规则图片
for (int i = 0; i < con.RulePictureCollection.Count; i++)
{
con.RulePictureCollection[i].DrawingPic(gr);
}
//遍历活动集合，生成活动图片
for (int i = 0; i < con.ActivityPictureCollection.Count; i++)
{
con.ActivityPictureCollection[i].DrawingPic(gr);
}
pg.Save(Server.MapPath("~/picture/" + pictureName + ".png"), System.Drawing.Imaging.ImageFormat.Png);
pg.Dispose();
gr.Dispose();
}
上面的代码完成了动态创建图片的功能，不过这样的图片还不是很完美，因为还有许多细节需要完善，不过程序不打算继续完成画图的功能了，等到silverlight3.0正式版出来以后，把这个功能放在客户端实现，并且看看能不能使用类似截屏的功能，而不是动态一个创建一系列的活动图片和规则图片。
