CODEWITHSUNDEEP
mathcanvasdrawingbezier
Thomas
Thomas

Reputation: 5856

how to scale a Bezier curve (using HTML5 canvas)?

I have a Bezier path stored as an array of several points, which is each an array of coordinates in the form [cp1x,cp1y,cp2x,cp2y,x,y].

I'd like to be able to scale this path up and down to adjust its size, but I don't know the math to do that. I tried applying a coefficient to each of the coordinate values, but that didn't seem to work.

Does anybody know how to achieve this?

Upvotes: 4

Views: 2380

Answers (1)

tom10
tom10

Reputation: 69182

In the standard representation, the points P, represent actual points in space, so you'd move them around like any other points. That is to scale them, just multiple everything by you scaling factor: say it's a, so that would be [a*cp1x,a*cp1y,a*cp2x,a*cp2y,a*x,a*y], or if you want to scale x and y separately, you can use different factors for the x and y components.

Note also that this will scale things relative to the origin (x=0, y=0), so if you don't have any curves at the origin, it can look like a shift. If you want to negate the effect of this shift you can subtract Px and Py from the x and y values respectively, where Px and Py is the point you want to not move when scaled, before you do the scaling (and then add it back after you multiple, if you want to). But if what you want to do is scale an entire canvas, like going from 5x5 inch to 7x7, you'd want to do the multiplication without any shifts (and in this case, by 7./5).

Upvotes: 2

Related Questions