标签：原图 展示 舞台 scratch 记录 默认 3.0 svg md5
素材弹出框组件src\components\library\library.jsx，组件使用时传入的数据格式解析如下
[
{
'name': 'Abby',
'md5': 'afab2d2141e9811bd89e385e9628cb5f.svg',
'type': 'sprite', // 素材类型
'tags': [// 素材标签，即素材的子类型
'people',
'person',
'drawing'
],
'info': [960, 720, 2], // 原图规格，以及原图和展示图片的比例
'json': {// 包含内容
'objName': 'Abby',
'sounds': [// 声音
{
'soundName': 'pop',
'soundID': -1,
'md5': '83a9787d4cb6f3b7632b4ddfebf74367.wav',
'sampleCount': 258,
'rate': 11025,
'format': ''
}
],
'costumes': [// 造型
{
'costumeName': 'abby-a',
'baseLayerID': -1,
'baseLayerMD5': 'afab2d2141e9811bd89e385e9628cb5f.svg',
'bitmapResolution': 1,
'rotationCenterX': 31,
'rotationCenterY': 100
}
// ......
],
'currentCostumeIndex': 0, // 添加到舞台时初始化展示的造型
'scratchX': -20,
'scratchY': -38,
'scale': 1,
'direction': 90,
'rotationStyle': 'normal',
'isDraggable': false,
'visible': true,
'spriteInfo': {}
}
}
]
View Code
各种素材的数据个json格式
// 造型
const costumeTpl = {
svg: {
name: 'Abby-a',
md5: 'afab2d2141e9811bd89e385e9628cb5f.svg',
type: 'costume', // 类型，costume:造型
tags: [],
info: [
31, // svg图时，为展示在舞台上的宽度的一半
100, // svg图时，为展示在舞台上的高度的一半
1// 位图分辨率，svg图时，默认为1
]
},
other: {
name: 'Amon',
md5: '60f720956ab1840431dcf0616ce98f14.png',
type: 'costume',
tags: [],
info: [
348, // 非svg图时，为展示在舞台上的宽度的一倍
324, // 非svg图时，为展示在舞台上的宽度的一倍
2// 位图分辨率，非svg图时，默认为2。展示宽度：宽度/2
]
}
};
// 角色
const spriteTpl = {
name: 'Abby',
md5: 'afab2d2141e9811bd89e385e9628cb5f.svg',
type: 'sprite', // 类型，即一级大类型，sprite：角色， backdrop:背景
tags: [],
info: [
0, // 默认为0
4, // 造型数量
1// 声音数量
],
json: {
objName: 'Abby',
sounds: [],
costumes: [
{
costumeName: 'abby-a', // 造型名称
baseLayerID: -1, // 在舞台上展示层级，越大层级越高，展示就越在前，默认为 -1
baseLayerMD5: 'afab2d2141e9811bd89e385e9628cb5f.svg',
bitmapResolution: 1, // 位图分辨率,图片的一个属性， svg图默认为1
rotationCenterX: 31, // 图片展示在舞台时旋转中心X轴位置, 对于svg图片时为展示宽度的一半（一般为原图的一半），整数
rotationCenterY: 100 // 图片展示在舞台时旋转中心Y轴位置，对于svg图片时图片为展示高度的一半（一般为原图的一半），整数
}
],
currentCostumeIndex: 0, // 当前造型的下标，默认为0
scratchX: -20, // 目前不清楚作用，保留
scratchY: -38, // 目前不清楚作用，保留
scale: 1, // 舞台展示缩放比例，默认为1
direction: 90, // 方向，默认顺时针90度
rotationStyle: 'normal', // 旋转风格，默认"normal"
isDraggable: false, // 是否可以拖动，默认false
visible: true, // 默认在舞台上是否可见，默认true
spriteInfo: {}// 默认{}
}
};
View Code
// 背景
const backdropTpl = {
name: 'Arctic',
md5: '67e0db3305b3c8bac3a363b1c428892e.png', // 可以是png/svg格式
type: 'backdrop', // 类型，即一级大类型，sprite：角色， backdrop:背景
tags: [// 标签，即二级类型
'outdoors',
'cold',
'north pole',
'south pole',
'ice',
'antarctica',
'robert hunter'
],
info: [
960, // 图片原图宽度
720, // 图片原图高度
2// 位图分辨率, 展示宽度和高度是： 图片宽度/位图分辨率。对于所有图片都是一样，包括svg
]
};
View Code
// 声音
sound = {
"name": "A Bass",
"md5": "c04ebf21e5e19342fa1535e4efcdb43b.wav",
"sampleCount": 28160,// 声音样本计数，可以认为时声音的id
"rate": 22050,// 声律，一个声音属性
"format": "",// 声音压缩算法，默认为"",部分声音为"adpcm"
"tags": [
"music",
"instruments",
"notes"
]
}
View Code
scratch的作品保存到电脑流程
程序在scratch-vm中收集程序的每一个舞台和角色的每一个造型保存到costumeDescs中； 角色和舞台的声音都收集到soundDescs中，整个舞台动画的配置项都收集到projectJson中，然后用vm.saveProjectSb3方法使用JSZip压缩下载到本地（每一个图像和声音有单独的文件）。 下载下来的文件如下.png)
scrach从本地电脑上传sb3文件流程
用户选择文件时，进入程序监听函数handleChange，更改一状态，使用FileReader读取本地文件，当文件准备完毕调用onload解析，里面调用scratch-vm的vm.loadProject解析，完成项目加载。
标签：原图,展示,舞台,scratch,记录,默认,3.0,svg,md5 来源： https://www.cnblogs.com/chuaWeb/p/12546538.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。