player-template.html

<!doctype html>
<html lang="zh-CN"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Brushtrokes · 笔触工坊 — __STYLELABEL__</title>
<style>
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;width:1920px;height:1080px;overflow:hidden}
  body{font-family:"Microsoft YaHei","PingFang SC","Segoe UI",sans-serif;
       background:radial-gradient(1400px 820px at 8% -12%,#1b1712 0%,#0c0a08 56%,#050404 100%);
       color:#ece6dc;-webkit-font-smoothing:antialiased}
  .top{height:76px;display:flex;align-items:center;padding:0 36px;gap:18px}
  .dot{width:9px;height:9px;border-radius:50%;background:#d9a441;box-shadow:0 0 15px #d9a441}
  h1{font-size:26px;margin:0;letter-spacing:.6px;font-weight:700}
  h1 small{font-size:12.5px;font-weight:400;color:#9b8d78;margin-left:12px;letter-spacing:0}
  .chips{margin-left:auto;display:flex;gap:9px}
  .chip{padding:6px 13px;border-radius:10px;background:rgba(255,255,255,.05);
        border:1px solid rgba(255,255,255,.09);font-size:12.5px;color:#b8ab97}
  .chip b{color:#fff;font-size:15px;font-variant-numeric:tabular-nums;margin-right:4px}
  .main{height:1004px;padding:0 36px 14px;display:flex;gap:22px}
  .col-l{width:648px;display:flex;flex-direction:column;gap:11px}
  .card{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);
        border-radius:15px;padding:11px}
  .cap{display:flex;align-items:center;gap:8px;font-size:12px;color:#9b8d78;
       letter-spacing:.4px;padding:1px 3px 7px}
  .cap b{color:#e8dfd2;font-size:13px;font-weight:600;letter-spacing:0}
  .cap .tag{margin-left:auto;font-size:11px;color:#7d7264}
  #ref{width:600px;height:auto;display:block;border-radius:8px;
       outline:1px solid rgba(255,255,255,.1)}
  .info{flex:1;display:flex;flex-direction:column;gap:9px}
  .now{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
       border-radius:10px;padding:8px 10px;font-size:11.5px;color:#9b8d78}
  .now .h{color:#cdc2b2;font-size:11px;letter-spacing:.5px;margin-bottom:5px}
  .now .g{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 6px;
          font-variant-numeric:tabular-nums}
  .now .g span b{color:#f4eee4;font-weight:600}
  .col-r{flex:1;display:flex}
  .cwrap{flex:1;display:flex;flex-direction:column;justify-content:center}
  #cv{display:block;border-radius:9px;box-shadow:0 22px 56px rgba(0,0,0,.62)}
  .prog{margin-top:10px;display:flex;align-items:center;gap:12px;font-size:12px;
        color:#9b8d78;font-variant-numeric:tabular-nums}
  .track{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.075);
         overflow:hidden;cursor:pointer;position:relative}
  .track i{display:block;height:100%;width:0%;
           background:linear-gradient(90deg,#a8761f,#e8c26a)}
  .track .tick{position:absolute;top:0;height:100%;width:1px;background:rgba(0,0,0,.55)}
  #tcount{color:#cdc2b2}
  .badge{font-size:11px;padding:3px 9px;border-radius:7px;background:rgba(217,164,65,.14);
         color:#d9a441;border:1px solid rgba(217,164,65,.3)}
  .stgs{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px}
  .stg{padding:3px 8px;border-radius:7px;font-size:10.5px;color:#7d7264;
       background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
       font-variant-numeric:tabular-nums;transition:all .25s}
  .stg b{font-weight:600}
  .stg.on{color:#0f0c08;background:#e0b25c;border-color:#e0b25c}
  .stg.done{color:#cdc2b2;background:rgba(217,164,65,.10);border-color:rgba(217,164,65,.28)}
</style></head>
<body>
<div class="top">
  <div class="dot"></div>
  <h1>__STYLELABEL__逐笔重绘<small>__STYLESEQ__</small></h1>
  <div class="chips">
    <div class="chip"><b>__N__</b>__UNIT__</div>
    <div class="chip"><b>__NSTAGE__</b>道工序</div>
    <div class="chip"><b>__TOT__</b>s</div>
  </div>
</div>
<div class="main">
  <div class="col-l">
    <div class="card">
      <div class="cap"><b>原图参考</b><span>颜色取样源</span><span class="tag">LEFT</span></div>
      <img id="ref" src="data:__IMGMIME__;base64,__IMG__" alt="reference">
    </div>
    <div class="card info">
      <div class="cap"><b>工序进度</b><span>当前：<b id="stgname">–</b></span></div>
      <div class="stgs" id="stgs"></div>
      <div class="now">
        <div class="h">当前笔触</div>
        <div class="g">
          <span>序号 <b id="i1">–</b></span><span>宽度 <b id="i2">–</b></span><span>长度 <b id="i3">–</b></span>
          <span>分层 <b id="i4">–</b></span><span>起始 <b id="i5">–</b></span><span>时长 <b id="i6">–</b></span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-r">
    <div class="cwrap">
      <div class="cap"><b>画布</b><span id="hintTxt">逐笔铺陈</span>
        <span class="tag badge" id="state">绘制中</span></div>
      <canvas id="cv"></canvas>
      <div class="prog">
        <span id="tcount">0 / __N__</span>
        <span class="track" id="track"><i id="bar"></i></span>
        <span id="tsec">0.0s / __TOT__s</span>
      </div>
    </div>
  </div>
</div>
<script>__RENDERJS__</script>
<script>
const DATA = __DATA__;
const GROUND = DATA.ground || { type: 'oil', color: '#181613' };
const STAGES = __STAGEMETA__ || [];
const IW = __IW__, IH = __IH__;

/* 自适应到 1920x1080 布局 */
(function fit() {
  const targetW = 1086, targetH = Math.round(targetW * IH / IW);
  const cv = document.getElementById('cv');
  const dpr = Math.min(2, window.devicePixelRatio || 1);
  cv.width = Math.round(targetW * dpr);
  cv.height = Math.round(targetH * dpr);
  cv.style.width = targetW + 'px';
  cv.style.height = targetH + 'px';
  const ref = document.getElementById('ref');
  ref.style.height = 'auto';
})();

const cv = document.getElementById('cv');
const ctx = cv.getContext('2d', { alpha: false });
const base = document.createElement('canvas');
base.width = cv.width; base.height = cv.height;
const bctx = base.getContext('2d', { alpha: false });
const SC = cv.width / IW;

const PRE = OILRender.preprocess(DATA.strokes);
const N = DATA.strokes.length, TOTAL = DATA.total;

function ground(c) { OILRender.paintGround(c, c.canvas.width, c.canvas.height, GROUND); }
ground(bctx);

function drawStroke(c, i, prog) { OILRender.drawStroke(c, DATA.strokes, SC, i, prog, PRE[i]); }

let idx = 0, t = 0, done = false, hudT = -1, curStage = 0;
const KF = [], KF_MAX = 8;

function stageAt(tv) {
  let ns = 0;
  for (let i = 0; i < STAGES.length; i++) if (STAGES[i].t <= tv + 1e-9) ns = i;
  return ns;
}
function setBadge(f) {
  const el = document.getElementById('state');
  if (f) { el.textContent = '完成'; el.style.color = '#8ee6a8';
           el.style.background = 'rgba(110,220,150,.13)'; el.style.borderColor = 'rgba(110,220,150,.3)'; }
  else { el.textContent = '绘制中'; el.style.color = '#d9a441';
         el.style.background = 'rgba(217,164,65,.14)'; el.style.borderColor = 'rgba(217,164,65,.3)'; }
}
function paintStages() {
  const els = document.querySelectorAll('.stg');
  const active = stageAt(t);
  els.forEach((el, i) => {
    el.className = 'stg' + (i === active ? ' on' : (STAGES[i].t < t ? ' done' : ''));
  });
  curStage = active;
  const nm = STAGES[Math.min(active, STAGES.length - 1)];
  document.getElementById('stgname').textContent = nm ? (nm.label || nm.name) : '–';
}

function reset() {
  idx = 0; t = 0; done = false; hudT = -1; curStage = 0; KF.length = 0;
  ground(bctx); ctx.drawImage(base, 0, 0); setBadge(false); paintStages();
}
function advance(nt) {
  t = Math.min(nt, TOTAL + 0.4);
  while (idx < N && DATA.strokes[idx][3] <= t) { drawStroke(bctx, idx, 1); idx++; }
  const ns = stageAt(t);
  if (ns !== curStage) { curStage = ns; paintStages(); }
  ctx.drawImage(base, 0, 0);
  if (idx < N) {
    const s = DATA.strokes[idx];
    const pr = Math.max(0.02, Math.min(1, (t - s[3]) / Math.max(s[4], 1e-6)));
    drawStroke(ctx, idx, pr);
  } else if (!done) { done = true; setBadge(true); }
  return idx;
}
function buildKF() {
  if (KF.length) return;
  reset();
  const step = TOTAL / KF_MAX;
  for (let k = 0; k < KF_MAX; k++) {
    const target = k * step;
    while (t < target - 1e-9) {
      const nxt = Math.min(target, TOTAL + 0.4);
      if (nxt <= t + 1e-9) break;
      advance(nxt);
    }
    const c = document.createElement('canvas');
    c.width = base.width; c.height = base.height;
    c.getContext('2d', { alpha: false }).drawImage(base, 0, 0);
    KF.push({ t: t, idx: idx, canvas: c });
  }
}
function seekTo(v, useKF) {
  const target = Math.max(0, Math.min(v, TOTAL + 0.5));
  if (useKF) buildKF();
  let best = null;
  if (useKF) for (const k of KF) if (k.t <= target && (!best || k.t > best.t)) best = k;
  if (best) {
    bctx.drawImage(best.canvas, 0, 0);
    idx = best.idx; t = best.t; done = false; hudT = -1; setBadge(false);
    if (target > t) advance(target);
  } else { reset(); advance(target); }
  curStage = stageAt(t); paintStages();
  ctx.drawImage(base, 0, 0);
  if (idx < N) {
    const s = DATA.strokes[idx];
    drawStroke(ctx, idx, Math.max(0.02, Math.min(1, (t - s[3]) / Math.max(s[4], 1e-6))));
  } else setBadge(true);
  hud();
}

const $ = id => document.getElementById(id);
function hud() {
  $('bar').style.width = (Math.min(1, t / TOTAL) * 100).toFixed(2) + '%';
  $('tcount').textContent = idx + ' / ' + N;
  $('tsec').textContent = t.toFixed(1) + 's / ' + TOTAL.toFixed(1) + 's';
  const i = Math.min(idx, N - 1), s = DATA.strokes[i];
  if (s && (t - hudT > 0.05 || hudT < 0)) {
    hudT = t;
    $('i1').textContent = '#' + (i + 1);
    $('i2').textContent = (s[9] | 0) === 4 ? '色块' : s[2].toFixed(1) + 'px';
    $('i3').textContent = Math.round(s[7]) + 'px';
    $('i4').textContent = '第 ' + (s[6] + 1) + ' 层';
    $('i5').textContent = s[3].toFixed(2) + 's';
    $('i6').textContent = (s[4] * 1000).toFixed(2) + 'ms';
  }
}

(function buildChips() {
  const box = $('stgs');
  for (const s of STAGES) {
    const d = document.createElement('div');
    d.className = 'stg';
    d.innerHTML = '<b>' + (s.label || s.name) + '</b>';
    box.appendChild(d);
  }
  const tr = $('track');
  for (const s of STAGES) {
    const d = document.createElement('div');
    d.className = 'tick';
    d.style.left = (s.t / TOTAL * 100).toFixed(2) + '%';
    tr.appendChild(d);
  }
})();

const params = new URLSearchParams(location.search);
const MANUAL = params.get('mode') === 'manual';
window.__player = {
  total: TOTAL, count: N,
  seek: function (v) { seekTo(v, false); offset = t; t0 = null; },
  step: function (dt) { advance(t + dt); hud(); return { t: t, idx: idx }; },
  get t(){ return t; }, get idx(){ return idx; }, get stage(){ return curStage; },
  finish: function(){ this.seek(TOTAL + 0.5); return { t: t, idx: idx }; }
};
window.__ready = true;

let scrubbing = false, t0 = null, offset = 0;
(function(){
  const tr = $('track');
  const pos = e => { const b = tr.getBoundingClientRect();
                     return Math.max(0, Math.min(1, (e.clientX - b.left) / b.width)); };
  tr.addEventListener('pointerdown', e => {
    scrubbing = true; tr.setPointerCapture(e.pointerId);
    seekTo(pos(e) * TOTAL, true); offset = t; t0 = null;
  });
  tr.addEventListener('pointermove', e => {
    if (!scrubbing) return;
    seekTo(pos(e) * TOTAL, true); offset = t; t0 = null;
  });
  tr.addEventListener('pointerup', e => {
    scrubbing = false;
    try { tr.releasePointerCapture(e.pointerId); } catch(_) {}
    offset = t; t0 = null;
  });
})();

if (!MANUAL) {
  reset();
  const loop = now => {
    if (t0 === null) t0 = now;
    if (!scrubbing) advance(offset + (now - t0) / 1000);
    hud(); requestAnimationFrame(loop);
  };
  requestAnimationFrame(loop);
} else {
  reset(); hud();
}
</script>
</body></html>