js是如何实现拖拽设计jsraphael.js所绘制图像的

来源：蜘蛛抓取(WebSpider) 时间：2018-05-26 20:57 标签： 拖拽设计js

Rapha?l是一个在网页上绘图的js类库非常小压缩版只有89k左右

官方宣称兼容各种主流浏览器，据笔者测试在IE6下尚有一些问题（不过这些与本文无关）

他是使用js来创建vml或svg来绘图的

項目中不能使用Silverlight或者flash来解决绘图和拖动的问题

而且为了项目效果较好要求拖动的时候箭头能动态改变起点和重点，别且箭头要改变方向

這两个东西是不相干的引用先后顺序也无所谓

//用来存储节点的顺序 //拖动节点开始时的事件 //为节点添加样式和事件，并且绘制节点之间的箭头

这些代码注释比较详细就不多说了

在这些代码中涉及到操作的界面元素HTML代码如下

其中关键元素的样式如下

在拖动事件中，动态改变叻节点文本元素的位置

drawArr是一个自定义方法负责修改箭头的方向，代码如下 

 //随着节点位置的改变动态改变箭头

首先需要确定箭头的起始位置

point包含两个点，

然后需要确定箭头的绘图路径

一个箭头包含三个线段四个点

1:起点，2:终点3:箭头终点1，4:箭头终点2

在此函数中判断如果箭头已经被绘制过，

如果没有被绘制过则需要重新绘制

下面来看一下动态确定起点和终点的代码

确定箭头路径的代码如下 

 //获取组成箭头嘚三条线段的路径

此函数把箭头路径作为数组反馈给调用函数

M表示画笔起点移动到此点

L表示从某点绘制到某点，绘制直线

以上函数反馈结果的意思是：

在确定这几个点的过程中

用到了一些数学知识具体原理也不多说了

喜欢的朋友请点支持！谢谢大家！

  • 大家喜欢用powerDesigner进行数据库建模.通常嘟是先设计出物理模型图,再转换出数据库需要的SQL语句,从而生成数据库.但“powerDesigner逆向工程”就能将数据库逆向转为物理模型图. ...

我要回帖

更多关于 拖拽设计js 的文章

 

随机推荐