Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Luckyde

DrawSVG in Canvas, is there a better way than this

Recommended Posts

Hey all, after adding

See the Pen MNQpGB by LuckyDe (@LuckyDe) on CodePen

for elCanvas  I wanted to also add the ability to draw an svg outline

In the code pen I attached( which i used the public examples version of drawsvg on) I am attempting this

1) Draw a svg on the document with the same paths as the one in the canvas

2) Animate the svg outlines with drawSVG
3) On update match strokeDasharray to setLineDash and lineDashOffset so the canvas shape gets updated

As you see it works! However every time I would need to draw an svg into the canvas I would first need to put one on the document, I wanted to ask is there a way around this? Is there a way to get the lineDash/DashArray data without having to draw an svg visually? When I put some animations with this effect into our game the devs might get upset I'm drawing all these elements just for reference

I guess this is mainly a question to you awesome devs that made the lib in the first place @GreenSock but also to anyone else who might know.

I had another consideration where I could make modifications to the plugin itself, but I really didn't wanna touch that, trying to do this without needing to modify Gsap code
 


Thanks in advance!

See the Pen zYOaMNz?editors=1010 by LuckyDe (@LuckyDe) on CodePen

  • Like 2
Link to post
Share on other sites

Thanks for the link! Yeah morph was easier to input I think the difference here is drawsvg plugin internally uses svg specific code like the line dash code and get BBox to update the svg that it might not be as easy to implement

  • Like 1
Link to post
Share on other sites
20 minutes ago, Luckyde said:

Thanks for the link! Yeah morph was easier to input I think the difference here is drawsvg plugin internally uses svg specific code like the line dash code and get BBox to update the svg that it might not be as easy to implement

Ah! didn't check your first CodePen to see that you had already implemented MorphSVG. 

Link to post
Share on other sites

@Luckyde I just shot you a private message with an answer (because it's related to an upcoming release that isn't public yet) ;)

 

Link to post
Share on other sites

I almost needed to figure something similar out awhile back but the project changed a bit and I was off the hook for that part. Curious what solution you go with once you figure it out, if you wouldn't mind dropping an update in here later on.

Link to post
Share on other sites
6 hours ago, Luckyde said:

Is there a way to get the lineDash/DashArray data without having to draw an svg visually?

 

You can manually calculate the length, but this is much easier.

 

See the Pen GjYpPr by osublake (@osublake) on CodePen

 

 

  • Like 1
Link to post
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.

×