Jump to content
Search Community

move an object inside canvas

Kumar test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have created Bezier curve using Canvas and added a div (square box) to it. Now when I am trying to move the div along Beizer curve the CO-Ords its considering are wrt to the div outside of it but not the Canvas element. So its ending up in a different curve compared to the actual curve drawn on the Canvas.

 

Is there any example of moving objects drawn using Canvas?

 

Starting point { x: 0, y: 0 }
Control point 1 { x: 1, y: 50 }
Control Point 2 { x: 200, y: 400 }
End point { x: 400, y: 50 }

 

var playBtn = document.getElementById("playBtn");
        playBtn.onclick = function () {
            if (document.getElementById("box") != null) {
                var tween1 = TweenMax.to(document.getElementById("box"), 5, {
                    bezier: { type:"cubic", values: [{ x: 0, y: 0 }, { x: 1, y: 50 }, { x: 200, y: 400 }, { x: 400, y: 50 }], autoRotate: false },
                    ease: Power1.easeInOut
                });

                tween1.play();
            }
        };
 
Thanks,
Kumar.
Link to comment
Share on other sites

My guess is this could probably be fixed with some CSS positioning so that the #box coordinates are already lined up with the canvas, but I don't know how your files are setup.

 

Could you post a simple demo of this on http://codepen.io, http://jsfiddle.net or http://jsbin.com/ so we can see where the problem is and come up with a good solution for you?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...