基于草图绘制

本节内容可以参考文件"\CaseStudy\流程图\纯代码流程图\纯代码绘制之一.Table"

流程图的绘制并没有什么技巧可言，但是很繁琐，因为涉及到众多形状的定位。

我们先介绍一种最笨拙的绘制方式，然后逐步改进，直到使用可视化绘制。

通常我们要先绘制一个流程图的草图，在草图上标记出各要点的坐标。

下面就是一个草图，假定形状的默认宽度为X，默认高度为Y，以第一个形状"开始"的左上角为原点，原点坐标为(0,0），然后标出各关键点的坐标：

假定原点(0,0)对应实际坐标为(xStart,yStart)，默认宽度x的值为xStep， 默认高度y的值为yStep，那么以形状"中间流程一"为例，绘制代码为：

p1 = New Point(xStart + 3.4 * xStep, yStart)
p2 = New Point(xStart + 4.4 * xStep, yStart + yStep)
plg = map.CreateRectangle(map.ToGeoPoint(p1), map.ToGeoPoint(p2))
layer.Items.Add(plg)

示例

下面是绘制这个流程图的完整代码，可以看到代码不难，就是简单的重复而已，但这种重复对程序员非常的不友好，很容易让没耐心的程序员崩溃，后面我们会逐步介绍更好的办法：
　

'初始化地图控件，不是必须的，只是使得地图控件更适合作为流程图控件使用:
Dim map As GeoMap = e.Form.Controls("Map1").GeoMap
map.UseGallPetersProjection = True '采用Gall Peters投影方式
map.Viewport.Limits.MaxLat = 60 '排除高纬度地区，因为高纬度地区变形大
map.Viewport.Limits.MinLat = -60
map.Zoom = 12 '缩放指数设置为12，留足够的区间用于放大和缩小
map.CenterTo( - 160, 50) '中心点设置在有效区域的左上，因为通常都是往右下绘制，同时也留有一定的余地往左上绘制
'增加矢量层:
Dim layer As New VectorLayer()
map.Layers.Add(layer)
layer.Style.Stroke.Width = 2
layer.Style.Font = New Font("微软雅黑", 12)
'用代码绘制流程图，注意以下定位均采用像素，在绘制时候要转为经纬度，
Dim xStart As Integer = 50 '本流程图整体是从左到右，所以起点在左中位置
Dim yStart As Integer = 200
Dim xStep As Integer = 96 '默认形状宽度，也是箭头的默认长度
Dim yStep As Integer = 64 '默认形状高度，宽高比大概是3:2, 96*2/3 = 64
'绘制第一个四边形
Dim p1 As New Point(xStart, yStart) '四边形左上角位置
Dim p2 As New Point(xStart + xStep, yStart + yStep) '四边形右下角位置
Dim plg As VectorPolygon = map.CreateRectangle(map.ToGeoPoint(p1), map.ToGeoPoint(p2)) '绘制四边形，记得坐标转为经纬度
plg.Style.BackColor = Color.RoyalBlue
plg.Style.Stroke.Color = Color.RoyalBlue
layer.Items.Add(plg)
'绘制四边形的文字
Dim txt As New VectorPlacemark()
Dim p3 As New Point(xStart + 0.5 * xStep, yStart + 0.5 * yStep) '文本位置
txt.Geometry = map.ToGeoPoint(p3) '转为经纬度位置
txt.Marker.Shape = MarkerShape.Custom
txt.Style.ForeColor = Color.White
txt.Marker.CustomShape = map.CreateTextShape("开始")
layer.Items.Add(txt)
'绘制第一个箭头，长度为默认长度的0.7倍
p1 = New Point(xStart + xStep, yStart + 0.5 * yStep) '箭头起点
p2 = New Point(xStart + 1.7 * xStep, yStart + 0.5 * yStep) '箭头终点，长度为默认长度的0.7倍
Dim line As VectorPolyline = map.CreateLineWithArrow(map.ToGeoPoint(p1), map.ToGeoPoint(p2))
layer.Items.Add(line)
'绘制第一个菱形
p1 = New Point(xStart + 1.7 * xStep, yStart + 0.5 * yStep) '菱形左顶点
p2 = New Point(xStart + 2.2 * xStep, yStart) '菱形上顶点
plg = map.CreateDiamond(map.ToGeoPoint(p1), map.ToGeoPoint(p2))
layer.Items.Add(plg)
'绘制菱形文字
p3 = New Point(xStart + 2.2 * xStep, yStart + 0.5 * yStep)
txt = New VectorPlacemark()
txt.Geometry = map.ToGeoPoint(p3)
txt.Marker.Shape = MarkerShape.Custom
txt.Marker.CustomShape = map.CreateTextShape("判断")
layer.Items.Add(txt)
'添加判断结果"是"
p3 = New Point(xStart + 3 * xStep, yStart + 0.5 * yStep - 15) '文本在箭头上方15个像素位置
txt = New VectorPlacemark()
txt.Geometry = map.ToGeoPoint(p3)
txt.Marker.Shape = MarkerShape.Custom
txt.Marker.CustomShape = map.CreateTextShape("是")
layer.Items.Add(txt)
'添加判断结果"否"
p3 = New Point(xStart + 2.2 * xStep + 15, yStart + 1.7 * yStep) '文本在箭头右侧15个像素位置
txt = New VectorPlacemark()
txt.Geometry = map.ToGeoPoint(p3)
txt.Marker.Shape = MarkerShape.Custom
txt.Marker.CustomShape = map.CreateTextShape("否")
layer.Items.Add(txt)
'绘制箭头，长度为默认长度的0.7倍
p1 = New Point(xStart + 2.7 * xStep, yStart + 0.5 * yStep)
p2 = New Point(xStart + 3.4 * xStep, yStart + 0.5 * yStep)
line = map.CreateLineWithArrow(map.ToGeoPoint(p1), map.ToGeoPoint(p2))
layer.Items.Add(line)
'绘制四边形
p1 = New Point(xStart + 3.4 * xStep, yStart)
p2 = New Point(xStart + 4.4 * xStep, yStart + yStep)
plg = map.CreateRectangle(map.ToGeoPoint(p1), map.ToGeoPoint(p2))
layer.Items.Add(plg)
'绘制四边形文字
p3 = New Point(xStart + 3.9 * xStep, yStart + 0.5 * yStep)
txt = New VectorPlacemark()
txt.Geometry = map.ToGeoPoint(p3)
txt.Marker.Shape = MarkerShape.Custom
txt.Marker.CustomShape = map.CreateTextShape("中间流程一")
layer.Items.Add(txt)
'绘制箭头
p1 = New Point(xStart + 4.4 * xStep, yStart + 0.5 * yStep)
p2 = New Point(xStart + 5.4 * xStep, yStart + 0.5 * yStep)
line = map.CreateLineWithArrow(map.ToGeoPoint(p1), map.ToGeoPoint(p2))
layer.Items.Add(line)
'绘制四边形
p1 = New Point(xStart + 5.4 * xStep, yStart)
p2 = New Point(xStart + 6.4 * xStep, yStart + yStep)
plg = map.CreateRectangle(map.ToGeoPoint(p1), map.ToGeoPoint(p2))
layer.Items.Add(plg)
'绘制四边形文字
p3 = New Point(xStart + 5.9 * xStep, yStart + 0.5 * yStep)
txt = New VectorPlacemark()
txt.Geometry = map.ToGeoPoint(p3)
txt.Marker.Shape = MarkerShape.Custom
txt.Marker.CustomShape = map.CreateTextShape("中间流程二")
layer.Items.Add(txt)
'绘制箭头
p1 = New Point(xStart + 6.4 * xStep, yStart + 0.5 * yStep)
p2 = New Point(xStart + 7.4 * xStep, yStart + 0.5 * yStep)
line = map.CreateLineWithArrow(map.ToGeoPoint(p1), map.ToGeoPoint(p2))
layer.Items.Add(line)
'绘制四边形
p1 = New Point(xStart + 7.4 * xStep, yStart)
p2 = New Point(xStart + 8.4 * xStep, yStart + yStep)
plg = map.CreateRectangle(map.ToGeoPoint(p1), map.ToGeoPoint(p2))
plg.Style.BackColor = Color.DarkOrchid
plg.Style.Stroke.Color = Color.DarkOrchid
layer.Items.Add(plg)
'绘制四边形文字
p3 = New Point(xStart + 7.9 * xStep, yStart + 0.5 * yStep)
txt = New VectorPlacemark()
txt.Geometry = map.ToGeoPoint(p3)
txt.Marker.Shape = MarkerShape.Custom
txt.Marker.CustomShape = map.CreateTextShape("结束")
txt.Style.ForeColor = Color.White
layer.Items.Add(txt)
'绘制箭头
p1 = New Point(xStart + 3.9 * xStep, yStart)
p2 = New Point(xStart + 3.9 * xStep, yStart - 1.5 * yStep)
line = map.CreateLineWithArrow(map.ToGeoPoint(p1), map.ToGeoPoint(p2))
layer.Items.Add(line)
'绘制四边形
p1 = New Point(xStart + 3.4 * xStep, yStart - 2.5 * yStep)
p2 = New Point(xStart + 4.4 * xStep, yStart - 1.5 * yStep)
plg = map.CreateRectangle(map.ToGeoPoint(p1), map.ToGeoPoint(p2))
layer.Items.Add(plg)
'绘制文字
p3 = New Point(xStart + 3.9 * xStep, yStart - 2.0 * yStep)
txt = New VectorPlacemark()
txt.Geometry = map.ToGeoPoint(p3)
txt.Marker.Shape = MarkerShape.Custom
txt.Marker.CustomShape = map.CreateTextShape("支线流程一")
layer.Items.Add(txt)
'绘制折线箭头
p1 = New Point(xstart + 4.4 * xStep, yStart - 2.0 * yStep)
p2 = New Point(xstart + 7.9 * xStep, yStart - 2.0 * yStep)
p3 = New Point(xstart + 7.9 * xStep, yStart)
line = map.CreateLineWithArrow({map.ToGeoPoint(p1), map.ToGeoPoint(p2), map.ToGeoPoint(p3)}) '超过2个点要用大括号括起来
layer.Items.Add(line)
'绘制箭头
p1 = New Point(xstart + 2.2 * xStep, yStart + yStep)
p2 = New Point(xstart + 2.2 * xStep, yStart + 2.5 * yStep)
p3 = New Point(xstart + 3.4 * xStep, yStart + 2.5 * yStep)
line = map.CreateLineWithArrow({map.ToGeoPoint(p1), map.ToGeoPoint(p2), map.ToGeoPoint(p3)}) '超过2个点要用大括号括起来
layer.Items.Add(line)
'绘制四边形
p1 = New Point(xStart + 3.4 * xStep, yStart + 2 * yStep)
p2 = New Point(xStart + 4.4 * xStep, yStart + 3 * yStep)
plg = map.CreateRectangle(map.ToGeoPoint(p1), map.ToGeoPoint(p2))
layer.Items.Add(plg)
'绘制文字
p3 = New Point(xStart + 3.9 * xStep , yStart + 2.5 * yStep)
txt = New VectorPlacemark()
txt.Geometry = map.ToGeoPoint(p3)
txt.Marker.Shape = MarkerShape.Custom
txt.Marker.CustomShape = map.CreateTextShape("支线流程二")
layer.Items.Add(txt)
'绘制箭头
p1 = New Point(xStart + 4.4 * xStep, yStart + 2.5 * yStep)
p2 = New Point(xStart + 5 * xStep, yStart + 2.5 * yStep)
line = map.CreateLineWithArrow(map.ToGeoPoint(p1), map.ToGeoPoint(p2))
layer.Items.Add(line)
'绘制菱形
p1 = New Point(xStart + 5 * xStep, yStart + 2.5 * yStep) '菱形的左顶点
p2 = New Point(xStart + 5.5 * xStep, yStart + 2 * yStep) '菱形的上顶点
plg = map.CreateDiamond(map.ToGeoPoint(p1), map.ToGeoPoint(p2))
layer.Items.Add(plg)
'绘制菱形文字
p3 = New Point(xStart + 5.5 * xStep , yStart + 2.5 * yStep)
txt = New VectorPlacemark()
txt.Geometry = map.ToGeoPoint(p3)
txt.Marker.Shape = MarkerShape.Custom
txt.Marker.CustomShape = map.CreateTextShape("判断")
layer.Items.Add(txt)
'添加判断结果"是"
p3 = New Point(xStart + 6.3 * xStep , yStart + 2.5 * yStep - 15) '文本在箭头上方15个像素位置
txt = New VectorPlacemark()
txt.Geometry = map.ToGeoPoint(p3)
txt.Marker.Shape = MarkerShape.Custom
txt.Marker.CustomShape = map.CreateTextShape("是")
layer.Items.Add(txt)
'添加判断结果"否"
p3 = New Point(xStart + 5.5 * xStep + 15 , yStart + 3.7 * yStep) '文本在箭头右侧15个像素位置
txt = New VectorPlacemark()
txt.Geometry = map.ToGeoPoint(p3)
txt.Marker.Shape = MarkerShape.Custom
txt.Marker.CustomShape = map.CreateTextShape("否")
layer.Items.Add(txt)
'绘制箭头
p1 = New Point(xStart + 6 * xStep, yStart + 2.5 * yStep)
p2 = New Point(xStart + 6.6 * xStep, yStart + 2.5 * yStep)
line = map.CreateLineWithArrow(map.ToGeoPoint(p1), map.ToGeoPoint(p2))
layer.Items.Add(line)
'绘制四边形
p1 = New Point(xStart + 6.6 * xStep, yStart + 2 * yStep)
p2 = New Point(xStart + 7.6 * xStep, yStart + 3 * yStep)
plg = map.CreateRectangle(map.ToGeoPoint(p1), map.ToGeoPoint(p2))
layer.Items.Add(plg)
'绘制文字
p3 = New Point(xStart + 7.1 * xStep, yStart + 2.5 * yStep)
txt = New VectorPlacemark()
txt.Geometry = map.ToGeoPoint(p3)
txt.Marker.Shape = MarkerShape.Custom
txt.Marker.CustomShape = map.CreateTextShape("支线流程三")
layer.Items.Add(txt)
'绘制箭头
p1 = New Point(xstart + 7.6 * xStep, yStart + 2.5 * yStep)
p2 = New Point(xstart + 7.9 * xStep, yStart + 2.5 * yStep)
p3 = New Point(xstart + 7.9 * xStep, yStart + yStep)
line = map.CreateLineWithArrow({map.ToGeoPoint(p1), map.ToGeoPoint(p2), map.ToGeoPoint(p3)}) '超过2个点要用大括号括起来
layer.Items.Add(line)
'绘制箭头
p1 = New Point(xstart + 5.5 * xStep, yStart + 3 * yStep)
p2 = New Point(xstart + 5.5 * xStep, yStart + 4.5 * yStep)
p3 = New Point(xstart + 6.6 * xStep, yStart + 4.5 * yStep)
line = map.CreateLineWithArrow({map.ToGeoPoint(p1), map.ToGeoPoint(p2), map.ToGeoPoint(p3)}) '超过2个点要用大括号括起来
layer.Items.Add(line)
'绘制四边形
p1 = New Point(xStart + 6.6 * xStep, yStart + 4 * yStep)
p2 = New Point(xStart + 7.6 * xStep, yStart + 5 * yStep)
plg = map.CreateRectangle(map.ToGeoPoint(p1), map.ToGeoPoint(p2))
layer.Items.Add(plg)
'绘制文字
p3 = New Point(xStart + 7.1 * xStep, yStart + 4.5 * yStep)
txt = New VectorPlacemark()
txt.Geometry = map.ToGeoPoint(p3)
txt.Marker.Shape = MarkerShape.Custom
txt.Marker.CustomShape = map.CreateTextShape("异常流程")
layer.Items.Add(txt)