微件

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次编辑
小无编辑摘要
 
（未显示同一用户的3个中间版本）
第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}-->"  
<link rel="stylesheet" href="https://unpkg.com/@esotericsoftware/spine-player@4.1.*/dist/spine-player.css">
      class="spine-player-container"
 
      style="width:<!--{$width|escape:'html'|default:'640'}-->px; height:<!--{$height|escape:'html'|default:'480'}-->px;">
<script>
  </div>
(function() {
 
     var widgetId = "spine-widget-<!--{$id|default:'player'}-->";
  <script src="/spine/spine-player.js"></script>
     var config = {
  <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%",
            padTop: "0%",
            padBottom: "0%"
        },
        showControls: true,
        scale: parseFloat("<!--{$scale|default:'1'}-->")
    };
      
      
     if (!skelUrl || !atlasUrl) {
     function initSpinePlayer() {
      document.getElementById(playerId).innerHTML = '<p style="color:red;">错误：必须指定 skel 和 atlas 参数</p>';
        if (typeof spine !== 'undefined' && spine.SpinePlayer) {
      return;
            new spine.SpinePlayer(widgetId, config);
        } else {
            console.error('Spine Player library not loaded');
        }
     }
     }
      
      
     // 等待 DOM 加载完成
     // 检查是否已加载 Spine 库
     if (document.readyState === 'loading') {
     if (typeof spine !== 'undefined') {
      document.addEventListener('DOMContentLoaded', initPlayer);
        initSpinePlayer();
     } else {
     } else {
      initPlayer();
        // 动态加载 Spine Player 脚本
        var script = document.createElement('script');
        script.src = 'https://esotericsoftware.com/files/spine-player/3.8/spine-player.js';
        script.onload = function() {
            initSpinePlayer();
        };
        script.onerror = function() {
            console.error('Failed to load Spine Player library');
        };
        document.head.appendChild(script);
     }
     }
   
})();
    function initPlayer() {
</script>
      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:12的最新版本

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