Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gimjin/html9patch

Rewrite Android 9-Patch to html9patch export HTML+CSS
https://github.com/gimjin/html9patch

Last synced: 3 days ago
JSON representation

Rewrite Android 9-Patch to html9patch export HTML+CSS

Host: GitHub
URL: https://github.com/gimjin/html9patch
Owner: gimjin
License: gpl-2.0
Created: 2015-03-03T13:14:46.000Z (over 9 years ago)
Default Branch: master
Last Pushed: 2016-08-10T05:25:40.000Z (over 8 years ago)
Last Synced: 2023-03-18T06:59:43.091Z (over 1 year ago)
Language: Java
Homepage:
Size: 675 KB
Stars: 2
Watchers: 0
Forks: 3
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# html9patch
![9-Patch](https://github.com/kimseongrim/html9patch/blob/master/images/demos.png)
![Responsive_web_design](https://github.com/kimseongrim/html9patch/blob/master/images/Responsive_web_design.png)
**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](http://alistapart.com/article/responsive-web-design)
* Upgrade development efficiency
* and more Goole/Bing/Baidu “9patch”

> **Warning:** Not compatibility IE6, stand up for the W3C.

# Demos
```Bash
$git clone [email protected]:kimseongrim/html9patch.git
$open /demos/index.html
```

# How to create?
```Bash
java -jar html9patch.jar [src]
(e.g. $java -jar /tools/html9patch.jar /demos)
vim /demos/index.html
*
*

*
*
// More function look at demo/index.html

[src] Required 9-Patch PNG file directory
```

# adjust the slice images directory?
```Bash
$ vi /html9patch.js
Change line 6 var imageDirectory
(e.g. http://cdn.yoursite.com/images/)
```

# Create 9-Patch file
Open Android 9-Patch tool, `OR` You can create with Adobe Photoshop.
```Bash
java -jar /tools/draw9patch.jar
```
![draw9patch-tool](https://github.com/kimseongrim/html9patch/blob/master/images/draw9patch-tool.png)
>**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.