web端显示spine动画

news2025/1/6 9:22:32

 一、说明

(1)这边使用的spine版本是3.8.99

spine包含3个部分,可以将三个文件上传到cdn,三个文件放在相同的目录中

test.atlas 、 test.json 、test.png

(2)pixi.js - v7.0.4

https://github.com/pixijs/pixijs

(2)pixi-spine - v4.0.4

https://github.com/pixijs-userland/spine

如果找不到pixi-spine文件可以在工程中安装 npm i pixi-spine然后在node_modules里面找到对应的@pixi-spine包找到js文件

一、在html中引入 

<script src="/assets/js/pixi.min.js"></script>
<script src="/assets/js/pixi-spine.js"></script>

二、在组件中使用

<template>
  <div class="canvas-box">
    <canvas ref="canvasRef"></canvas>
  </div>
</template>
<script lang="ts" setup>
const canvasRef = ref();
const props = defineProps({
  json: {
    type: String,
    default: () => "",
  },
});

const showAnimate = (json: string) => {
  window.PIXI.Assets.load(json).then((resources: any) => {
    // 从骨骼数据中读取宽高
    const { width, height, animations } = resources.spineData;
    // 绑定canvas画布,设置宽高
    const app = new window.PIXI.Application({
      view: canvasRef.value, // 设置canvas节点  `#canvas`
      backgroundAlpha: 0, // 背景透明
      width: width,
      height: height,
    });
    // 创建spine动画对象并添加到画布中
    let animation = new window.PIXI.spine.Spine(resources.spineData);
    app.stage.addChild(animation);
    // 设置动画位置为画布中心
    animation.x = width / 2;
    animation.y = height / 2;
    // 循环播放动画
    animation.state.setAnimation(0, animations[0].name, true);
  });
};

showAnimate(props.json);
</script>

<style lang="scss" scoped>

</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2270981.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MyBatis-plus sql拦截器

因为业务需求&#xff0c;重新写了一套数据权限。项目中用的是mybtis-plus&#xff0c;正好MyBatis-Plus提供了插件数据权限插件 | MyBatis-Plus&#xff0c;那就根据文档来实现这个需求。 实现&#xff1a; 实现MultiDataPermissionHandler 首先创建MultiDataPermissionHan…

硬件-射频-PCB-常见天线分类-ESP32实例

文章目录 一&#xff1a;常见天线1.1 PCB天线①蓝牙模块的蛇形走线-天线②倒F天线-IFA&#xff1a;③蛇形倒F天线-MIFA④立体的倒F天线-PIFA 1.2 实例示意图1.21 对数周期天线(LPDA):1.22 2.4GHZ的八木天线&#xff1a;1.23 陶瓷天线&#xff1a;1.24 外接天线&#xff1a; 二&…

Gitlab-runner 修改默认的builds_dir并使用custom_build_dir配置

gitlab-runner 修改默认的builds_dir并使用custom_build_dir配置 1. 说明2. 实操&#xff08;以docker执行器为例&#xff09;2.1 修改默认的builds_dir2.1.1 调整gitlab-runner的配置文件2.1.2 CI文件 2.2 启用custom_build_dir2.2.1 调整gitlab-runner的配置文件2.2.2 CI文件…

WPF+Prism View与ViewModel绑定

1、开发环境&#xff0c;Win10VS2022.NET8Prism.DryIoc&#xff08;9.0.537&#xff09;或Prism.Unity。 2、通过NuGet安装Prism.DryIoc&#xff08;9.0.537&#xff09;或Prism.Unity。 2.1、创建ViewModels文件夹用于存放ViewModel文件、创建Views文件夹存放View文件。 将…

av1学习笔记(一):码流的整体框架

av1学习笔记&#xff08;一&#xff09;&#xff1a;码流的整体框架 目录 av1学习笔记&#xff08;一&#xff09;&#xff1a;码流的整体框架1. 码流结构分析&#xff1a;2. OBU信息分析2.1 obu_header2.2 obu_size2.3 drop_obu2.4 sequence_header_obu2.5 temporal_delimiter…

I2C(一):存储器模式:stm32作为主机对AT24C02写读数据

存储器模式&#xff1a;在HAL库中&#xff0c;I2C有专门对存储器外设设置的库函数 I2C&#xff08;一&#xff09;&#xff1a;存储器模式的使用 1、I2C轮询式写读AT24C02一页数据2、I2C轮询式写读AT24C02多页数据3、I2C中断式写读AT24C02一页数据4、I2C使用DMA式写读AT24C02一…

Ansys Discovery 中的网格划分方法:探索模式

本篇博客文章将介绍 Ansys Discovery 中可用于在探索模式下进行分析的网格划分方法。我们将在下一篇博客中介绍 Refine 模式下的网格划分技术。 了解 Discovery Explore 模式下的网格划分 网格划分是将几何模型划分为小单元以模拟系统在不同条件下的行为的过程。这是通过创建…

MySQL秘籍之索引与查询优化实战指南

