字帖生成器 - IVTSOFT

① 输入练字内容

0 个字</div>
    
    <div class="preset-row" id="presetRow">
      <button class="preset-btn" data-preset="yong">永字八法</button>
      <button class="preset-btn" data-preset="chunxiao">春晓</button>
      <button class="preset-btn" data-preset="jingyesi">静夜思</button>
      <button class="preset-btn" data-preset="qianzhiwen">千字文（节选）</button>
      <button class="preset-btn" data-preset="sanweijing">三字经（节选）</button>
    </div>
  </div>

<div class="section-card">
    <h3>② 选择格子样式</h3>
    <div class="grid-type-row" id="gridTypeRow">
      <div class="grid-type-card active" data-grid="tian">
        <div class="grid-preview-box tian"></div>
        <div class="gt-name">田字格</div>
        <div class="gt-desc">适合基础练字</div>
      </div>
      <div class="grid-type-card" data-grid="mi">
        <div class="grid-preview-box mi"></div>
        <div class="gt-name">米字格</div>
        <div class="gt-desc">适合笔画定位</div>
      </div>
      <div class="grid-type-card" data-grid="hui">
        <div class="grid-preview-box hui"></div>
        <div class="gt-name">回宫格</div>
        <div class="gt-desc">适合结构把握</div>
      </div>
      <div class="grid-type-card" data-grid="square">
        <div class="grid-preview-box square"></div>
        <div class="gt-name">方格</div>
        <div class="gt-desc">适合自由书写</div>
      </div>
      <div class="grid-type-card" data-grid="pinyin">
        <div class="grid-preview-box pinyin"></div>
        <div class="gt-name">拼音田字格</div>
        <div class="gt-desc">适合低年级练习</div>
      </div>
    </div>
  </div>

<div class="section-card">
    <h3>③ 参数设置</h3>
    <div class="settings-row">
      <div class="setting-item">
        <label>每行字数</label>
        <select id="selCols">
          <option value="5">5 个字/行</option>
          <option value="6">6 个字/行</option>
          <option value="8" selected>8 个字/行</option>
          <option value="10">10 个字/行</option>
          <option value="12">12 个字/行</option>
        </select>
      </div>
      <div class="setting-item">
        <label>每页行数</label>
        <select id="selRows">
          <option value="8">8 行</option>
          <option value="10" selected>10 行</option>
          <option value="12">12 行</option>
          <option value="15">15 行</option>
        </select>
      </div>
      <div class="setting-item">
        <label>格子大小：<span id="cellSizeVal">80</span>px</label>
        <input type="range" id="cellSize" min="50" max="120" value="80" step="10">
      </div>
      <div class="setting-item">
        <label>字体模式</label>
        <select id="selFontMode">
          <option value="solid">实心（黑字）</option>
          <option value="trace" selected>描红（浅色）</option>
          <option value="outline">空心（轮廓）</option>
        </select>
      </div>
      <div class="setting-item">
        <label>描红透明度：<span id="opacityVal">30</span>%</label>
        <input type="range" id="opacitySlider" min="10" max="60" value="30" step="5">
      </div>
      <div class="setting-item">
        <label>字体样式</label>
        <select id="selFontFamily">
          <option value="KaiTi,楷体,STKaiti,serif" selected>楷体</option>
          <option value="SimSun,宋体,STSong,serif">宋体</option>
          <option value="FangSong,仿宋,STFangsong,serif">仿宋</option>
          <option value="SimHei,黑体,STHeiti,sans-serif">黑体</option>
        </select>
      </div>
    </div>
  </div>

<div class="section-card preview-card">
    <h3>④ 字帖预览</h3>
    <div class="canvas-wrap" id="canvasWrap">
      <div class="canvas-empty" id="canvasEmpty">请输入文字内容开始生成字帖</div>
      <canvas id="mainCanvas" style="display:none;"></canvas>
    </div>
    
    <div class="btn-row">
      <button class="btn btn-primary" id="btnPrint" disabled>🖨️ 打印字帖</button>
      <button class="btn btn-success" id="btnDownload" disabled>💾 下载 PNG</button>
      <button class="btn btn-outline" id="btnAddBg">📄 打开米字格背景</button>
      <button class="btn btn-danger" id="btnClear">🗑️ 清空内容</button>
    </div>
  </div>

