9-slice scaling: Difference between revisions
Added AKA 9-patch Tags: Mobile edit Mobile web edit |
|||
Line 2: | Line 2: | ||
[[File:Traditional scaling vs 9-slice scaling.svg|thumb|322x322px|Top: Traditional scaling, corners are distorted. Bottom: 9-slice scaling, corners aren't distorted.]] |
[[File:Traditional scaling vs 9-slice scaling.svg|thumb|322x322px|Top: Traditional scaling, corners are distorted. Bottom: 9-slice scaling, corners aren't distorted.]] |
||
'''9-slice scaling''' (also known as '''Scale 9 grid''' or '''9- |
'''9-slice scaling''' (also known as '''Scale 9 grid''', '''9-slicing''' or '''9-patch''') is a 2D image resizing technique to proportionally scale an image by splitting it in a grid of nine parts.<ref>{{Cite web|url=https://www.lynda.com/Illustrator-tutorials/9-slice-scaling-explained/135243/149344-4.html|title=9-slice scaling explained|website=Lynda.com - from LinkedIn|language=en-US|access-date=2018-06-17}}</ref> |
||
The key idea is to prevent [[image scaling]] distortion by protecting the pixels defined in 4 parts (corners) of the image and scaling or repeating the pixels in the other 5 parts. |
The key idea is to prevent [[image scaling]] distortion by protecting the pixels defined in 4 parts (corners) of the image and scaling or repeating the pixels in the other 5 parts. |
Revision as of 00:24, 11 June 2022
![](http://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Traditional_scaling_vs_9-slice_scaling.svg/322px-Traditional_scaling_vs_9-slice_scaling.svg.png)
9-slice scaling (also known as Scale 9 grid, 9-slicing or 9-patch) is a 2D image resizing technique to proportionally scale an image by splitting it in a grid of nine parts.[1]
The key idea is to prevent image scaling distortion by protecting the pixels defined in 4 parts (corners) of the image and scaling or repeating the pixels in the other 5 parts.
A variation of the concept, the 3-slice scaling, consists in a grid of 3 parts in which only the pixels in 2 parts (the edges) are protected and the pixels on the middle part are repeated.
History and use
The concept was first introduced in a consumer application by Macromedia in Flash 8 (2005).[2] and it was available as feature to scale symbols. Later on, in 2007 Adobe introduced it as a feature in Adobe Fireworks CS3,[3] Adobe Illustrator, and Adobe Flash.[4] Today it is also present as a feature of game development software like Unreal engine, Urho3D, and Unity 3D.[5]
The technique can be used to manipulate both bitmap/raster graphics and vector graphics. A current implementation of the 9-slice technique is present on the CSS 3 Backgrounds and Borders spec[6] by using the border-image property.
References
- ^ "9-slice scaling explained". Lynda.com - from LinkedIn. Retrieved 2018-06-17.
- ^ "Macromedia - Flash : Flash 8 Release Notes". www.adobe.com. Retrieved 2017-10-08.
- ^ "Improved 9-slice scaling in Fireworks". www.adobe.com. Retrieved 2017-10-08.
- ^ Karlins, David (May 7, 2007). "Flash CS3 Professional". Macworld. Retrieved 2018-06-17.
- ^ Technologies, Unity. "Unity - Manual: 9-slicing Sprites". docs.unity3d.com. Retrieved 2017-10-08.
- ^ Bos, Bert; Etemad, Elika J.; Kemper, Brad (2014-09-09). "CSS Backgrounds and Borders Module Level 3". www.w3.org. Retrieved 2017-10-08.