Question

在Firefox和Chrome中测试过。在旧的Q / A中在SO上找到的脚本。脚本声称工作，对我不起作用。宁愿使用纯JS来解决这个问题而不是HTML5 canvas来支持旧版浏览器。

<html>
<head>
<script>

window.onload = function() {
    DrawLine(1,1,100,100);
}

function DrawLine(x1, y1, x2, y2){

    if(y1 < y2){
        var pom = y1;
        y1 = y2;
        y2 = pom;
        pom = x1;
        x1 = x2;
        x2 = pom;
    }

    var a = Math.abs(x1-x2);
    var b = Math.abs(y1-y2);
    var c;
    var sx = (x1+x2)/2 ;
    var sy = (y1+y2)/2 ;
    var width = Math.sqrt(a*a + b*b ) ;
    var x = sx - width/2;
    var y = sy;

    a = width / 2;

    c = Math.abs(sx-x);

    b = Math.sqrt(Math.abs(x1-x)*Math.abs(x1-x)+Math.abs(y1-y)*Math.abs(y1-y) );

    var cosb = (b*b - a*a - c*c) / (2*a*c);
    var rad = Math.acos(cosb);
    var deg = (rad*180)/Math.PI

    htmlns = "http://www.w3.org/1999/xhtml";
    div = document.createElementNS(htmlns, "div");
    div.setAttribute('style','border:1px solid black;width:'+width+'px;height:0px;-moz-transform:rotate('+deg+'deg);-webkit-transform:rotate('+deg+'deg);position:absolute;top:'+y+'px;left:'+x+'px;');  
}

</script>
</head>
<body>

</body>
</html>

Answer 1

这很有效。请看这里的小提琴：http://jsfiddle.net/jvs9hLwf/1/

(function DrawLine(elementId, x1, y1, x2, y2) {
    if (y1 < y2) {
        var pom = y1;
        y1 = y2;
        y2 = pom;
        pom = x1;
        x1 = x2;
        x2 = pom;
    }
    var a = Math.abs(x1 - x2);
    var b = Math.abs(y1 - y2);
    var c;
    var sx = (x1 + x2) / 2;
    var sy = (y1 + y2) / 2;
    var width = Math.sqrt(a * a + b * b);
    var x = sx - width / 2;
    var y = sy;
    a = width / 2;
    c = Math.abs(sx - x);
    b = Math.sqrt(Math.abs(x1 - x) * Math.abs(x1 - x) + Math.abs(y1 - y) * Math.abs(y1 - y));
    var cosb = (b * b - a * a - c * c) / (2 * a * c);
    var rad = Math.acos(cosb);
    var deg = (rad * 180) / Math.PI
    div = document.getElementById(elementId);
    div.setAttribute('style', 'border:1px solid black;width:' + width + 'px;height:0px;-moz-transform:rotate(' + deg + 'deg);-webkit-transform:rotate(' + deg + 'deg);position:absolute;top:' + y + 'px;left:' + x + 'px;');
})("div", 1, 1, 100, 100);

首先 - 我不是将它放在一个window.onload事件中，而是立即调用带有所需参数的函数，但保留了函数名，以便可以重用它。

第二 - 我添加了一个参数，因此您可以指定在调用函数时尝试绘制线的元素ID。

Javascript绘制线脚本不起作用

1 个答案: