
みなさんこんにちは! 今日は、PHPを使用して上記のような画像を動的に作成する方法を説明します。 おそらく誰もがこれを実装する方法を疑問に思っていたでしょう。 よく考えれば、特にHTML5の出現により、導入されている新しい技術が思い浮かぶようです。 これは、おそらく多くがすでに推測しているように、 SVGです。 実際、知らない人にとっては、これは単なる普通の写真ですが、XMLの形式で記録されます。 画像は2つの方法で取得できます。たとえば、Inkscapeで自分で描画するか、既に完成した画像をダウンロードします。 時間も芸術的才能もないので、2番目の方法を使用します。 私は個人的なメッセージ/メールの例として行いますので、2枚の写真が必要です。1枚目-メッセージなし、2枚目-新しいメッセージがたくさんあります。 ここから写真をダウンロードしてください 。 old.svg-メッセージなし、new.svgにはメッセージがあります。
したがって、実装に移ります。 必要なもの:
- PHPとHTMLのある程度の知識
- テンプレートエンジンとは
- SVGとは
ここからテンプレートエンジンをダウンロードします 。
テンプレートエンジンはどのように機能しますか? とても簡単に機能します。 テンプレートをクラスに示し、変数を初期化し、parsim、出力用のコードを準備します。
コード内で次のように機能する場合:
require_once('template.php'); // $var = "Text"; $tpl->get_tpl('file.html'); $tpl->set_value('Var',$var); $tpl->tpl_parse();
同様に、写真を使用します。 まず、たとえばメモ帳でkarinka new.svgを開きます。 ファイルの最後の行を見つけます:
<tspan sodipodi:role="line" id="tspan5273" x="71.75" y="11.791">1</tspan>
そして次のように変更します:
<tspan sodipodi:role="line" id="tspan5273" x="71.75" y="11.791">{MSG}</tspan>
これらの手順で、テンプレートに変数を追加しました。 画像テンプレートができたので、関数自体に進みます。 書く前に、2つの画像があり、変数の値に応じてどちらを表示するかを考える必要があります。 次に、この値をテンプレートに置き換えて、簡単なコードを取得します。
// require_once('template.php'); // $number = 1; if ($number == 1){ // $tpl->get_tpl('imgs/new.svg'); $tpl->set_value('MSG',$number); $tpl->tpl_parse(); echo $tpl->html; } else{ // $tpl->get_tpl('imgs/old.svg'); $tpl->tpl_parse(); echo $tpl->html; }
画像はimgsサブディレクトリにあり、テンプレートエンジンは接続先のスクリプトの隣にあることに注意してください。
以上です! シンプルなソリューション、シンプルな問題。
PS:new.svgの写真についてすみません。 修正したくない場合は描画できません。