Jump to content
Search Community

Using draggable with Canvas

fatlinesofcode 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

Is it possible to use the Draggable util class with Canvas, specifically EaselJS?


I'm creating a dial that can you can spin using throwprops. I wasnt able to use Draggable so I've recycled the dial AS3 example from here http://www.greensock.com/throwprops/ It works ok, but its a bit glitchy compared with the Draggable CSS example. I've created a Fiddle with the two versions, http://plnkr.co/edit/eKVhZL5ulUWqj5pgP9BA?p=preview


Is the something wrong with the math on my Canvas version perhaps?


Any tips would be appreciated.

Link to comment
Share on other sites

Draggable wasn't intended for use with 3rd party canvas frameworks like EaselJS, no. That's a very different beast, although you could certainly borrow some of the concepts from the guts. 


Unfortunately, we just don't have the time or resources to investigate and troubleshoot your EaselJS code (although we'd love to tackle the challenge). In order to deliver good support to GSAP users and crank out solid products, we've got to keep a relatively narrow focus in these forums and just answer questions directly related to GreenSock tools. If you still need help and you'd like to hire us on a consulting basis, feel free to contact us.


Good luck with your project(s). 

Link to comment
Share on other sites

Hmm, maybe I didn't phrase that question too well. Although I'm using Easel and Canvas the issue is not canvas specific. The velocity tracking part of my math wasn't great but I discovered you have functionality built-in to Throwprops to handle this. 


I applied:

var onMousedown = function(event) {
   ThrowPropsPlugin.track(dial, "rotation")
var onMouseup = function (event) {
   ThrowPropsPlugin.to(dial, {throwProps: {rotation: 'auto'}});

and it all works perfectly now. Here is a link to the updated plunkr. 




The examples on your site are great but it can be difficult when they all seem to be CSS only. It would be nice if we could get a few more canvas examples as the GSAP does work very well it.

  • Like 1
Link to comment
Share on other sites

Well I guess you could say its announced now. It does work really well, I wrote my own velocity tracker first by dividing the difference between mouse position angles by the difference in mouseevent's timestamps. But I found the Velocitytracker more robust. One issue I did notice is that when I then used 'auto' velocity the min and max values seems to be ignored. I solved by using my own min/max e.g.



// min, max ignored    
ThrowPropsPlugin.to(dial, {throwProps: {rotation: 'auto', resistance: 10, min:-300, max:300}});

// custom min/max
var v = Math.min(300, Math.max(ThrowPropsPlugin.getVelocity(dial, "rotation"), -300));
ThrowPropsPlugin.to(dial, {throwProps: {rotation: v, resistance: 10}});
Link to comment
Share on other sites

Hi, thanks for posting your results. Glad you found success.


From your code I'm not sure if you are understanding the min and max values. They refer to min and max destination values. They are used to restrict the range in which the final value of the property that is being tweened can land. 


From your custom min/max implementation it appears you are trying to find a min and max velocity. Apologies if I misunderstood.

  • Like 2
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...