photshop で position を 出してくれるスクリプト
photoshop と front の仕事
frontend の仕事をしていると photoshop から画像を切り出してポジションを出すという作業が 少なくない機会訪れるでしょう。
position の割り出し方
この作業は非常に面倒。
楽したいなら、プラグイン とか、 sketch を使うとか
いろいろ手はあります
昔ながらの絶対座標なケース
時には絶対座標でレイアウトするとかってケースは多々あります。
こういうときに欲しいツールがない。。。
ならば自作だ!!!
photoshop plugin
つくりましょうよ jsx
photoshop の preset/scripts のフォルダにファイルを打ち込めばok
ソースコード
これは自分用なので結構汚いし、用途があれですが、、、
全てのレイヤーのポジションを網羅していくスクリプトです。
でそれをテキストファイルに書き出します。
$.appEncoding = "UTF-8";
var CR = String.fromCharCode(13);
var fileName = File.saveDialog("保存ファイル名を入力");
var fileObj = new File(fileName);
var nest = 0;
if ( fileObj.open('w') ) {
for (var i = 0; i < activeDocument.layers.length; i++) {
var layer = activeDocument.layers[i];
get_layer_pos(layer, fileObj, nest);
}
fileObj.close();
}
function get_layer_pos(target, fileObj, nest) {
var bounds = target.bounds;
for (var i = 0; i < bounds.length; i++) {
bounds[i] = parseInt(bounds[i]);
};
// 高さと幅も取れるよ。
var w = bounds[2] - bounds[0] ;
var h = bounds[3] - bounds[1] ;
var x = bounds[0];
var y = bounds[1];
// インデント用のコードだよ。要らないなら消そう。
var length = 15;
var name = "";
for (var i = 0; i < nest; i++) {
length -= 2;
name += " ";
};
name += target.name;
length -= target.name.length;
for (var i = 0; i < length; i++) {
name += " ";
};
// ファイル書き出し
fileObj.write ( name + ':\t{"x": ' + x + ', "y": ' + y + '}' + CR );
if(target.layers){
for (var i = 0; i < target.layers.length; i++) {
get_layer_pos(target.layers[i], fileObj, nest+1);
};
}
}
ちょっとしたケースなら自分でかいて自動化していきましょう!
Author And Source
この問題について(photshop で position を 出してくれるスクリプト), 我々は、より多くの情報をここで見つけました https://qiita.com/monpy/items/5ede9187bbcd90c975c8著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .