hanzi-writer实现可调参数的中文汉字字帖生成器代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：hanzi-writer实现可调参数的中文汉字字帖生成器代码，可生成pdf文档打印

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级字帖生成器 - 最终修复版</title>
    <!-- 引入 pinyin-pro 库 -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pinyin-pro.js"></script>
    <!-- 引入 hanzi-writer 库 -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/hanzi-writer.min.js"></script>
    <!-- 引入 html2pdf.js 库 -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/html2pdf.bundle.min.js"></script>
    <style>
        :root {
            --grid-size: 25mm;
            --page-margin: 15mm;
            --font-family: 'KaiTi', 'STKaiti', serif;
            --font-weight: 600;
            --font-size-percent: 80;
            --font-offset-y: 0;
            --main-char-color: #000000;
            --trace-char-color: #d8d8d8;
            --grid-line-color: #ffcccc;
            --pinyin-line-color: #fbe0e0;
            --stroke-main-color: #000000;
            --stroke-highlight-color: #e63946;
        }

        /* --- 基本布局 --- */
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin: 0; display: flex; height: 100vh; background-color: #f4f7f9; overflow: hidden; }
        .app-container { display: flex; width: 100%; height: 100%; }
        #preview-area { flex-grow: 1; padding: 20px; overflow: auto; display: flex; justify-content: center; }
        #a4-sheet { width: 210mm; min-height: 297mm; padding: var(--page-margin); background: white; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); box-sizing: border-box; }
        #controls-panel { width: 300px; flex-shrink: 0; background: #ffffff; border-left: 1px solid #e0e0e0; padding: 20px; overflow-y: auto; }

        /* --- 控制面板 --- */
        .control-header { display: flex; margin-bottom: 20px; }
        .control-header button { flex: 1; padding: 10px; border: 1px solid #ccc; background: #fdfdfd; cursor: pointer; font-size: 14px; }
        .control-header button.primary { background: #007bff; color: white; border-color: #007bff; }
        .control-header button:first-child { border-radius: 4px 0 0 4px; }
        .control-header button:last-child { border-radius: 0 4px 4px 0; margin-left: -1px; }
        .control-group { margin-bottom: 18px; }
        .control-group h3 { font-size: 14px; margin: 0 0 10px; color: #555; border-bottom: 1px solid #eee; padding-bottom: 5px; }
        .control-group label, .control-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; margin-bottom: 8px; }
        .control-group textarea, .control-group select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; resize: vertical; box-sizing: border-box; }
        .control-group input[type="range"] { width: 120px; }
        .control-group .value-span { min-width: 50px; text-align: right; color: #007bff; }
        .switch { position: relative; display: inline-block; width: 40px; height: 22px; }
        .switch input { opacity: 0; width: 0; height: 0; }
        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 22px; }
        .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
        input:checked + .slider { background-color: #2196F3; }
        input:checked + .slider:before { transform: translateX(18px); }

        /* --- 字帖内容核心样式 --- */
        .char-group { border: 1px solid var(--grid-line-color); margin-bottom: 10mm; }
        .stroke-sequence-row { display: flex; align-items: center; flex-wrap: wrap; padding: 5px; min-height: calc(var(--grid-size) * 0.5); border-bottom: 1px solid var(--grid-line-color); }
        .stroke-step-svg { width: calc(var(--grid-size) * 0.6); height: calc(var(--grid-size) * 0.........完整代码请登录后点击上方下载按钮下载查看