<div class="tips-card">
    <h4>💡 使用提示</h4>
    <ul>
      <li><strong>田字格</strong>：标准练字格，十字虚线辅助定位，适合基础笔画练习</li>
      <li><strong>米字格</strong>：多了对角斜线，更适合掌握笔画方向和角度</li>
      <li><strong>回宫格</strong>：内框帮助控制字的大小和重心位置</li>
      <li><strong>描红模式</strong>：文字颜色变浅，适合打印后临摹</li>
      <li>所有处理在浏览器本地完成，Canvas 渲染，支持打印和导出 PNG</li>
    </ul>
  </div>

</div>

<footer class="footer">
  <p>© 2024 IVTSOFT. All rights reserved.</p>
</footer>

<div class="toast-container" id="toastContainer"></div>

<script src="../scripts/main.js"></script>
<script>
(function() {
  'use strict';

/* ───── DOM 引用 ───── */
  var textInput    = document.getElementById('textInput');
  var charCount    = document.getElementById('charCount');
  var presetRow    = document.getElementById('presetRow');
  var gridTypeRow  = document.getElementById('gridTypeRow');
  var selCols      = document.getElementById('selCols');
  var selRows      = document.getElementById('selRows');
  var cellSize     = document.getElementById('cellSize');
  var cellSizeVal  = document.getElementById('cellSizeVal');
  var selFontMode  = document.getElementById('selFontMode');
  var opacitySlider = document.getElementById('opacitySlider');
  var opacityVal   = document.getElementById('opacityVal');
  var selFontFamily = document.getElementById('selFontFamily');
  var canvasWrap   = document.getElementById('canvasWrap');
  var mainCanvas   = document.getElementById('mainCanvas');
  var canvasEmpty  = document.getElementById('canvasEmpty');
  var btnPrint     = document.getElementById('btnPrint');
  var btnDownload  = document.getElementById('btnDownload');
  var btnAddBg     = document.getElementById('btnAddBg');
  var btnClear     = document.getElementById('btnClear');
  var toastContainer = document.getElementById('toastContainer');

/* ───── 状态 ───── */
  var currentGrid  = 'tian';      /* tian|mi|hui|square|pinyin */
  var currentPreset = '';         /* 当前选中的预设 */
  var toastTimer   = null;
  var ragBgEnabled = false;       /* 是否开启纹理背景 */

/* ───── 预设模板 ───── */
  var PRESETS = {
    yong: '永',
    chunxiao: '春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。',
    jingyesi: '床前明月光，疑是地上霜。举头望明月，低头思故乡。',
    qianzhiwen: '天地玄黄，宇宙洪荒。日月盈昃，辰宿列张。寒来暑往，秋收冬藏。闰余成岁，律吕调阳。云腾致雨，露结为霜。',
    sanweijing: '人之初，性本善。性相近，习相远。苟不教，性乃迁。教之道，贵以专。昔孟母，择邻处。子不学，断机杼。'
  };

/* ───── 初始化 ───── */
  renderInitial();

/* 文字输入变更 */
  textInput.addEventListener('input', function() {
    updateCharCount();
    renderCanvas();
  });

/* 预设模板点击 */
  presetRow.addEventListener('click', function(e) {
    var btn = e.target.closest('.preset-btn');
    if (!btn) return;
    var preset = btn.dataset.preset;
    if (PRESETS[preset]) {
      textInput.value = PRESETS[preset];
      currentPreset = preset;
      updatePresetActive();
      updateCharCount();
      renderCanvas();
    }
  });

/* 格子样式切换 */
  gridTypeRow.addEventListener('click', function(e) {
    var card = e.target.closest('.grid-type-card');
    if (!card) return;
    currentGrid = card.dataset.grid;
    gridTypeRow.querySelectorAll('.grid-type-card').forEach(function(c) { c.classList.remove('active'); });
    card.classList.add('active');
    renderCanvas();
  });

/* 参数变更 */
  selCols.addEventListener('change', renderCanvas);
  selRows.addEventListener('change', renderCanvas);
  selFontMode.addEventListener('change', renderCanvas);
  selFontFamily.addEventListener('change', renderCanvas);

cellSize.addEventListener('input', function() {
    cellSizeVal.textContent = cellSize.value;
    renderCanvas();
  });

opacitySlider.addEventListener('input', function() {
    opacityVal.textContent = opacitySlider.value;
    renderCanvas();
  });

/* 按钮 */
  btnPrint.addEventListener('click', function() { window.print(); });
  btnDownload.addEventListener('click', downloadPNG);
  btnAddBg.addEventListener('click', toggleBackground);
  btnClear.addEventListener('click', clearAll);

/* ───── 更新字数 ───── */
  function updateCharCount() {
    var text = textInput.value.replace(/\s/g, '');
    charCount.textContent = text.length + ' 个字';
  }

/* ───── 更新预设激活状态 ───── */
  function updatePresetActive() {
    presetRow.querySelectorAll('.preset-btn').forEach(function(b) {
      b.classList.toggle('active-preset', b.dataset.preset === currentPreset);
    });
  }

/* ───── Canvas 渲染 ───── */
  function renderCanvas() {
    var text = textInput.value.replace(/\s/g, ''); /* 去除所有空白 */
    if (!text) {
      clearCanvas();
      return;
    }

var cols      = parseInt(selCols.value);      /* 每行字数 */
    var rows      = parseInt(selRows.value);       /* 行数 */
    var size      = parseInt(cellSize.value);      /* 格子大小 px */
    var fontMode  = selFontMode.value;             /* solid|trace|outline */
    var opacity   = parseInt(opacitySlider.value) / 100;
    var fontFamily = selFontFamily.value;

/* 计算画布大小，添加边距 */
    var padding   = 28;
    var cw = cols * size + padding * 2;
    var ch = rows * size + padding * 2;

/* 设置 Canvas 尺寸（2x 高清） */
    var dpr = window.devicePixelRatio || 1;
    mainCanvas.width  = cw * dpr;
    mainCanvas.height = ch * dpr;
    mainCanvas.style.width  = cw + 'px';
    mainCanvas.style.height = ch + 'px';
    mainCanvas.style.display = 'block';
    canvasEmpty.style.display = 'none';

var ctx = mainCanvas.getContext('2d');
    ctx.setTransform(1, 0, 0, 1, 0, 0); /* 重置变换 */
    ctx.scale(dpr, dpr);

/* 白色背景 */
    ctx.fillStyle = '#FFFFFF';
    ctx.fillRect(0, 0, cw, ch);

/* 如果有纹理背景，先绘制格子 */
    if (ragBgEnabled) {
      drawRagBackground(ctx, cols, rows, size, padding);
    }

/* 绘制所有格子 */
    for (var r = 0; r < rows; r++) {
      for (var c = 0; c < cols; c++) {
        var x = padding + c * size;
        var y = padding + r * size;
        drawCell(ctx, x, y, size);
      }
    }

/* 遍历文字并填入格子 */
    var totalCells = cols * rows;
    for (var i = 0; i < Math.min(text.length, totalCells); i++) {
      var ch = text.charAt(i);
      var col = i % cols;
      var row = Math.floor(i / cols);
      var x = padding + col * size;
      var y = padding + row * size;
      drawChar(ctx, x, y, size, ch, fontMode, opacity, fontFamily);
    }

/* 更新按钮状态 */
    var hasContent = text.length > 0;
    btnPrint.disabled = !hasContent;
    btnDownload.disabled = !hasContent;
  }

/** 绘制单个格子 */
  function drawCell(ctx, x, y, size) {
    ctx.strokeStyle = '#E74C3C'; /* 红色外框 */
    ctx.lineWidth = 2;
    ctx.strokeRect(x, y, size, size);

ctx.strokeStyle = '#F5B7B1'; /* 浅红内线 */
    ctx.lineWidth = 0.5;

var halfW = size / 2;
    var halfH = size / 2;
    var qW = size / 4;
    var qH = size / 4;

switch (currentGrid) {
      case 'tian':
        /* 十字虚线 */
        drawDashedLine(ctx, x + halfW, y, x + halfW, y + size, [4, 4]);
        drawDashedLine(ctx, x, y + halfH, x + size, y + halfH, [4, 4]);
        break;
      case 'mi':
        /* 十字虚线 */
        drawDashedLine(ctx, x + halfW, y, x + halfW, y + size, [4, 4]);
        drawDashedLine(ctx, x, y + halfH, x + size, y + halfH, [4, 4]);
        /* 对角线虚线 */
        drawDashedLine(ctx, x, y, x + size, y + size, [4, 4]);
        drawDashedLine(ctx, x + size, y, x, y + size, [4, 4]);
        break;
      case 'hui':
        /* 十字虚线 */
        drawDashedLine(ctx, x + halfW, y, x + halfW, y + size, [4, 4]);
        drawDashedLine(ctx, x, y + halfH, x + size, y + halfH, [4, 4]);
        /* 内框（实线，浅色） */
        ctx.strokeStyle = '#F5B7B1';
        ctx.lineWidth = 1;
        ctx.strokeRect(x + qW, y + qH, size - 2 * qW, size - 2 * qH);
        break;
      case 'square':
        /* 无内部线，仅外框 */
        break;
      case 'pinyin':
        /* 上三分之一为拼音区，下三分之二为田字格，中间实线 */
        var pinyinH = size / 3;
        ctx.strokeStyle = '#F5B7B1';
        ctx.lineWidth = 1;
        /* 横分割线 */
        ctx.beginPath();
        ctx.moveTo(x, y + pinyinH);
        ctx.lineTo(x + size, y + pinyinH);
        ctx.stroke();
        /* 下方田字格虚线 */
        ctx.strokeStyle = '#F5B7B1';
        ctx.lineWidth = 0.5;
        drawDashedLine(ctx, x + halfW, y + pinyinH, x + halfW, y + size, [4, 4]);
        var lowerMid = y + pinyinH + (size - pinyinH) / 2;
        drawDashedLine(ctx, x, lowerMid, x + size, lowerMid, [4, 4]);
        break;
    }
  }

/** 绘制虚线 */
  function drawDashedLine(ctx, x1, y1, x2, y2, dash) {
    ctx.beginPath();
    ctx.setLineDash(dash);
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();
    ctx.setLineDash([]);
  }

/** 绘制文字 */
  function drawChar(ctx, x, y, size, ch, fontMode, opacity, fontFamily) {
    var fontSize = Math.round(size * 0.55);
    var baselineOffset = 0;

/* 拼音田字格——文字放在下三分之二区域 */
    if (currentGrid === 'pinyin') {
      var pinyinH = size / 3;
      y = y + pinyinH;
      size = size - pinyinH;
      fontSize = Math.round(size * 0.5);
    }

ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    var charX = x + size / 2;
    var charY = y + size / 2;

/* 字体 */
    ctx.font = fontSize + 'px ' + fontFamily;

switch (fontMode) {
      case 'trace':
        /* 描红模式：浅灰色文字 */
        ctx.fillStyle = 'rgba(180, 180, 180, ' + opacity + ')';
        ctx.fillText(ch, charX, charY);
        break;
      case 'outline':
        /* 空心字：先描边再透明填充 */
        ctx.strokeStyle = 'rgba(180, 180, 180, ' + opacity + ')';
        ctx.lineWidth = 1.5;
        ctx.strokeText(ch, charX, charY);
        /* 浅填充 */
        ctx.fillStyle = 'rgba(220, 220, 220, ' + (opacity * 0.3) + ')';
        ctx.fillText(ch, charX, charY);
        break;
      case 'solid':
      default:
        /* 实心模式 */
        ctx.fillStyle = '#1E293B';
        ctx.fillText(ch, charX, charY);
        break;
    }
  }

/** 绘制米字格背景纹理 */
  function drawRagBackground(ctx, cols, rows, size, padding) {
    var cw = cols * size + padding * 2;
    var ch = rows * size + padding * 2;

ctx.save();
    ctx.fillStyle = 'rgba(245, 183, 177, 0.08)';
    ctx.fillRect(0, 0, cw, ch);

for (var r = 0; r < rows; r++) {
      for (var c = 0; c < cols; c++) {
        var x = padding + c * size;
        var y = padding + r * size;
        var halfW = size / 2;
        var halfH = size / 2;

ctx.strokeStyle = 'rgba(245, 183, 177, 0.3)';
        ctx.lineWidth = 0.5;

/* 米字线 */
        drawDashedLine(ctx, x + halfW, y, x + halfW, y + size, [6, 6]);
        drawDashedLine(ctx, x, y + halfH, x + size, y + halfH, [6, 6]);
        drawDashedLine(ctx, x, y, x + size, y + size, [6, 6]);
        drawDashedLine(ctx, x + size, y, x, y + size, [6, 6]);
      }
    }
    ctx.restore();
  }

/** 清空 Canvas */
  function clearCanvas() {
    mainCanvas.style.display = 'none';
    canvasEmpty.style.display = 'block';
    btnPrint.disabled = true;
    btnDownload.disabled = true;
  }

/** 初始渲染 */
  function renderInitial() {
    updateCharCount();
    renderCanvas();
  }

/** 下载 PNG */
  function downloadPNG() {
    if (!textInput.value.replace(/\s/g, '')) {
      showToast('请先输入文字内容');
      return;
    }
    var link = document.createElement('a');
    link.download = '字帖_' + formatDate() + '.png';
    link.href = mainCanvas.toDataURL('image/png');
    link.click();
    showToast('💾 字帖 PNG 已下载');
  }

/** 切换纹理背景 */
  function toggleBackground() {
    ragBgEnabled = !ragBgEnabled;
    btnAddBg.textContent = ragBgEnabled ? '📄 关闭米字格背景' : '📄 打开米字格背景';
    if (ragBgEnabled) {
      btnAddBg.classList.add('btn-primary');
      btnAddBg.classList.remove('btn-outline');
    } else {
      btnAddBg.classList.remove('btn-primary');
      btnAddBg.classList.add('btn-outline');
    }
    renderCanvas();
    showToast(ragBgEnabled ? '已开启米字格背景纹理' : '已关闭背景纹理');
  }

/** 清空全部 */
  function clearAll() {
    textInput.value = '';
    currentPreset = '';
    updatePresetActive();
    updateCharCount();
    clearCanvas();
    ragBgEnabled = false;
    btnAddBg.textContent = '📄 打开米字格背景';
    btnAddBg.classList.remove('btn-primary');
    btnAddBg.classList.add('btn-outline');
    showToast('已清空全部内容');
  }

/* ───── Toast ───── */
  function showToast(msg) {
    if (toastTimer) { clearTimeout(toastTimer); }
    var existing = toastContainer.querySelector('.toast-item');
    if (existing) existing.remove();

var el = document.createElement('div');
    el.className = 'toast-item';
    el.textContent = msg;
    toastContainer.appendChild(el);

toastTimer = setTimeout(function() {
      el.style.opacity = '0';
      el.style.transform = 'translateY(-10px)';
      el.style.transition = 'all .3s ease';
      setTimeout(function() { el.remove(); }, 300);
    }, 2500);
  }

/* ───── 工具函数 ───── */
  function formatDate() {
    var d = new Date();
    return d.getFullYear() + pad2(d.getMonth()+1) + pad2(d.getDate());
  }
  function pad2(n) { return (n < 10 ? '0' : '') + n; }

/* ───── 键盘快捷键 ───── */
  document.addEventListener('keydown', function(e) {
    /* Ctrl+P 触发打印 */
    if ((e.ctrlKey || e.metaKey) && e.key === 'p') {
      var text = textInput.value.replace(/\s/g, '');
      if (text.length > 0) {
        e.preventDefault();
        window.print();
      }
    }
  });

})();
</script>
</body>
</html>

✍️ 字帖生成器

① 输入练字内容