MySQL秘籍之索引与查询优化实战指南 目录 MySQL秘籍之索引与查询优化实战指南相关阅读索引相关EXPLAIN 版本 1. 初级篇1.1 【练体术】基础1.1.1 库操作1.1.1 表操作创建一个表增加表字段 1.1.2 增删改插入一条数据删除一条数据更新一条数据库 1.1.3 查询查询所有数据条件查询&a…

MySQL8.0复制原理和部署配置步骤

1. mysql 主从复制原理 在从库上执行change master to&#xff1b;会将主库的信息保存到从库中的master.info文件中在从库执行start slave;开启io_thread, sql_thread线程;io_thread工作&#xff1b;io_thread通过master.info文件中主库的连接信息去连接主库&#xff1b;连接成…

智联视频超融合平台:电力行业的智能守护者

文章目录 一、远程实时监控与设备状态监测二、提高应急响应能力三、实现无人值守与减员增效四、保障电力设施安全与防范外部破坏五、提升电网运行管理效率与决策科学性六、助力电力企业数字化转型与智能化发展七、智联视频超融合平台 在当今数字化浪潮下&#xff0c;视频联网平…

上传本地项目或文件到SVN服务器(图片讲解,超简单)

上传本地项目或文件到SVN服务器&#xff08;图片讲解&#xff0c;超简单&#xff09; 1、使用TortoiseSVN2、输入SVN远程仓库地址3、添加文件或文件夹 需求&#xff1a;将本地的文件上传到SVN服务器上指定路径。前提&#xff1a;已经安装好TortoiseSVN 1、使用TortoiseSVN 右…

单周期CPU电路设计

1.实验目的 本实验旨在让学生通过设计一个简单的单周期 CPU 电路&#xff0c;深入理解 RISC-V 指令集的子集功能实现&#xff0c;掌握数字电路设计与实现的基本流程&#xff0c;包括指令解析、部件组合、电路设计以及功能仿真等环节&#xff0c;同时培养verilog HDL编程能力和…

ROS功能包开机自启动(2步解决)

为了实现小车在开机后能自动启动相关功能模块需要解决两个问题 1.准备启动脚本文件加载对应的rosnode和roslaunch&#xff0c;整合相关节点按需要顺序进行&#xff0c;防止报错 2.设置开启启动脚本相关内容 既然是自启动&#xff0c;不能避免USB数据传输的一些问题&#xff…

【ArcGISPro/GeoScenePro】解决常见的空间参考和投影问题

修复空间参考缺失的图像 数据 https://arcgis.com/sharing/rest/content/items/535efce0e3a04c8790ed7cc7ea96d02d/data 查看属性坐标 查看属性范围 范围值并不是零或接近于零。 这意味着栅格具有范围,因此其已正确进行

NLP 中文拼写检测纠正论文-08-Combining ResNet and Transformer

拼写纠正系列 NLP 中文拼写检测实现思路 NLP 中文拼写检测纠正算法整理 NLP 英文拼写算法&#xff0c;如果提升 100W 倍的性能&#xff1f; NLP 中文拼写检测纠正 Paper java 实现中英文拼写检查和错误纠正&#xff1f;可我只会写 CRUD 啊&#xff01; 一个提升英文单词拼…

【paddle】初次尝试

张量 张量是 paddlepaddle&#xff0c; torch&#xff0c; tensorflow 等 python 主流机器学习包中唯一通货变量&#xff0c;因此应当了解其基本的功能。 张量 paddle.Tensor 与 numpy.array 的转化 import paddle as paddle import matplotlib.pyplot as plt apaddle.to_t…

如何在谷歌浏览器中使用屏幕录制功能

在日常使用电脑的过程中&#xff0c;我们经常会遇到需要记录屏幕操作的情况。无论是制作教学视频、保存游戏过程还是记录会议内容&#xff0c;谷歌浏览器的屏幕录制功能都能帮助我们轻松实现这些需求。那么&#xff0c;如何在谷歌浏览器中启用并使用屏幕录制功能呢&#xff1f;…

万里数据库GreatSQL监控解析

GreatSQL是MySQL的一个分支&#xff0c;专注于提升MGR&#xff08;MySQL Group Replication&#xff09;的可靠性及性能。乐维监控平台可以有效地监控GreatSQL&#xff0c;帮助用户及时发现并解决潜在的性能问题。 通过在GreatSQL服务器上安装监控代理&#xff0c;收集数据库性…

APM 3.0.2 | 聚合B站、油管和MF的音乐播放器,支持歌词匹配

APM&#xff08;Azusa-Player-Mobile&#xff09;是一款基于B站的第三方音频播放器&#xff0c;现已扩展支持YouTube Music、YouTube、本地音乐、AList和MusicFree等平台。它不仅提供视频作为音频播放&#xff0c;还具备排行榜、分区动态等功能。用户可以通过添加Alist地址接入…

HTML——61. 单行文本框和密码输入框(主讲input元素的type属性)

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>单行文本框和密码输入框</title></head><body><!--input元素的type属性&#xff1a;(必须要有)--> <!--单行文本框:1.type"text"2.可…