【问题标题】:Canvas in JavaScript Issue [closed]JavaScript问题中的画布[关闭]
【发布时间】:2012-07-20 03:37:26
【问题描述】:

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

【问题讨论】:

  • 让其他对象“连接到它”是什么意思?
  • 欢迎来到 Stack Overflow!你能给我们一个更具体的例子来说明你正在尝试做什么吗?您是否试图根据用户的操作阻止项目移动?从一些自动移动其他东西的代码中排除它?连接其他对象意味着什么?也许这里的照片会很好?另外,到目前为止,您有任何尝试过的代码吗?结果如何?
  • 你的意思是喜欢使用对话框吗? jqueryui.com/demos/dialog
  • @CoryMonteleone-Haught 啊,好的。到目前为止我们可以看到你的代码吗?是什么在移动可移动的物品?
  • 没有任何事情可做,我们实际上可以帮助您的希望很小。如果您可以使用 JSFiddle 提供某种 sn-p,让我们对这些元素如何交互有所了解,它可能会让我们为您提供帮助。

标签: javascript html canvas


【解决方案1】:

除了“页面中心的主要对象通过线条连接到可移动对象”之外,没有任何事情可做,我能做的最好的事情就是将您链接到this SO answer,它显示了如何在 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 功能。

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

【讨论】:

  • 不确定投反对票的目的是什么。
猜你喜欢
  • 2016-07-07
  • 2012-04-27
  • 2015-08-03
  • 2014-04-06
  • 1970-01-01
  • 1970-01-01
  • 2011-03-25
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多