WordPress.org
Get WordPress

Plugin Directory

Changeset 2967415


Ignore:
Timestamp:
09/15/2023 09:14:55 AM (3 years ago)
Author:
nove2b
Message:

全角半角のテキストを修正した

File:
1 edited

Legend:

Unmodified
Added
Removed

  • create-eye-catch-for-classic/trunk/create-eye-catch.php

    r2824447 r2967415  
    294294    // 入力されたタイトルを描画する関数
    295295    const cecfc_drawFont = (el) => {
    296 
    297       let title = el.substring(0, cecfc_oneLineTextLength * cecfc_totalLine)
    298       // ↑で生成されたタイトルの文字量が記入されたタイトルより少ない時
     296      const cecfc_ctxGround = cecfc_canvasGround.getContext('2d');
     297      let title = el.substring(0, cecfc_oneLineTextLength * cecfc_totalLine);
    299298      if (title.length < el.length) {
    300299        title = title.substr(0, title.length - 1) + '…';
    301300      }
    302301
     302      // フォントサイズの指定（半角、全角の幅を考慮）
    303303      cecfc_ctxGround.font = `bold ${cecfc_fontSize}px 'Roboto', 'Noto Sans JP'`;
     304
     305      // フォントカラーの指定
    304306      cecfc_ctxGround.fillStyle = cecfc_fontColor;
    305       const inputTextArray = title.split('')
    306 
    307       //出力用の配列を用意
    308       // https://kinocolog.com/javascript_canvas_br/
    309       var aryRow = [];
    310       aryRow[0] = '';
    311       var row_cnt = 0;
    312 
    313       //入力1文字毎にループ　改行コードもしくは折り返しで配列の添え字を足す
     307
     308      const inputTextArray = title.split('');
     309
     310      var rowText = '';
     311      var rowArray = [];
     312
    314313      for (var i = 0; i < inputTextArray.length; i++) {
    315         var text = inputTextArray[i];
    316         if (aryRow[row_cnt].length >= cecfc_oneLineTextLength) {
    317           row_cnt++;
    318           aryRow[row_cnt] = '';
     314        const metrics = cecfc_ctxGround.measureText(rowText + inputTextArray[i]);
     315
     316        if (metrics.width > cecfc_oneLineTextLength * cecfc_fontSize) {
     317          rowArray.push(rowText);
     318          rowText = '';
    319319        }
    320         if (text == "\n") {
    321           row_cnt++;
    322           aryRow[row_cnt] = '';
    323           text = '';
    324         }
    325         aryRow[row_cnt] += text;
    326       }
    327 
    328       //文字の表示　y軸とx軸をループする
    329       for (var i = 0; i < aryRow.length; i++) {
    330         aryStr = aryRow[i].split('');
    331         for (var j = 0; j < aryStr.length; j++) {
    332           cecfc_ctxGround.fillText(aryStr[j], (j * cecfc_fontSize) + cecfc_leftMargin, (i * cecfc_fontSize * cecfc_lineHeight) + cecfc_topMargin);
    333         }
    334       }
    335     }
     320
     321        rowText += inputTextArray[i];
     322      }
     323
     324      rowArray.push(rowText);
     325
     326      for (var i = 0; i < rowArray.length; i++) {
     327        const text = rowArray[i];
     328        const y = (i * cecfc_fontSize * cecfc_lineHeight) + cecfc_topMargin;
     329
     330        // テキストの描画
     331        cecfc_ctxGround.fillText(text, cecfc_leftMargin, y);
     332      }
     333    };
    336334
    337335    cecfc_saveEyeCatch.addEventListener('click', () => {
Note: See TracChangeset for help on using the changeset viewer.