Added Scale3Bitmap and Scale9Bitmap display objects

[joshtynjala]

Scale3Bitmap: Supports three regions, for a pill-shaped scaling bitmap. Can be horizontal or vertical. Center region stretches in both directions to fill available space. If outer regions are scaled, they will maintain aspect ratio.

Scale9Bitmap: Supports nine regions, similar to scale9Grid that is available to Flash display objects.

In both cases, scaling can be controlled by setting drawWidth and drawHeight or by calling setDrawSize(). These values will default to the width and height of the image that is passed into the constructor. I chose these names to avoid conflicts that may arise if EaselJS ever adds width, height, or setSize().

[gskinner]

Quick question, just to understand the architecture - is there a significant benefit to having two classes versus just a single class with an extra property to define horizontal/vertical/both? Just curious if there is significant code/logic duplication with the current approach?

[joshtynjala]

I guess you could simulate Scale3Bitmap with Scale9Bitmap, with a tweak to Scale9Bitmap. Scale3Bitmap has extra logic to scale its caps while maintaining their aspect ratio if the shorter edge is scaled. This keeps perfectly rounded caps from being stretched in only one direction. Scale9Bitmap could do the same thing when it sees that the inner rectangle has a width or height of 0.

A disadvantage of doing it that way is that Scale9Bitmap would draw to the canvas six times, while Scale3Bitmap is always three times. Maybe that could be optimized, though.

[gskinner]

Just checking - always nice to have one class and less code if it still makes sense. Thanks Josh.

[joshtynjala]

Yeah, one class probably makes more sense. As I mentioned above, the Scale3Bitmap's behavior can be a special case if the scale9Grid width or height is zero. I was able to ensure that it only draws to the canvas three times when this special case arises.

[thejustinwalsh]

What is the status of this feature? Are we to see it in the master branch or a future version anytime soon?

[gskinner]

Quick update: this is being looked at now, after a ridiculously long delay.

[lannymcnie]

This has been manually added to EaselJS, but is currently in the "Extras" folder, along with a sample and a readme. We need to evaluate how this might work with SpriteSheets.

Thanks for the pull request, this is a great addition!

[joshtynjala]

Cool. Thank you!