招待状ページを作成する必要があります。タイトルの文字数は動的で、最大 2 行まで表示できます。2 行を超える場合は、コンテンツの 2 行目の末尾に省略記号が追加されます。プロダクトガールの性格によると、今後4行の設定が変更される可能性が高いので、ここでハードコードしないようにする必要があるということで、数日前に実際にお願いしました。最大 4 行を表示するように変更します。その他は変わりません。製品の女の子は若すぎます:)!
さっそく、お見せするコードを紹介します。コードをロードする前に、渡す必要があるパラメータを確認してください。 ！
画像とテキストによるパラメーターの説明。PS の技術と設計がせっかちであることをご容赦ください。
// テキストの自動行折り返し関数 textPrewrap(ctx, content,drawX,drawY, lineHeight, lineMaxWidth, lineNum) { vardrawTxt = '' // 現在描画されているコンテンツ vardrawLine = 1 // どの行から描画を開始するか vardrawIndex; = 0; // 現在の描画コンテンツのインデックス // コンテンツを 1 行で描画できるかどうかを判断します if(ctx.measureText(content).width <= lineMaxWidth) { ctx.fillText(content.substring(drawIndex, i),drawX,drawY); } else { for (var i = 0; i <= content.length; i++) {drawTxt += content[i]; (ctx.measureText(drawTxt).width > lineMaxWidth) { if (drawLine === lineNum) { //最後の行に省略記号を追加します。 ctx.fillText(content.substring(drawIndex, i) + '...',drawX,drawY); // 最後の行でない場合は、ctx.fillText( content.substring(drawIndex, i + 1),drawX,drawY); // 現在の行の最後の文字列の次の idnex を記録し、次の行の最初の単語を描画するために使用されます。 += 1; // 行数 + 1drawY += lineHeight // 描画内容の y 座標に応じて行の高さが増加しますdrawTxt = '';思いがけない発見テキストを描画する過程で、テキストの描画の y 座標はテキストの上部を基準にする必要があることがわかりました。上の画像は、文字以上の価値があります。
ブラウザ環境：chrome 71.0.3578.98（正式版）（64bit）
フォントサイズは40pxです
描画されたy座標が0の場合、テキストが左上隅に少しだけはみ出していることがわかります。y座標を40で描画すると、テキストが完全に表示されることがわかります
追記これは比較的人気のないコード効果ですが、困っている友達を助けることができれば幸いです。また、皆さんが VeVb Wulin Network をサポートしてくれることを願っています。