Preserve rectangle roundness while scaling

Fireworks CS4 and earlier versions allow for defining the roundness of rectangles. The roundness gets distorted when any of the transformation tools are used like Scale, Skew or distort.

If you know the approximate height or width values for the rounded rectangle, then you can enter the values in Properties Inspector in the width and height fields and the roundness will be preserved. This is a HUGE time saver.


Rectangle roundness preserved after scaling

Share on Facebook

13 Responses to Preserve rectangle roundness while scaling

  1. Andy Baker says:

    No. The solution is to fix the transform tools so you don’t have to publish tips like this in the first place.

  2. Sarthak says:

    @AndyThe 9 slice transform tool does that job. But this is just a quick tip without using that tool.

  3. Jerome says:

    Hi there,now there’s one thing I’ve always wondered: how is that roundness value measured? :)In my experience, it’s been completely unpredictable and unreliable, sometimes you enter a small value and get a large rounded angle, sometimes you enter large values and get supa-small angles, I honestly never understood the logic (if any) behind it, and would really appreciate if someone could explain it to me!Cheers,J.

  4. Sarthak says:

    @JeromeThe roundness can be specified in 2 ways.Pixel or PercentageIf the roundness is specified in pixels then the roundness radius is known instantly and applied.If the roundness is applied in percentage, the details are s below.min(Height, Width)* Percentage roundness value/2

  5. This tip is not working for me. I created a rounded rectangle to the exact dimensions mentioned in the example and when I overlay the original with the transformed the corners do not match.This may not be the place to mention this, but I love Fireworks and have been using it since FW4.Please fix all of the bugs.I love the features of FW CS4, but they do not always work correctly and some old features do not either.Thank you for all of your work on this.Mike

  6. Sarthak says:

    @Mike BoardleyRegarding the issue you have mentioned can you highlight how are you transforming the rectangle whose corners are not matching.The rectangle in the blog post mentioned is created using the “Rectangle Tool” and not the “Rounded Rectangle” which is also present in Fireworks. The roundness of this rectangle is then modified from the Properties Inspector. This feature was introduced in Fireworks CS3 and advanced versions.Apart from this you mentioned that some of the features of CS4 and older versions do not work as expected. I am interested to know more about them and understand the problems you are facing.

  7. gonchuki says:

    seems roundness in pixels is not truly exact as you describe.If you create a regular rectangle, change its size via any scale tool except 9-slice and then apply a pixel based roundness, the results will not be as expected. The roundness seems to be affected by the same scaling that is applied to your rectangle, so 20px in one size wont be the same 20px at another size.I can make some sample screenshots if you need them.

  8. Sarthak says:

    @gonchukiYour observations are true. This is because the rectangle holds the transformation information which has been applied to it.There are workflows which allow a user to remove the transformation which has been applied to the object.Would you like to make any suggestions for improvement?

  9. gonchuki says:

    I guess the roundness should then be recalculated to its new pixel size upon resizing, say if you double the size of the rectangle, you now see a 40px roundness instead of a 20px one.So to the user, this number should be auto-calculated and replaced in the size box, just like it currently happens with % based roundness.That way, we can manually go back to our preferred 20px roundness overriding what the transformation calculated for us.Most importantly, I guess this change would not break the way it works now, and would give back control to the user.

  10. David says:

    Right, I’ve played with it a bit now, having read both this article and the future one…It seems that for no apparent reason, a “rounded rectangle” isn’t treated the same as a rectangle with rounded corners as applied via the Property Inspector.I’ve followed all your instructions, with and without the ‘Scale Attributes’ option turned on, and it appears it actually works as desired ONLY if you start with a standard rectangle.In fact, when starting with a standard rectangle and specifying the roundness using properties, the ONLY way I could get the attributes to skew was by using the Free Transform tool. Under these conditions the ‘Scale Attributes’ option actually works as it says on the tin.With a ‘Rounded Rectangle’, using the ‘Resize’ handle (bottom right corner) it doesn’t scale the attributes regardless of the option state. But if you disable that option you can resize using any method with success, BUT it still skews the roundness upon doing so.So, to clarify, the only way to resize a ‘Rounded Rectangle’ without skewing the roundness is to use the ‘Resize’ handle – so it can’t be done with accuracy.

  11. Sarthak says:

    @DavidI completely missed you. I was always talking about the rectangle which now has the ability to specify roundness from Properties Inspector.If you see, rounded rectangle is an autoshape. Hence it is different from the rectangle.

  12. Giles says:

    I have to disagree with gonchuki about resizing. I prefer to set a radius in pixels for a rectangle, and then resize it and still have the same pixel radius. If I am designing a site that uses 10 pixel rounded corners as standard on various elements, then I find it easier to have a fixed radius regardless of resizing, so that a 200px x 200px rectangle with a 10px radius rounded corner will keep its 10px rounded corners when resized to 400px x 400px.My only criticism of the rectangle tool for corners is its inability to style individual corners like the rounded rectangle tool can.Giles

  13. mcook says:

    Feature request: have an option to turn on and off roundness scaling for rectangles (and rounded rectangles).Given that Fireworks tends to be used for making web interface graphics, I imagine that for most use, scaling is not desired.