刚才在首页看到这么个帖子
图形间连线算法 ,说来也巧,最近自己也在做这么个玩意儿,就是在web上拖放图标,然后连线,这段时间也算有点收获,实现了这么个玩意儿,发上来给大家看看,顺便征求点意见。附件是效果图和源码示例。
特点:
1、基于Prototype、Script.aculo.us,利用HTML5的标签Canvas实现,因为ie目前不支持这个,所以引入了google的excanvas库适配到VML,但是对于开发人员来说,api都是同一的一套,比较爽;
2、节点可动态生成、可拖放,并显示了拖放行为,比如不会拖出画板,也不会重叠在一起(这样对以后连线开了方便之门);
3、绘制连线的时候,可根据鼠标移动,实时反映线段状态,拖动节点也能试试反映连线状态;
4、节点、连线都可响应鼠标点击选中事件,并可响应键盘delete键删除选中的元素(线段或节点);
5、源码结构实现了OO封装以及经典的MVC模式,大大降低各部分耦合度。
绘图步骤:
1、您可以在右侧拖放一个项目到左侧的画板生成一个新方块(这个以后可以用漂亮的图标代替),在初始化的时候我已经加入了三个;
2、点击画板上方的“单向连线”按钮之后,即可点击起始节点,然后移动鼠标至结束节点再点击一下,即可在这两个节点间绘制有向线段。每次只能画一条线,画完了需要再次点击按钮重复绘制;
3、节点可拖动,但是不会被拖出画板,如果两个节点重叠了,那么不会允许放置在最终位置,而是弹回原始位置;
4、点击节点可选中当前节点,要选择线段的话必须点击中部的箭头处,被选中的元素以红色区分,此时可通过敲击键盘delete键删除此元素,而且,如果删除的是有连线的节点,此节点相关的连线都将被删除。
结语:这只是个原型,还有待完善,最大的问题还是对于OP9,连线中点的箭头显示还有问题,慢慢来吧,先放出来给大家看看,欢迎交流。如果大家有非直线连接图形的好算法,希望能提供出来,非常感谢!
顺便广告一下,昨天在je也发布了一个基于Canvas的仿Google动画导航条实现,可惜关注的人不多,我觉得canvas是个好玩的东西,希望大家能关注下,有兴趣的可以移驾这里看看:
基于Prototype和Canvas实现的仿Google导航条
- 描述: 操作截图,其中一条线正在绘制之中
- 大小: 6.4 KB
分享到:
相关推荐
微信小程序源码 小程序完整demo:飞翔的小鸟:canvas实现,java后端(适用1221)(学习版)微信小程序源码 小程序完整demo:飞翔的小鸟:canvas实现,java后端(适用1221)(学习版)微信小程序源码 小程序完整demo:飞翔的...
插件描述:基于HTML5 Canvas实现的图片马赛克模糊特效.
html5 canvas 制作流程图 EaselJS html5 canvas 制作流程图 EaselJS
微信小程序 小程序完整demo:飞翔的小鸟:canvas实现,java后端(适用1221) (源码)微信小程序 小程序完整demo:飞翔的小鸟:canvas实现,java后端(适用1221) (源码)微信小程序 小程序完整demo:飞翔的小鸟:canvas...
基于Konva的canvas动态绘图,用到了面向对象的思想
HTML5 CANVAS 绘图 JS 只需要简单的一行代码即可渲染整个绘图版 主要用于实现手写签名
微信小程序源码(含截图)小程序完整demo:飞翔的小鸟:canvas实现,java后端(适用1221)微信小程序源码(含截图)小程序完整demo:飞翔的小鸟:canvas实现,java后端(适用1221)微信小程序源码(含截图)小程序完整...
小程序源码 小程序完整demo:飞翔的小鸟:canvas实现,java后端(适用1221) (代码+截图)小程序源码 小程序完整demo:飞翔的小鸟:canvas实现,java后端(适用1221) (代码+截图)小程序源码 小程序完整demo:飞翔的小鸟...
canvas拼图游戏,基于html + canvas画布实现
Vue画布一个Vue.js项目构建设置 # install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production and view ...
运用canvas和js,实现流程图的web绘制
HTML5 canvas绘制流程图,无需flash,支持形状伸缩、编辑文字、拖拽、节点连线功能,类似visio。
微信小程序——小程序完整demo:飞翔的小鸟:canvas实现,java后端(适用1221)(截图+源码).zip 微信小程序——小程序完整demo:飞翔的小鸟:canvas实现,java后端(适用1221)(截图+源码).zip 微信小程序——小程序...
它首次由苹果公司的 Webkit 框架引入实现,并成功运用在 Safari 浏览器中,读者在 这里可以体验到基于 canvas 的精彩示例。目前,canvas 已成为 HTML5 规范中的事实性标准,并且已经被 Firefox 3.0+, Safari 3.0+, ...
html5在线编辑器基于canvas实现
小程序完整demo:飞翔的小鸟:canvas实现,java后端(适用1221).zip微信小程序模板源码
主要介绍了原生js实现Canvas实现拖拽式绘图,支持画笔、线条、箭头、三角形和圆形等等图形绘制功能,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
实现效果: 基于HTML5 canvas实现图片马赛克特效,非常不错的HTML5图片特效代码,支持自定义马赛克模糊 程度,挺不错的H5页面特效,当然还需要JS的支持。
功能包含:绘制线段、矩形、椭圆形、控制粗细、调整颜色、旋转图形、平移图形、缩放图形,满足填充颜色、插入图片、另存为、暗角、降低亮度、灰度、浮雕、马赛克、锯齿等操作。资源包含:演示视频,项目源代码
html5绘图工具 基于 HTML5 的 Canvas 技术,拓扑图是电力和电信的叫法