Jump to content
Search Community

Question about scaling path

meixuan test
Moderator Tag

Recommended Posts

53 minutes ago, meixuan said:

How can I pre-define a fullscreen path data?

 

Just define path data. You can scale geometry. If you created path data for a 1000 x 1000 area, and now you need to it fit a 400 x 600, you would scale the path down using these values.

 

var scaleX = 400 / 1000;
var scaleY = 600 / 1000;

 

Depending on the medium, you might have to scale every coordinate in the path. 

 

point.x *= scaleX;
point.y *= scaleY;

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

2 minutes ago, Shrug ¯\_(ツ)_/¯ said:

I think @meixuan might have edited the initial post, last night it originally had a more descriptive context and included a link.

 

Ha. Yeah, both posts were edited.

 

The second post about using the MorphSVGPlugin's path filter, which you really don't need to use anymore as you can define a function for canvas rendering.

 

See the Pen WYWZab by GreenSock (@GreenSock) on CodePen

 

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Here's an example of scaling an svg to fill the screen. The path data is based on a 100 x 100 area. The key to getting it to scale asymmetrically is with the preserveAspectRatio="none" attribute on the <svg> element.

 

Click anywhere to run the animation.

 

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

 

 

Taken from this thread.

 

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Yes, I figured that since the original question had been answered, it would be inappropriate to start another one from the same post, so I deleted the following-up question. The second question was about using MorphSVGPlugin's path filter.

Thanks again for the concrete examples provided by you guys. You guys are being really helpful.

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