Discussions

Qテキストを並べて形を作るタイポグラフィってできますか?

○とか△もしくはもっと複雑なシェイプに、テキストを動的に流し込んで
タイポグラフィっぽくできるものをHTML5+CSS3+JSで作りたいと思っています。

例えばこんな感じのやつです。
http://gyazo.com/dd131c43597da5792e020780c1b8a458.png

文字数が増えても全部の文字がシェイプ内に収まるようにしたいのですが、
なかなか方法を思いつきません。。
どなたか知恵を貸していただけませんでしょうか?


最終的には以下の画像のように、単語に切り分けて縦と横で組んで、
特定の単語をボールドにするとかしたいなぁなんて思ってます。
http://gyazo.com/9bc95a1768b65d059d165354642928a7.png

AAnswer to: テキストを並べて形を作るタイポグラフィってできますか?

kyo_ago

とりあえず簡単に作ってみました。
(chromeだとそれなりに見えますが、キャプチャだと文字が潰れてるのでFxはうまく表示しないかもしれません)

基本的な作りとしては一度文字をcanvasに描画後、そのImageDataを取得して中のpixel情報を取得し、文字が描画されている場所を拡大して文字を再描画しています。
(文字組部分は最悪html要素の組み立てでなんとかなる可能性があります)

参考に挙げられている上のやつはまだなんとかなる気がしますが、下のやつはかなり難しいかも。。。
(ある程度は再現できそうですが)

fum

すごい!ありがとうございます。
全く手も足も出なかったので本当に助かりました!
書いていただいたコードを基に勉強させていただきます。
ありがとうございます。

fum

申し訳ありません。一カ所わからない点があったので再度質問させて下さい。

for (var x = 0; x < w; ++x) {
for (var y = 0; y < h; ++y) {
var idx = (x + y * w) * 4;
if (!data[idx + 3]) {
continue;
};
result.push([x, y]);
};
};

上のコードは、描画されたテキストが存在するかどうかを、全ての(x, y)について調べて、
存在する座標を配列にして返すというものだと思うのですが、

var idx = (x + y * w) * 4;
if (!data[idx + 3]) {
continue;
};

の部分が何をやっているのか、
なぜ4と3という数値なのかがどうしてもわかりませんでした。
解説お願いできませんでしょうか。
よろしくお願いいたします。

kyo_ago

http://tech.kayac.com/archive/javascript-canvas-imagedata.html
コードの詳細に関してはこの記事がベースになってますが、
(って、この記事もわたしが書いてるので分かりにくいかもしれませんが。。。)
canvasのImageDataは本来「縦*横*色」の3次元情報を単純な1次元配列に変換して保持しています。

例えば、2*2 pixelの画像を普通に配列化するとこんな感じになりますが、
[
[ // 1列目
[赤,緑,青,透明度],
[赤,緑,青,透明度]
],
[ // 2列目
[赤,緑,青,透明度],
[赤,緑,青,透明度]
]
]
このままだと大きな画像を変更する際にコストがかかるのでImageDataではこんな感じになります。
[赤,緑,青,透明度,赤,緑,青,透明度,赤,緑,青,透明度,赤,緑,青,透明度]

で、肝心のコードに記述されている4と3ですが、
4は上記「赤,緑,青,透明度」毎に処理するための1pixelのbyte数、
3は「赤,緑,青,透明度」の「透明度」を指定するための数字になります。
(0起点なので赤 = 0,緑 = 1,青 = 2,透明度 = 3になります)

ちなみにサンプルコードの場合、処理の都合上左上から下に処理しているので注意してください。
(ImageDataは左上から右に並んでいます)

//サンプルコード書いてて気づきましたが、前のコードはバグありますね。(18,19行目は<=が正しい)

Post a question

You can post JavaScript, HTML, CSS related questions with attached reference to actual codes and get the answers likewise.

Ask a question

  • 1. Click the ‘Post a question’ above

  • 2. Enter question details, reference code, and click ‘Add question’ button

  • 3. Question will be paired with the code on display

Add an answer

  • 1. Choose a question

  • 2. Enter answer details, attach the reference code and click ‘add answer’ button

  • 3. Your answer will accompanied with attached code

Tag