Canvas in JavaScript Issue

Question

I was wondering if there was a way to have an immovable canvas object in the middle of the page and have several other objects connect to it, but be movable.

Welcome to Stack Overflow! Can you give us a little more concrete example of what you're trying to do? Are you trying to block an item from moving based on a user's action? Exclude it from some code that moves other things automatically? What does it mean to have other objects connect? Perhaps a picture would be good here? Also, do you have any code that you've tried so far? What was the result? — Nathan, Jul 20 '12 at 20:27
Do you mean like using Dialogs? http://jqueryui.com/demos/dialog — Ivan, Jul 20 '12 at 20:27
Are you interested in something like this? http://jsdo.it/soulwire/dom-particles. Even this is done on DOM elements. — Endre Simo, Jul 20 '12 at 20:48
Scott, I mean something like lines that connect to the movable objects from the immovable one. — montelc0, Jul 20 '12 at 20:48
@CoryMonteleone-Haught Ah, okay. Can we see your code so far? What's moving the movable items? — Nathan, Jul 20 '12 at 20:51
Actually, it's a pretty secret project I'm working on. It is still in the process of being patented. But, the main focus is to have on main object in the center of the page that connects to the movable objects with lines. I would like to post the code, but for the safety of it until the patent is approved, it don't want to risk my idea being stolen. — montelc0, Jul 20 '12 at 20:54
Without anything to go off of, there is little hope that we can actually help you. If you could provide some sort of snippet using JSFiddle that gives us some idea of how these elements are interacting it may allow us to help you. — Ivan, Jul 20 '12 at 21:04
Yep, I'm afraid we can't do a lot for you without knowing what you're doing. We don't need all your code, just an isolated example or snippet of the relevant portion. — Nathan, Jul 20 '12 at 21:13

score 0 · Accepted Answer · edited May 23 '17 at 10:09

Without anything to go off of besides "main object in the center of the page that connects to the movable objects with lines", the best I can do is link you to this SO answer which shows how to draw lines in Mozilla Firefox.

The function (in case of link rot) is:

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

}

The function was written by @madox2 and works by creating transformed elements. You can expand his code to include webkit browsers as well and add in CSS3 functionality for when IE decides to add it.

Without anything else to go off of, this is the best I can do to help you.

Not sure what the downvotes are for. – Ivan Jul 20 '12 at 22:36 — Ivan, Jul 20 '12 at 22:36

Canvas in JavaScript Issue

1 Answers1