JavaScript繪制線腳本不起作用
[英]Javascript draw line script not working
問題描述
在Firefox和Chrome中進行了測試。 SO在舊的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>
1 個解決方案
解決方案1
1 2014-10-23 15:21:22
這可行。 在這里查看小提琴： 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繪制動態線
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.