使用silverlight构建一个工作流设计器(十五)(缩放流程图)

当流程过于复杂,流程环节过多时,在一个屏幕中不能完全显示整个流程图,需要拖拽滚动条来显示。这对于了解整个流程的概况有些不便,联想到一些看图软件的缩放功能,如果可以给流程增加缩放,那么就可以很好的解决流程图过于复杂而不便查看的问题了。

十、增加流程图缩放功能

流程缩放要考虑活动和规则的缩放,对于活动和规则,他们的缩放方式稍有不同。

对于活动,缩放会影响两个地方,一个是活动的位置,也就是相对于容器的Top和Left属性。另一个是活动本身的图形的大小。

对于规则,缩放只会影响到规则的位置。如果规则关联到活动,那么规则的位置不进行缩放计算,而是跟随关联的活动进行位置的改变。

首先要给IElement接口增加一个缩放方法,void Zoom(double zoomDeep),这个方法中的参数zoomDeep说明了缩放的比例。下面分别在活动和规则中实现这个方法。

10.1 活动缩放

上面讲到了,活动的缩放影响到两个方面,一个是活动的位置,一个是活动的大小。对于给定的缩放比例大小(zoomDeep),只需要将这个zoomDeep应用到位置和大小即可。但有一点非常重要的是,缩放指的是对原图进行的缩放,因此需要记录一下活动的原始大小,以及原始位置(每位位置发生变动,例如活动被拖拽时,重新记录一下位置信息)。

使用下面的方法对活动进行缩放处理

//图片原始宽

double origPictureWidth = 0;

//图片原始高

double origPictureHeight = 0;

//图片原始位置

Point origPosition;

//位置是否发生改变

boopositionIsChange = true;
public void Zoom(double zoomDeep)
{
if (origPictureWidth == 0)
{
origPictureWidth = sdPicture.PictureWidth;
origPictureHeight = sdPicture.PictureHeight;
}
if (positionIsChange)
{
origPosition = this.Position;
positionIsChange = false;
}
sdPicture.PictureHeight = origPictureHeight * zoomDeep;
sdPicture.PictureWidth = origPictureWidth * zoomDeep;
this.Position = new Point(origPosition.X * zoomDeep, origPosition.Y * zoomDeep);
}

时间: 2024-10-26 22:04:53

使用silverlight构建一个工作流设计器(十五)(缩放流程图)的相关文章

使用silverlight构建一个工作流设计器(十八)-持久化数据到数据库

使用silverlight构建一个工作流设计器(十八)-持久化数据到数据库-服务器段功能实现 17.3 服务器端代码实现 服务器端的功能是将数据保存到数据库,以及从数据库中取出xml描述文件返回给客户端.本文使用LINQ to SqClasses的方法对数据库进行操作.如下图所示,增加一个linq的类 然后在左边的数据库链接管理器中,增加一个数据库链接,如下图所示:

使用silverlight构建一个工作流设计器(十六)-持久化数据到数据库—数据库结构

16.1 数据结构 目前的流程信息没有保存到任何一个可持久化的环境中,根据网友建议,增加存储工作流xml文件的功能.这个功能使用数据库来实现,您也可以有更多的持久化方式. 根据工作流引擎的实现不同,有些引擎只需要xml文件配置就可以了,有些引擎需要建立数据库的模型.在本文中,假设工作流引擎是跟数据库相关的. 整个持久化流程是这样的: 从使用webservices从服务器下载相应的流程xml描述(或者新建一个流程) 在客户端使用流程设计器进行流程设计或者修改,此时任何修改都在本地完成 在用户点击保

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

源代码下载:http://www.shareidea.net/opensource.htm 在线演示:http://www.shareidea.net/workflow.htm 视频教程: http://www.shareidea.net/video/sharedesigner/sharedesigner.html 在上篇文章中,韦恩卑鄙提出了silverlight3.0版本中增加了本地动态生成图片的方法,我又搜索了一下,的确可以了,您可以访问http://developer.51cto.com

使用silverlight构建一个工作流设计器(十二)

源代码下载:http://www.shareidea.net/opensource.htm 在线演示:http://www.shareidea.net/workflow.htm 视频教程: http://www.shareidea.net/video/sharedesigner/sharedesigner.html 本章包含以下内容: l 新的活动图形,图形更加清晰漂亮. l 增加对上下左右键的支持(选中活动或者规则后,使用方向键进行移动,按住Ctrl时,每次移动的距离加大).不过有一个问题,无

使用silverlight构建一个工作流设计器(十)

源代码下载:http://www.shareidea.net/opensource.htm 在线演示:http://www.shareidea.net/workflow.htm 视频教程: http://www.shareidea.net/video/sharedesigner/sharedesigner.htm 六 增强的用户体验功能 6.6 增加动画效果 上一章我们给菜单增加了动画效果,这一章里面我们继续增加动画效果,包括: 新增活动的淡入效果 删除活动的淡出效果 新增规则的淡入效果 删除规

使用silverlight构建一个工作流设计器(十九)-规则与活动的交点的平滑移动

19.1 规则和活动交点的平滑移动 在之前的版本中,规则和活动的关联,如果活动图形是矩形或者菱形,那么系统只定义了4个关联点,分别在上下左右,如下图所示: 这样的关联设定也可以用,但还不是很完美,经过改进,现在实现为两个活动的中间连线与活动的相交点.如果拖动活动或者规则,那么这个交点就会平滑的移动,不会像之前那样在4个点之间跳动了,如下图所示: 这个功能的实现不复杂,主要是分析好各种关系就可以了.下面以矩形图活动为例,具体描述一下相应的思路和代码.如下图所示:

使用silverlight构建一个工作流设计器(十七)-持久化数据到数据库

使用silverlight构建一个工作流设计器(十七)-持久化数据到数据库-设计webservices接口 在开始之间,先说下程序增加的一个小功能,就是给容器增加网格线的功能,使得容器看上去类似下面的样子 当然可以有两种方法来实现,一种就是使用背景图片,但本文一贯的原色就是少用图片,多用silverlight的画图功能来实现,这些网格都可以使用xaml中的Line对象来实现.为此我们需要动态设定一个Canvas,然后把这些动态生成的Line对象添加到Canvas中,最后再把Canvas添加到容器

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

首先庆祝一下源代码在codeplex上下载量超过1000 另外本演示程序放在微软免费的silverlight host上面,您也可以申请免费的空间. 地址在http://silverlight.live.com/ 源代码下载:http://www.shareidea.net/opensource.htm 在线演示:http://www.shareidea.net/workflow.htm 视频教程: http://www.shareidea.net/video/sharedesigner/sha

使用silverlight构建一个工作流设计器(三)

本文配套源码 最新版本在线演示:http://219.153.66.61/wf 新功能调查:系统到这里已经具备一个设计器的雏形了,当然还有很多需要完善的功能,如果您在这方面有经验,请提出您的宝贵意见,也可以留下您想要实现的功能,在后续版本中,我们将考虑您的意见,非常感谢:) 本文继续前文的内容,主要讲述与导入xm,导出xm,xml存储有关的一些内容.包含以下部分: 设计一个流程图的xml描述文件 将流程图导出为xm 根据xml文件呈现流程图 在完成以上内容后,进一步深入思考,既然可以将流程的当前