CODEWITHSUNDEEP
javascriptmath
dallardtech
dallardtech

Reputation: 185

Maths algorithm for scaling to a percentage from variable values

Right, you will have to stick with me because I am confusing myself at the moment.

I am trying to work out the scale of an svg when I add it to a rapheal paper element.

Here's what needs to happen:

All of my SVGs are variable widths. When I add them to my paper object I want them to be 600px wide. I need to calculate the scale ratio of the original width that will always work out at 600px, whether the original width is 2000px or 10px.

What I have so far is...

    var maxWidth = 600;
    var vWidth = vector.getBBox().width //this could be anything;

    //Instert algorithym to work out the scale ratio
    //I am not smart enough to work this part out. Please help...
    //Currently this scale s set to what the original width is, but I want it to always be 600

    vector.scale(1, 1);

I hope this makes sense to somebody! I am a designer who turned programmer (as you can probably tell)

Thanks!

Upvotes: 0

Views: 181

Answers (2)

juvian
juvian

Reputation: 16068

Try this:

var maxWidth = 600;
var vWidth = vector.getBBox().width;
var xscale=600/vWidth;

vector.scale(xscale, 1);

Upvotes: 0

zneak
zneak

Reputation: 138061

If you divide 600 by the width of your element, it'll tell you by how much you need to scale it to make 600. I'm sure you're smart enough for the coding part :)

Examples:

  • Element has a width of 100px, so you need it to make it 6 times bigger. 600/100 is 6.
  • Element has a width of 1800px, so you need to make it 3 times smaller. 600/1800 is 1/3, so you're good too.

Upvotes: 1

Related Questions