forked from chrislondon/9-Patch-Image-for-Websites
-
Notifications
You must be signed in to change notification settings - Fork 0
Javascript file to allow 9 patch images on the web. For a more detailed explanation of 9-patch images read here: http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch
RodneyJT/9-Patch-Image-for-Websites
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
=== 9 Patch Images for HTML === Contributors: chrislondon, ryankentp Tags: 9patch A single javascript file to allow 9patch images on the web. == Description == This project allows you to use .9.png or .9.gif files on web pages. These files allow for rapid development of webpages with complex styles without having to use complex CSS3. == What Are 9 Patch Images == 9 Patch images are stretchable, repeatable images reduced to their smallest size. The simplest example would be if you were to take a rounded div and slice it up into 9 squares like you would a tic-tac-toe board. The four corners wouldn't change sizes at all but would be static while the other 5 pieces would be stretched or repeated to all the whole image to scale appropriately. With that explanation and the advent of CSS3 you might think that there is no reason to use 9 patch images but the name '9 patch' is a misnomer. The images can be sliced up into even smaller pieces. The wiki page has images that will help understand better. It also contains more details. 9 Patch images contain an index of which piece is what by adding a 1px border to the image. The colors in the border determine if a piece is static (doesn't scale), it stretches, or it repeats. * For more details see the wiki page: https://github.com/chrislondon/9-Patch-Image-for-Websites/wiki/What-Are-9-Patch-Images == How to Create 9 Patch Images == To create a 9 patch image you need to start with a .png or a .gif file. Jpeg's don't make good 9 patch images because they blur colors. * Create the image that you would like to scale. * Reduce it to the smallest pieces possible. * Increase the canvas size to add a 1 pixel border around the entire image * Mark the different pieces with the appropriate colors in the border. * Save the image as [image-name].9.png or [image-name].9.gif * For more details see the wiki page: https://github.com/chrislondon/9-Patch-Image-for-Websites/wiki/How-to-Create-9-Patch-Images == Installation == * Fork project on Git: 1. Go to the git hub repository for 9-Patch-Image-for-Websites: https://github.com/chrislondon/9-Patch-Image-for-Websites 2. Fork the repository: (HowTo: http://help.github.com/fork-a-repo/) * For more details see the wiki Installation page: https://github.com/chrislondon/9-Patch-Image-for-Websites/wiki/Installation == Usage == * Install the .js file * Include .js file in your HTML * All <div>'s with a background image .9.(png|gif) will automatically be converted. * For more details see the wiki Usage page: https://github.com/chrislondon/9-Patch-Image-for-Websites/wiki/Usage == Known Issues == * Unfortunately Canvas isn't support on <IE9 browsers We have two branches to explore using canvas emulators but neither seem to be successful.
About
Javascript file to allow 9 patch images on the web. For a more detailed explanation of 9-patch images read here: http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch
Resources
Stars
Watchers
Forks
Releases
No releases published
Packages 0
No packages published