Javascript画直线

最新推荐文章于 2021-05-31 09:45:26 发布

wallacewan

最新推荐文章于 2021-05-31 09:45:26 发布

阅读量6.2k

点赞数 1

分类专栏： UI前端技术文章标签： javascript xhtml div html 浏览器 jquery

本文链接：https://blog.csdn.net/axzywan/article/details/7527431

版权

UI前端技术专栏收录该内容

14 篇文章 0 订阅

订阅专栏

又接了个烫手山芋，在Web页面实现甘特图的一种表现形式，需要用到画线功能。

本想用开源的Web甘特图项目，却发现在这一领域开源的都太粗糙了，稍微精致一点的都是要收费的。

例如：易度甘特图（虽然有源代码，可是被混淆了www.edogantt.com），Ext Gantt（使用Extjs实现www.longboo.com）和普加甘特图（www.plusgantt.com）。

上述都是使用Javascript实现的，不得不感叹现在JS太强了，加上CSS想做什么效果都可以。

开源的不行，只有自己做了，先攻克画直线这关。下面是源码（在IE8下测试OK）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div.line {  
    position:absolute;  
    z-index:2;  
    width:1px;  
    height:1px;  
    font-size:1px;  
    background-color:#0000FF;  
    overflow:hidden;  
} 
</style>
<script type="text/javascript">
function createPoint(container, x, y) {  
    var node = document.createElement("div");  
    node.className = "line";  
    node.style.marginTop=y;  
    node.style.marginLeft=x;  
    container.appendChild(node);  
}
function line(startX, startY, endX, endY, container) {  
    if (startX == endX) {
        if (startY > endY) {  
            var tempY = startY;  
            startY = endY;  
            endY = tempY;  
        }
        for (var k = startY; k < endY; k++) {
            createPoint(container, startX, k);  
        }
		return;
    }  
    // y = ax + b，这里深刻体现了数学的重要性啊  
    var a = (startY - endY) / (startX - endX);
    var b = startY - ((startY - endY) / (startX - endX)) * startX;
    if (Math.abs(startX - endX) > Math.abs(startY - endY)) { //这是为了多画几个point加的选择
        if (startX > endX) {  
            var tempX = endX;  
            endX = startX;  
            startX = tempX;  
        }
        for (var i = startX; i <= endX; i++) {  
            createPoint(container, i, a * i + b);  
        }  
    } else {
        if (startY > endY) {  
            var tempY = startY;  
            startY = endY;  
            endY = tempY;  
        }
        for (var j = startY; j <= endY; j++) {
            createPoint(container, (j - b) / a, j);  
        }
    }  
}
function testLine() {  
    line(88, 2, 88, 88, document.getElementById("container"));  
}  
</script>
</head>

<body>
    <div id="container" style="width:400px;height:400px;border:1px solid #000000;margin-left:50px"></div>  
    <input type="button" value="line" οnclick="testLine();"></input>  
</body>
</html>

虽然尽可能的多画了几个point，可是锯齿还是很严重，所以基本放弃这种方式了。

继续调研，Web页面上使用JS画图可以使用SVG，VML和HTML 5的<canvas>等方法，但是在现阶段，貌似都不能兼容所有浏览器。

灵机一动，jQuery会不会有类似的插件呢？这样就不用考虑浏览器兼容性了，因为jQuery都会帮我们处理。

结果还真被我找到了jqPlot（www.jqplot.com），这是基于HTML 5的canvas标签的（用Firebug查看生成的Plot可以看到大量的canvas标签），测试了FF，Chrome，IE8都没有问题。

参考Example做例子时发现需要对IE系列做例外处理

如果不加上述声明，IE8下会报JS错误'window.G_vmlCanvasManager'为空或不是对象。

虽然jqPlot很强大，但是跟我的需求还是相差太远。回到原点，研究Edo，Plus等生成的甘特图，发现可以用div生成连接线的样式，而且上述浏览器都兼容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
.linkinfo
{
    z-index:102;
}
.point
{
    position:absolute;background-color:blue;overflow:hidden;
}
.point-critical
{
    background-color:Red;
}
.arrowhead-down
{
    background:url(../images/arrow_blue_down.gif) top left no-repeat;	
    overflow:hidden;
    width:10px;
    height:5px;
    position:absolute;
}
.arrowhead-down-critical
{
    background-image:url(../images/arrow_red_down.gif);//这是一个宽9px，高5px的向下的红色箭头
}
</style>
</head>

<body>
    <div class="linkinfo point point-critical" style="left: 31px; top: 31px; width: 9px; height: 1px;"></div>
    <div class="linkinfo point point-critical" style="left: 40px; top: 31px; height: 23px; width: 1px;"></div>
    <div class="linkinfo arrowhead-down arrowhead-down-critical" style="left: 36px; top: 49px;"></div>
</body>
</html>

万里长征才走第一步，继续前进中。

wallacewan

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Javascript画直线

又接了个烫手山芋，在Web页面实现甘特图的一种表现形式，需要用到画线功能。本想用开源的Web甘特图项目，却发现在这一领域开源的都太粗糙了，稍微精致一点的都是要收费的。例如：易度甘特图（虽然有源代码，可是被混淆了www.edogantt.com），Ext Gantt（使用Extjs实现www.longboo.com）和普加甘特图（www.plusgantt.com）。上述都是使用Java
复制链接

扫一扫

专栏目录