canvas教程

Silverlight WorkFlow画图--Canvas画布的处理

字号+ 作者:H5之家 来源:H5之家 2015-10-26 11:18 我要评论( )

前面简单的介绍了 Activity控件以及ArrowLine控件 Activity和ArrowLine这两个控件,最终得要一个地方展现出来,而这个地方就在--Canvas画布上 在Canvas画布上可

前面简单的介绍了 Activity控件以及ArrowLine控件

Activity和ArrowLine这两个控件,最终得要一个地方展现出来,而这个地方就在--Canvas画布上

在Canvas画布上可以添加好多Activity和ArrowLine控件

但是怎么把这些Activity和ArrowLine控件关联起来呢

今天就简单的写一下,个人水平有限

如的什么可以改进的地方,还望各位告诉一下

还是拿图说话吧


Canvas画布的Activity控件在右边的控件里增加进来的

而ArrowLine带箭头的线是左键按下时画出来的分三部

第一:目前ArrowLine画线是左键按下的时候,把当前的鼠标的坐标(foot)记录下来 ,在new ArrowLine的时候,把坐标(foot)传给ArrowLine里去;这样线的尾部的坐标就算确定了,

第二:然后拖动鼠标的时候,记录当前移动鼠标的坐标(cap),同时修改 ArrowLine箭头的坐标(cap);

第三:鼠标松开的时候,一条带箭头的线就划完了;

画完的线不想用了内能删除,不能移动(以后改进一下...)

也与一Activity控件之间没有任何关系。


现在开始说一下Canvas有哪些的三个事件MouseLeftButtonDown、MouseMove、MouseLeftButtonUp。

第一个是MouseLeftButtonDown:

左键的时候,流程如下:

代码如下:

e.Handled = true; isMove = true; Point p = e.GetPosition(print); if (_newLine != null && p == _newLine.StartPoint) { return; } FrameworkElement element = sender as FrameworkElement; element.CaptureMouse(); double top = p.Y; double left = p.X; _newLine = new ArrowLine(p, p); _newLine.Name = string.Format("ArrowLine_{0}", ++Index); _newLine.LineGuid = Wrapper.GuidValue; CreateArrowLine(_newLine);

第二个MouseMove:

鼠标在Canvas上移动的时流程图大致如下:

代码如下:

if (isMove) { Point p = e.GetPosition(print); if (p == _newLine.StartPoint) { RemoveArrowLine(_newLine); } else { _newLine.EndPoint = p; } }

第三个MouseLeftButtonUp:

鼠标弹起来的时流程图大致如下:

代码如下:

isMove = false; Is_Activity = false; //e.Handled = false; FrameworkElement element = sender as FrameworkElement; element.ReleaseMouseCapture(); if (_newLine == null) { return; } Point p = e.GetPosition(print); if (p == _newLine.StartPoint) { RemoveArrowLine(_newLine); } else { //-->如果当前的箭头,所连接的控件,与移动进去的控件不是同一控件的话。 foreach (var v in DictControls) { IActivity iact = v.Value as IActivity; if (null == iact) { continue; } //-->获取当前控件的 double top = Canvas.GetTop(v.Value); double left = Canvas.GetLeft(v.Value); //-->判断当前的箭头进入Activity控件区域 if ((p.X >= left && p.X <= (left + v.Value.Width)) && (p.Y >= top && p.Y <= (top + v.Value.Height))) { //-->判断当前的箭头是否可以连接到Activity控件上去。 if (!iact.IsConnection()) { MessageBox.Show("不能连接"); RemoveArrowLine(_newLine); continue; } //-->当前线的尾部控件与当前进入的控件相同,不进行操作 if (null != _newLine.ArrowFootControl && _newLine.ArrowFootControl.Equals(v.Value)) { continue; } IActivity arrowFoot = _newLine.ArrowFootControl as IActivity; if (arrowFoot != null && arrowFoot.CheckedArrowIsExists(iact)) { MessageBox.Show("已经存在相同的线了"); RemoveArrowLine(_newLine); continue; } string _point = string.Format("X_{0}_Y_{1}", _newLine.StartPoint.X, _newLine.StartPoint.Y); if (!iact.DictArrowFootPoint.ContainsKey(_newLine)) { iact.DictArrowCapPoint.Add(_newLine, _newLine); _newLine.ArrowCapControl = v.Value; } break; } } } _newLine = null; Canvas当的三个事件处理基本说完了

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 canvas 作画板画图 可以做电子白板

    HTML5 canvas 作画板画图 可以做电子白板

    2017-04-27 12:02

  • Android画图学习免费下载

    Android画图学习免费下载

    2017-04-27 11:01

  • CAD迷你画图 V2017R4 官方版下载

    CAD迷你画图 V2017R4 官方版下载

    2017-04-27 10:03

  • html5canvas画图例子

    html5canvas画图例子

    2017-04-24 15:02

网友点评
e