Node.js使用gm綴りsprite画像
2707 ワード
設計図から12の小さいアイコンを得ました.ボタンの二つの状態です.それから、彼らをスプライトの写真にしたいです.
前にgulpのspriteプラグインを使ったことがありますが、今回は派手すぎてやりたくないです.パズルにはいいコマンドラインツールGraphics Magickとセットのnodejsバッグgmがあると知っています.
まず私が戦う写真を言います.正常な状態を第1行として、アクティブ状態を第2行としたいです.このようにバックグランド-positionを少し計算してもいいです.
苦労の過程はつらいです.Graphics Magickとgmの公式文書を見てみたいですが、結果として多くの単語が生まれました.最後に諦めました.以下に答えを言います.
総じて言えば、二つの方法があります.
1.gmパッケージを使うアプリ+adjoin方法
この方法には欠点があります.つまり、私が欲しいこのレイアウトに簡単に並べられません.adjoinを使って実際に3回の図を作りました.最後にspriteを得ました.参考コードは以下の通りです.
2.Graphics Magickが持参するコマンドラインツールを使う
Graphics Magickを直接使うコマンドラインです.ただし、ここで注意してください.パワーシェルでgmを使ってエラーを報告しています.cmdとcdを使って対応ディレクトリに行く必要があります.win 10はスマートにパワーシェルでcmdをデフォルトにしています.このエラーは修復されていません.
簡単にmontageを話してください.その中国語の表現は「蒙太奇」です.高さは上ですが、ここではパズルだけを使っています.命令後は写真の経路です.パスの後に`tile`パラメータがあります.画像の配置を指定します.×2は6列2行です.ここでは、すべての画像を一列に並べたいなら、このようにしてもいいです.つまり、列の数に関わらず、1行に制限します.逆に、`tile 1 x`は1列にいくらの行があってもいいです.
-tileパラメータの後は-geometryパラメータです.そのデフォルトは'120です.×120>+4+3’は、「各小図の最大サイズは120です.×このサイズより大きいものはズームされます(小さいものは拡大されません).画像間の間隔は横4縦3”です.
-geometryのパラメータは必要に応じて伝えられます.例えば私が送ったのは+0+0だけです.各図の大きさを制限しないことを示しています.ピクチャの間隔は0です.
最後のパラメータはパズルの結果をR.pngに出力します.
これらのパラメータを知ると、次の方法から派生した方法が分かります.
3.gmパッケージを使ってGraphics Magickコマンドラインを実行する
gmパッケージ自体は非常に強力ですが、コマンドを生成して実行するインターフェースも提供されています.上のコマンドラインのように、gmパッケージで書いてもいいです.
前にgulpのspriteプラグインを使ったことがありますが、今回は派手すぎてやりたくないです.パズルにはいいコマンドラインツールGraphics Magickとセットのnodejsバッグgmがあると知っています.
まず私が戦う写真を言います.正常な状態を第1行として、アクティブ状態を第2行としたいです.このようにバックグランド-positionを少し計算してもいいです.
苦労の過程はつらいです.Graphics Magickとgmの公式文書を見てみたいですが、結果として多くの単語が生まれました.最後に諦めました.以下に答えを言います.
総じて言えば、二つの方法があります.
1.gmパッケージを使うアプリ+adjoin方法
この方法には欠点があります.つまり、私が欲しいこのレイアウトに簡単に並べられません.adjoinを使って実際に3回の図を作りました.最後にspriteを得ました.参考コードは以下の通りです.
gm('nav1_1.png')
.append('nav2_1.png','nav3_1.png','nav4_1.png','nav5_1.png','nav6_1.png', true)
.adjoin().write('./result.png', function(err) {
console.log(err);
});
gm('nav1_0.png')
.append('nav2_0.png','nav3_0.png','nav4_0.png','nav5_0.png','nav6_0.png', true)
.adjoin().write('./result1.png', function(err) {
console.log(err);
});
gm('result1.png').append('result.png').adjoin()
.write('nav-icons.png', (err, data) => {
if(err) console.error(err);
console.log(data);
})
コードが初級です2.Graphics Magickが持参するコマンドラインツールを使う
Graphics Magickを直接使うコマンドラインです.ただし、ここで注意してください.パワーシェルでgmを使ってエラーを報告しています.cmdとcdを使って対応ディレクトリに行く必要があります.win 10はスマートにパワーシェルでcmdをデフォルトにしています.このエラーは修復されていません.
gm montage nav*_0.png nav*_1.png -tile 6x2 -geometry +0+0 rrr.png
私はmontageの方法を使って、しかも二回に分けて画像に入ってきました.二回に分けて入ってきた写真のパスは先着順を保証できます.簡単にmontageを話してください.その中国語の表現は「蒙太奇」です.高さは上ですが、ここではパズルだけを使っています.命令後は写真の経路です.パスの後に`tile`パラメータがあります.画像の配置を指定します.×2は6列2行です.ここでは、すべての画像を一列に並べたいなら、このようにしてもいいです.つまり、列の数に関わらず、1行に制限します.逆に、`tile 1 x`は1列にいくらの行があってもいいです.
-tileパラメータの後は-geometryパラメータです.そのデフォルトは'120です.×120>+4+3’は、「各小図の最大サイズは120です.×このサイズより大きいものはズームされます(小さいものは拡大されません).画像間の間隔は横4縦3”です.
-geometryのパラメータは必要に応じて伝えられます.例えば私が送ったのは+0+0だけです.各図の大きさを制限しないことを示しています.ピクチャの間隔は0です.
最後のパラメータはパズルの結果をR.pngに出力します.
これらのパラメータを知ると、次の方法から派生した方法が分かります.
3.gmパッケージを使ってGraphics Magickコマンドラインを実行する
gmパッケージ自体は非常に強力ですが、コマンドを生成して実行するインターフェースも提供されています.上のコマンドラインのように、gmパッケージで書いてもいいです.
gm().command('montage')
.in('nav*_0.png')
// in, in
.in('nav*_1.png')
.in('-tile', '6x2')
.in('-geometry', '+0+0')
.write('rrrr.png', (err, a,b,c) => {
console.log(err, 'a:', a, 'b:', b, 'c:', c);
});
コマンドラインを直接使うのと同じ効果ですが、このようにしてjsファイルを作成した後、今度は使うか、他の人に送るのがもっと便利です.