Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts

    draw dashed line with no canvas in a motion

    The title might sound weird, but is exactly what I want to do. There is a center div (planet earth) and 4 divs (satelites) floating arround it. What im looking is for a way to draw a dashed line from each planet to earth, and still keep the motion going.


    Code:
    $(window).load(function(){
    var pos = $('#center').position(),
        radiusSat = $('#sat0').width() * 0.5,
        radius = $('#center').width() * 0.5,
        cx = pos.left + radius,
        cy = pos.top + radius,
        x, y, angle = 0, angles = [],
        spc = 360 / 4,
        deg2rad = Math.PI / 180,
        i = 0;
    
    for(;i < 4; i++) {
        angles.push(angle);
        angle += spc;
    }
    
    /// space out radius
    radius += (radiusSat + 15);
    
    loop();
    
    function loop() {
    
        for(var i = 0; i < angles.length; i++) {
    
            angle = angles[i];
            
            x = cx + radius * Math.cos(angle * deg2rad);
            y = cy + radius * Math.sin(angle * deg2rad);
    
            $('#sat' + i).css({left:x - radiusSat, top:y - radiusSat});
        
            angles[i] = angles[i] + 1;
            if (angles[i] > 360) angles[i] = 0;
        }
        
        requestAnimationFrame(loop);
    }
    });
    the css

    Code:
      div {
        border-radius:50%;
        border:2px solid #000;
        position:fixed;
    }
    #center {
        width:200px;
        height:200px;
        left:100px;
        top:100px;
        
    }
    #sat0, #sat1, #sat2, #sat3 {
        width:50px;
        height:50px;
        
    }
    And HTML
    Code:
    <div id="centre">
    			<div id="center"></div>
    			<div id="sat0"></div>
    			<div id="sat1"></div>
    			<div id="sat2"></div>
    			<div id="sat3"></div>
    		</div>


    any ideas how to achieve this ?

  • #2
    New Coder
    Join Date
    Aug 2011
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Or ... if theres a diferent method ..... anyone?

  • #3
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    354
    Thanks
    9
    Thanked 52 Times in 51 Posts
    Why "no canvas"

  • #4
    New Coder
    Join Date
    Aug 2011
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by hdewantara View Post
    Why "no canvas"
    I first tough of no canvas..as Im just learning how to use canvas after posting this threat ..... lol.:P But I still not sure how to achieve this xD.

  • #5
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    354
    Thanks
    9
    Thanked 52 Times in 51 Posts
    Well,
    beside HTML5's canvas...

    Perhaps you could use SVG. I heard that it can also be animated, but sadly my knowledge hasn't gone that far SVG can't run in IE.8, according to this Can I use SVG? page.

    You did make me curious though, so I've test 3rd method. I'm sure somebody here has ever tried a trick with the new CSS.3's transform:rotate() feature to draw lines before, so here's a little test with that: Simple Div Connectors without Canvas. THis technique looks less compatible than the SVG though... http://caniuse.com/#search=rotation

    Good luck, and happy holiday!

  • #6
    New Coder
    Join Date
    Aug 2011
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by hdewantara View Post
    Well,
    beside HTML5's canvas...

    Perhaps you could use SVG. I heard that it can also be animated, but sadly my knowledge hasn't gone that far SVG can't run in IE.8, according to this Can I use SVG? page.

    You did make me curious though, so I've test 3rd method. I'm sure somebody here has ever tried a trick with the new CSS.3's transform:rotate() feature to draw lines before, so here's a little test with that: Simple Div Connectors without Canvas. THis technique looks less compatible than the SVG though... http://caniuse.com/#search=rotation

    Good luck, and happy holiday!
    Niceee script! .. now we just got to make them spin xD ..

    Thanks and happy holidays also :]


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •