如何不用html5 canvas ，实现两个方框的连线效果？

2011-06-15 09:15:10 +08:00
 darasion
比如在网页上画一张流程图，需要将多个方框连接起来。
最简单的实现办法是？


简单是指，少用图片，一点css，简单的html结构。
10475 次点击
所在节点    问与答
22 条回复
zythum
2011-06-15 09:29:11 +08:00
用div实现啊。height:2px 这样不就是线了。
darasion
2011-06-15 09:35:37 +08:00
@zythum 那斜着的线段怎么画？
chuangbo
2011-06-15 09:37:49 +08:00
http://oldj.net/static/drjs/doraemon.html
sparanoid
2011-06-15 09:39:31 +08:00
transform: rotate
zythum
2011-06-15 09:43:00 +08:00
@darasion transform: rotate +1
如果想在ie也支持的话，那只能用边框画了，还要用两个div，一个去遮另一个。就麻烦了。如果你需要的话我再说。比较麻烦。
darasion
2011-06-15 10:41:32 +08:00
多啦A梦那个好复杂啊。。。一个应用系统不可能让这样乱搞的。
Aben
2011-06-15 11:28:55 +08:00
用border,4条小用不同颜色和宽度可以组合出很多图形。
est
2011-06-15 12:09:34 +08:00
@darasion 斜线可以用div的border画。
darasion
2011-06-15 12:39:51 +08:00
@est @Aben @zythum

div border 这种，能举例说明一下该怎样做吗？
zythum
2011-06-15 12:58:23 +08:00
@darasion 朱一去考试了。等朱一回来。要不@est 同学给说下。拜
est
2011-06-15 13:55:11 +08:00
想了一下，div只可以用来画三角形，斜线可能还有点困难

http://www.uselesspickles.com/triangles/

是在不行只能用svg+vml了。
zythum
2011-06-15 15:24:53 +08:00
@darasion 试试下面的代码看看

<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
background{
background:#fff;
}
div{
position:absolute;
top:10px;
left:10px;
height:0;
top:0;
}
#cover{
border:100px solid;
border-color:#fff transparent transparent transparent;
left:12px;
}
#line{
border:100px solid;
border-color:#000 transparent transparent transparent;
}
</style>
</head>
<body>
<div id="line"></div>
<div id="cover"></div>
</body>
</html>
chone
2011-06-15 16:57:09 +08:00
cavans+vml 最是最佳解决方案，其他的都太繁琐。
excanvas是个不错的实现。
http://code.google.com/p/explorercanvas/wiki/Instructions
apoclast
2011-06-15 16:58:45 +08:00
excanvas还在维护吗?
chone
2011-06-15 17:01:41 +08:00
@apoclast 很久没动静了 http://code.google.com/p/explorercanvas/source/list
darasion
2011-06-15 17:13:04 +08:00
@zythum 挺好，这个加入考虑中。但是好像在FF下显示不太一样。
sunli0906
2011-06-15 17:22:36 +08:00
用Raphael画，http://raphaeljs.com/
cmonday
2011-06-15 18:56:23 +08:00
实在不行就用flash吧，我是认真的……
darasion
2011-06-15 18:57:27 +08:00
@cmonday flash不会做。以前学过，但早就忘了，还是老版本的。而且现在的as跟以前的写法都大不一样了。
cmonday
2011-06-15 19:15:12 +08:00
@darasion 现在的flash还是可以用老版本的as写的，建文件的时候选择as2.0就行了。
你如果需要动态生成这些线段的话，就更推荐flash了，用html元素模拟非常难以控制在不同浏览器下的表现。

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/14470

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX