使用silverlight构建一个工作流设计器(十四)(动态生成流程图片下载_下)

源代码下载：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里面的相关信息关联到规则和活动类中。 

下面是容器类的代码

 

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),这个方法根据活动的属性来绘制活动的图形。下面的活动类的代码：

 

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)，这个方法根据规则的属性绘制规则图形，下面是规则类的具体代码：

 

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正式版出来以后，把这个功能放在客户端实现，并且看看能不能使用类似截屏的功能，而不是动态一个创建一系列的活动图片和规则图片。