javascript - JavaScript 问题中的画布

Question

我想知道是否有一种方法可以在页面中间放置一个不可移动的画布对象并让其他几个对象连接到它，但可以移动。

Answer 1

除了“页面中心的主要对象通过线条连接到可移动对象”之外，没有任何事情可做，我能做的最好的事情就是将您链接到这个 SO 答案，该答案显示了如何在 Mozilla Firefox 中绘制线条。

功能（在链接腐烂的情况下）是：

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);position:absolute;top:'+y+'px;left:'+x+'px;');   

document.getElementById("myElement").appendChild(div);

}

该函数由@madox2 编写，通过创建转换元素来工作。您可以扩展他的代码以包含 webkit 浏览器，并在 IE 决定添加它时添加 CSS3 功能。

没有其他事情可做，这是我能做的最好的帮助你。