怎么让js实现流程图的效果

zouf123 2014-06-06 11:26:24

这是要实现的效果图，下面有具体要求，求大神指条明路，或者有类似控件也行

...全文

491 2 打赏收藏转发到动态举报

写回复

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

zouf123 2014-06-06

打赏
举报

回复

跪求大神指导啊

Mr-稻帅 2014-06-06

打赏
举报

回复

有的。。。 http://blog.csdn.net/enson16855/article/details/8698533 activiti-explorer里面有一个专门的模块是js展现流程图的，你可以参照一下源码。

功能：通过使用jsPlumb库，实现了一个简单的流程图编辑器。用户可以通过拖拽节点和连接线来创建和编辑流程图。同时，该示例还使用了JsRender模板引擎、jquery、jquery-ui和bootstrap图标等插件。能做到什么： 1. 流程图编辑：用户可以在网页上拖拽节点和连接线来创建和编辑流程图，实现对工作流程的可视化表示。 2. 模板引擎：使用JsRender模板引擎，可以方便地将数据渲染到页面上，实现动态内容的展示。 3. 交互性：通过jquery和jquery-ui库，可以实现与用户的交互操作，如缩放、拖拽等。 4. 样式支持：使用bootstrap图标库，可以提供丰富的样式和图标选择，使界面更加美观和易用。 5. 跨平台兼容性：由于该示例是基于JavaScript编写的，因此可以在不同的操作系统和设备上使用，具有良好的跨平台兼容性。 6. 灵活性高：用户可以根据自己的需求自定义流程图的内容和样式，具有很高的灵活性。

在VUE中使用go.js实现流程图效果，具有保存，下载，打印，属性面板等功能

相对于Flash,Flex，Silverlight等富客户端技术，WebGL之ThreeJS：通过OpenGL ES 2.0，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。这是未来的网游趋势，如果你想做可视化动画三维企业应用，又不想用复杂的C++程序，那么 Three.js 将会是你最好的选择。本课程主要的功效就是让你学习完本教程后，能够写出在浏览器上流畅运行的3D程序，包括但不限于：大数据可视化，360度全景展示，3D游戏，完成这些事情，会比c++用更少的代码。而且更容易，更酷。在本课程中，我们将由浅入深的讲解这些效果的实现，这能让你迅速提高开发技能，在职场中处于不败之地。课程共十三章，大大小小贯穿了近10个案例，只要你具备基础的HTML和JavaScript基础即可学习。

元素和JavaScript的绘图API，我们可以轻松地创建具有交互性和可视化效果的流程图。JavaScript是一种流行的脚本语言，具有广泛的应用领域，包括在网页中创建交互式图形。在本文中，我们将探讨如何使用JavaScript语言来画出流程图。绘制流程图的关键是使用JavaScript的绘图库或画布。HTML5提供了一个强大的画布元素，可以使用JavaScript操作它来绘制图形。通过设置合适的字体、位置和内容，我们可以在流程图中标记各个步骤的名称。在上面的代码中，我们使用了HTML5的。

真正重要的是，我们的 javascript 流程图可以集成到使用任何客户端和服务器端技术构建的任何 Web 应用程序中。通过将编辑器嵌入您的应用程序，您将使最终用户能够以无代码的方式使用 30 多种内置形状构建流程图和其他类型的图表。在这里，您有机会指定形状和线条的默认类型、形状之间的边距、带有形状图标的工具栏、工具提示等等。“流程”形状被绘制在流程图的中间，作为流程的某些步骤，例如，作为用户在网站上要采取的行动。如果您对现有的形状感到满意，但它们的内容需要改进，您可以应用更新方法将新数据放入您的形状中。

87,921

社区成员

224,619

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章