微件

Spine：修订间差异

来自卡厄思梦境WIKI

下一编辑→
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
3,957次编辑
创建页面，内容为“<includeonly><!-- 开始 Widget 代码 --> <div class="spine-widget-wrapper"> <link rel="stylesheet" href="/spine/spine-player.css"> <div id="spine-player-<!--{$id|default:random}-->" class="spine-player-container" style="width:<!--{$width|escape:'html'|default:'640'}-->px; height:<!--{$height|escape:'html'|default:'480'}-->px;"> </div> <script src="/spine/spine-player.js"></script> <script> (function() { var playerId = 'spine…”
 
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
3,957次编辑
小无编辑摘要
第1行： 第1行：
<includeonly><!-- 开始 Widget 代码 -->
<includeonly>
<div class="spine-widget-wrapper">
<div id="spine-widget-<!--{$id|default:'player'}-->" style="width:<!--{$width|default:'640'}-->px; height:<!--{$height|default:'480'}-->px; background:<!--{$bg|default:'#ffffff'}-->;"></div>
  <link rel="stylesheet" href="/spine/spine-player.css">
 
  <div id="spine-player-<!--{$id|default:random}-->"  
<script src="https://esotericsoftware.com/files/spine-player/3.8/spine-player.js"></script>
      class="spine-player-container"
<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/3.8/spine-player.css">
      style="width:<!--{$width|escape:'html'|default:'640'}-->px; height:<!--{$height|escape:'html'|default:'480'}-->px;">
 
  </div>
<script>
 
(function() {
  <script src="/spine/spine-player.js"></script>
     new spine.SpinePlayer("spine-widget-<!--{$id|default:'player'}-->", {
  <script>
        jsonUrl: "<!--{$json}-->",
  (function() {
        atlasUrl: "<!--{$atlas}-->",
     var playerId = 'spine-player-<!--{$id|default:random}-->';
        animation: "<!--{$animation|default:''}-->",
    var skelUrl = '<!--{$skel|escape:'html'}-->';
        skin: "<!--{$skin|default:'default'}-->",
    var atlasUrl = '<!--{$atlas|escape:'html'}-->';
        backgroundColor: "<!--{$bg|default:'#ffffff'}-->",
    var animation = '<!--{$animation|escape:'html'|default:''}-->';
         alpha: true,
    var skin = '<!--{$skin|escape:'html'|default:'default'}-->';
        viewport: {
    var showControls = <!--{$showControls|default:'true'}-->;
             padLeft: "0%",
   
            padRight: "0%",
    if (!skelUrl || !atlasUrl) {
             padTop: "0%",
      document.getElementById(playerId).innerHTML = '<p style="color:red;">错误：必须指定 skel 和 atlas 参数</p>';
             padBottom: "0%"
      return;
         },
    }
         showControls: true,
   
         scale: parseFloat("<!--{$scale|default:'1'}-->")
    // 等待 DOM 加载完成
     });
    if (document.readyState === 'loading') {
})();
      document.addEventListener('DOMContentLoaded', initPlayer);
</script>
    } else {
      initPlayer();
    }
   
    function initPlayer() {
      try {
         new spine.SpinePlayer(playerId, {
          skelUrl: skelUrl,
          atlasUrl: atlasUrl,
          animation: animation || undefined,
          skin: skin,
          showControls: showControls,
          backgroundColor: '#00000000',
          alpha: true,
          preserveDrawingBuffer: true,
          success: function(player) {
             console.log('Spine player loaded successfully');
          },
          error: function(player, message) {
             console.error('Spine player error:', message);
             document.getElementById(playerId).innerHTML =
              '<p style="color:red;">加载失败: ' + message + '</p>';
          }
         });
      } catch(e) {
         console.error('Spine player exception:', e);
         document.getElementById(playerId).innerHTML =
          '<p style="color:red;">初始化失败: ' + e.message + '</p>';
      }
     }
  })();
  </script>
</div>
</includeonly>
</includeonly>

2025年11月5日 (三) 21:03的版本

检索自“http://cznwiki.com/index.php?title=微件:Spine&oldid=3958”