html9patch tool can change the web development mode.
- GUI control UIView (Contain padding, Protecting images will not be stretched.)
- Repeal gridline, Reduce the workload.
- Responsive Web Design
- Upgrade development efficiency
- and more Goole/Bing/Baidu “9patch”
Warning: Not compatibility IE6, stand up for the W3C.
$git clone git@github.com:kimseongrim/html9patch.git
$open <path>/demos/index.htmljava -jar html9patch.jar [src]
(e.g. $java -jar <path>/tools/html9patch.jar <path>/demos
$open <path>/demos/index.html)
[src] Required 9-Patch PNG file directory$ vi <path> /html9patch.js
Change line 6 var imageDirectory
(e.g. http://cdn.yoursite.com/images/)Open Android 9-Patch tool, OR You can create with Adobe Photoshop.
java -jar <path>/tools/draw9patch.jar
Note: A normal PNG file (.png) will be loaded with an empty one-pixel border added around the image, in which you can draw the stretchable patches and content area. A previously saved NinePatch file (.9.png) will be loaded as-is, with no drawing area added, because it already exists.
Optional controls include:
- Zoom: Adjust the zoom level of the graphic in the drawing area.
- Patch scale: Adjust the scale of the images in the preview area.
- Show lock: Visualize the non-drawable area of the graphic on mouse-over.
- Show patches: Preview the stretchable patches in the drawing area (pink is a stretchable patch).
- Show content: Highlight the content area in the preview images (purple is the area in which content is allowed).
- Show bad patches: Adds a red border around patch areas that may produce artifacts in the graphic when stretched. Visual coherence of your stretched image will be maintained if you eliminate all bad patches.
Warning: If you need a compatible Internet Explorer 9 or less, 9-Patch above and left of the cutting area use 1px.