Javascript 画线脚本不起作用-6ren

Javascript 画线脚本不起作用

转载作者：行者123 更新时间：2023-11-28 00:53:11

24

4

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

jsfiddle:http://jsfiddle.net/qnkonmgo/

<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>

最佳答案

这有效。请参阅此处的 fiddle :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 画线脚本不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26530983/

24

4

0

文章推荐： javascript - TagName 输入未显示在我的 ember View 中

文章推荐： c++ - 使用 fstream 对象将文件中的信息存储到变量中

文章推荐： c++ - 多维数组动态分配内存图

文章推荐： javascript - 如何在原生拖动事件后获取 mouseup 事件？

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

首页

博学

6Ren·AI

商城

Javascript 画线脚本不起作用