Contenu connexe
Similaire à Html5で9parts (20)
Html5で9parts
- 6. 元画像 角丸 + グラデ + 可変長の文字が入るボタン
~ ~ ~ ~ ~ ~横長~ ~ ~ ~ ~ ~
気にせず縦横伸ばしたら
~ こんな感じに・・・
~
~
縦
長
~
~
~
- 8. 9つにぶった切る
② ③ ①③⑦⑨はそのまま表示
①
④ ⑤ ⑥ ②⑤⑧を横幅にあわせて伸ばし
⑦ ⑧ ⑨
④⑤⑥を縦幅にあわせて伸ばす。
これで角の表示が変に伸びることはない
(角部の表示サイズは常に一定)
また外枠の幅が広がることもない
これが9 patch
(Flashでは9 slice)
- 12. HTML + CSS (+ JavaScript)で実現するには、
border-imageを使うのがよさそう
(Androidでの対応状況は問題ない)
指定方法
border-image: border-image-source border-image-slice(上 右 下
左) border-image-width(上 右 下 左) border-image-repeat;
border-image-source : 画像ファイル指定
border-image-slice : 画像のどこを使うかpixel指定
border-image-width : 表示するボーダーの幅
border-image-repeat : 中央/辺部分の画像の表示方法
・stretch : 引き伸ばして表示
・repeat : 繰り返し表示
・round : 繰り返しだが整数倍になるように拡大縮小で調整
・space : 繰り返しだが整数倍にならない場合はスペースを開
ける
- 14. 9 patchをHTML上で利用
9-Patch-Image-for-Websites
https://github.com/chrislondon/9-Patch-Image-for-Websites
divタグのbackground-imageにhoge.9.(gif|png)の設定すると
自動的に利用範囲を測定して調整してくれる。
data:image/pngの形で利用
Androidでは動かないものも(2.2で動作確認できず。4.0はOK)
border-imageは利用していない
そのためborder-imageでは出来ないような表現も可能
- 15. 9 patchをHTML上で利用
scale9grid
http://code.google.com/p/scale9grid/
jQueryPlugin。指定方法は$(‘#hoge’).scale9Grid(options);
//options = { top: 1, buttom: 1, left: 1, right 1}
#hogeに当たっているbackground-image画像を利用して
optionsの指定ピクセルでborder-imageを含んだ<div>を生成し、
元のエレメントの下に表示する
Android 2.2/4.0共に問題なく動作
border-imageはstretch(拡大表示)以外に対応していない
画像に変更があった場合はoptionsの指定を変える必要がある
場合が存在する
- 16. 以上、ざっと探した感じではあまり利用はされてない
JavaScriptで画像の指定ピクセル内の色がちがうところって
見つけられたっけ? > canvas利用で何とかなりそう
指定方法は? > selectorを指定すると、background-image利用して
作ってくれるのがいいんじゃないかな npatch(‚.hoge‛); みたいな
オプションで画像を渡すようにしてもいいかも
npatch(‚.hoge‛, ‚img/hoge.png‛);
こんな感じの使い勝手のいいjavascriptライブラリ誰か作って