In Which I Get Rid of Transforms on Path Data in Blend

I end up using Blend a lot to create little shapes (like arrows or curves for a reflection) and for a V1 product it's got a pretty nice path manipulation system. There's one thing that bugs me, though, and that is the fact that when I rotate or scale the path, it applies a transform instead of actually updating the path data. Sometimes the transform is what you want (like in an animation), but sometimes you actually want the path data to get updated.

That happened to be this weekend. I was creating back and forth buttons for new Kaxaml (nearly ready!). I created an arrow for the back button, but then I needed the reverse version of that arrow for the forward button. Rotating it, of course, just applied a RenderTrasnform so I ended up with this:

Example 1

This obviously isn't what I wanted. The gradients are whacky. I could update the gradients and things would probably be hunkydory, but this will ultimately be a button so that means keeping duplicate gradients around for at least 3 states (normal, mouseover and pressed). Also it just leaves the code feeling kind of hacky.

Now there may be a way to to get Blend to just update the path data for you as you manipulate an object, but I don't know what it is. So I devised hack that essentially "clears" the transforms and leaves you with clean path data. It's easy.

One you have manipulated the path so that it is rotated, skewed, etc. as you like, simply create another object (a small rectangle for example) that fits within the bounds of the original object and then place it on top of the original object in such a way that there is no overlap.

Example 1

Make sure that the rectangle is void of any transforms. Next shift select both objects. Here's the important part: be sure the select the rectangle last.

Example 1

Finally, just choose Object | Combine | Unite from the Menu and voila!, you are back in business.

Example 1

This works, obviously, because the Combine action inherits the transforms from the last object that was selected and when we unite these overlapping objects we get a path that is the same as the original. The other option, I guess, is to do this in Design or Illustrator and then I wouldn't have this problem.


Published

Discussion

Loading... Show

Previous