パワプロ風画面ジェネレータをリニューアルしました!

サービスURL

https://pawapro-gen.netlify.app

使っている技術

• NextJS
• konvajs(react-konva)
• canvas

リニューアルポイント

• これまでサーバに保存していたのを、端末で画像を直接保存(canvas)ができるように変更。
• プロスピモードの搭載
• 球威の追加
• チーム画像、選手画像の反映
• オリジナル特殊能力はオミット

letter-spacing理解した

letter-spacing = 領域の幅/文字列の長さ - フォントサイズ
領域の幅からフォントサイズ✖️文字列の長さで余る領域の幅が出せます。
letter-spacingは1文字ごとにつくので、上記を文字列の長さで割ると、
領域全体に広がる文字列が作れます。

↓これは失敗作です。忘れてください(笑)
letter-spacingを使ってある幅に文字列を揃える

ハマったところ

canvasのレスポンシブ対応で、iOSでwindow.innerWidthが想定通りに動作しなかったこと。

• ios safariでviewportがずれる

なのでリサイズイベント(useEffect)はこう書きました。

useEffect(() => {
    const checkSize = () => {
        setWidth(Math.min(document.documentElement.clientWidth, window.innerWidth || 0));
    };
    window.addEventListener('resize', checkSize);
    return () => window.removeEventListener('resize', checkSize);
  }, []);