You didn't mention the platform you're developing for, but if it's to be placed on an interactive website, you'd probably save time by doing it in Flash. Check out how to make draggable objects first (Google helps you here), then it's easy to connect them with lines or curves any way you like.
From what I can see, Yahoo! is eating their own dogfood by building Pipes in YUI with the addition of the ultra-cool CANVAS tag and IE script file (which I didn't know existed until I did a little digging today) that drive the Visio-like wiring. If you haven't used YUI before you're going to need to do a good deal of learning before you can build something as robust as Pipes, but maybe someone has released examples on the YUI boards that will get you close to where you need to be.
All my information was found at the following sites:
WireIt is an open-source javascript library to create web wirable interfaces like Yahoo! Pipes for dataflow applications, visual programming languages or graphical modeling. Wireit uses the YUI library (2.6.0) for DOM and events manipulation, and excanvas for IE support of the canvas tag. It currently supports Firefox 1.5+, Safari 2.0+, IE 7.0, Opera 9+ and Chrome 0.2.x.
发布评论
评论（5）
以下是我在 YUI 板上找到的内容：
http://tech.groups。 yahoo.com/group/ydn-javascript/message/30836
目前似乎没有任何开放的“接线小部件”库，但 YUI 似乎确实是一个好的开始。
Here's what I found on YUI's boards:
http://tech.groups.yahoo.com/group/ydn-javascript/message/30836
Doesn't seem like there's currently any open "wiring widget" libraries, but YUI does seem like a good start.
您没有提到您正在开发的平台，但如果要将其放置在交互式网站上，您可能会通过使用 Flash 来节省时间。 首先查看如何制作可拖动对象（Google 在这里为您提供帮助），然后可以轻松地将它们与任何您喜欢的直线或曲线连接起来。
You didn't mention the platform you're developing for, but if it's to be placed on an interactive website, you'd probably save time by doing it in Flash. Check out how to make draggable objects first (Google helps you here), then it's easy to connect them with lines or curves any way you like.
据我所知，雅虎！ 是通过在 YUI 中构建 Pipes 并添加超酷功能来吃自己的狗粮 CANVAS 标签和 IE 脚本文件（直到今天我做了一些挖掘，我才知道它的存在），它驱动类似 Visio 的接线。 如果您以前没有使用过 YUI，那么您需要进行大量学习才能构建像 Pipes 这样强大的东西，但也许有人已经在 YUI 板上发布了示例，这将使您接近您需要的地方成为。
我的所有信息都是在以下网站找到的：
From what I can see, Yahoo! is eating their own dogfood by building Pipes in YUI with the addition of the ultra-cool CANVAS tag and IE script file (which I didn't know existed until I did a little digging today) that drive the Visio-like wiring. If you haven't used YUI before you're going to need to do a good deal of learning before you can build something as robust as Pipes, but maybe someone has released examples on the YUI boards that will get you close to where you need to be.
All my information was found at the following sites:
尝试 JSplumb。
主要结构是 HTML/CSS，连接可以是 SVG/Canvas/VML*
很棒的文档 非常干净的 API 和 现场演示
*可配置或通过检测浏览器的功能自动设置
Try JSplumb.
The main structure is HTML/CSS, the connections can be SVG/Canvas/VML*
Great documentation very clean API and live demos
*Configurable or is automatically set by detecting browser's capabilities
WireIt 是一个开源 JavaScript 库，用于创建像 Yahoo! 一样的 Web 可无线接口。 用于数据流应用程序、可视化编程语言或图形建模的管道。 Wireit 使用 YUI 库 (2.6.0) 进行 DOM 和事件操作，并使用 excanvas 来支持 canvas 标签的 IE。 目前支持 Firefox 1.5+、Safari 2.0+、IE 7.0、Opera 9+ 和 Chrome 0.2.x。
WireIt is an open-source javascript library to create web wirable interfaces like Yahoo! Pipes for dataflow applications, visual programming languages or graphical modeling. Wireit uses the YUI library (2.6.0) for DOM and events manipulation, and excanvas for IE support of the canvas tag. It currently supports Firefox 1.5+, Safari 2.0+, IE 7.0, Opera 9+ and Chrome 0.2.x.