V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
darasion
V2EX  ›  问与答

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

  •  
  •   darasion · 2011-06-15 09:15:10 +08:00 · 10466 次点击
    这是一个创建于 4894 天前的主题,其中的信息可能已经有所发展或是发生改变。
    比如在网页上画一张流程图,需要将多个方框连接起来。
    最简单的实现办法是?


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

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

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

    是在不行只能用svg+vml了。
    zythum
        12
    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
        13
    chone  
       2011-06-15 16:57:09 +08:00
    cavans+vml 最是最佳解决方案,其他的都太繁琐。
    excanvas是个不错的实现。
    http://code.google.com/p/explorercanvas/wiki/Instructions
    apoclast
        14
    apoclast  
       2011-06-15 16:58:45 +08:00
    excanvas还在维护吗?
    chone
        15
    chone  
       2011-06-15 17:01:41 +08:00
    darasion
        16
    darasion  
    OP
       2011-06-15 17:13:04 +08:00
    @zythum 挺好,这个加入考虑中。但是好像在FF下显示不太一样。
    sunli0906
        17
    sunli0906  
       2011-06-15 17:22:36 +08:00
    用Raphael画,http://raphaeljs.com/
    cmonday
        18
    cmonday  
       2011-06-15 18:56:23 +08:00
    实在不行就用flash吧,我是认真的……
    darasion
        19
    darasion  
    OP
       2011-06-15 18:57:27 +08:00
    @cmonday flash不会做。以前学过,但早就忘了,还是老版本的。而且现在的as跟以前的写法都大不一样了。
    cmonday
        20
    cmonday  
       2011-06-15 19:15:12 +08:00
    @darasion 现在的flash还是可以用老版本的as写的,建文件的时候选择as2.0就行了。
    你如果需要动态生成这些线段的话,就更推荐flash了,用html元素模拟非常难以控制在不同浏览器下的表现。
    cmonday
        21
    cmonday  
       2011-06-15 19:27:18 +08:00
    @darasion 或者试试@sunli0906 提到的raphael吧,挺牛的~
    darasion
        22
    darasion  
    OP
       2011-06-15 20:05:15 +08:00
    记得以前 twitter 上有个玩聚 rtmeme,那个就有这种连线的效果,但是被和谐了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1344 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 23:39 · PVG 07:39 · LAX 15:39 · JFK 18:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.