• scratch-ui使用自己资源文件


    scratch-ui从官方git下载启动之后,角色和舞台背景图片资源都无法加载,因为scratch的资源使用的是cdn服务器,而且cdn服务器h国内被墙了,要想办法解决这些资源的问题

    资源的路径形如:static/assets/de6a2ca491eb20b2b669e732e84ce7af.png

    具体的全路径如:https://cdn.assets.scratch.mit.edu/internalapi/asset/0015433a406a53f00b792424b823268c.png/get

    从思路上来说,使用一个爬虫把这些图片爬下来就可以了

    1.获取scratch所有的资源路径名称

    2.爬虫所有的资源文件

    3.修改scratch资源路径到自己的资源路径

    一.获取scratch所有的资源路径名称

    1在scratch-guisrcliblibraries目录下有四个*.json文件里面记录了资源的配置信息

    1.sprites.json

    2,sounds.json

    3.costumes.json

    4.backdrops.json

    二.爬虫所有的资源文件

    参考这里,有一个朋友写了一个python脚本来爬虫所有的资源(需要FQ)

    三.修改scratch资源路径到自己的资源路径

    1.资源url分析

    对于选择舞台背景时候弹出的多个预览背景图片,每个图片的地址格式是:https://cdn.assets.scratch.mit.edu/internalapi/asset/d3344650f594bcecdf46aa4a9441badd.svg/get/

    选定了背景后再把背景图片再加载到舞台上的时,使用图片的地址格式是:https://assets.scratch.mit.edu/internalapi/asset/d3344650f594bcecdf46aa4a9441badd.svg/get/

    前者url比后者url多了一个cdn

    上面是背景的研究,对于角色造型和声音的资源也是一样的,所以说对于静态资源

    预览的缩略图地址格式是:https://cdn.assets.scratch.mit.edu/internalapi/asset/{MD5}.svg/get/

    选中以后实际资源地址是:https://assets.scratch.mit.edu/internalapi/asset/{MD5}.svg/get/

    结论:

    缩略图地址和选中后的资源地址不一样,两个cdn服务器,内容都是一样的,为什么?

     2.找到scratch-ui中加载资源的代码

    在vscode中整个项目搜索关键字"assets.scratch.mit.edu",可以搜到两个.jsx文件,srccontainerslibrary-item.jsx和srclibproject-fetcher-hoc.jsx

    srccontainerslibrary-item.jsx代码在line:109

        render () {
            const iconMd5 = this.curIconMd5();
            const iconURL = iconMd5 ?
                `https://cdn.assets.scratch.mit.edu/internalapi/asset/${iconMd5}/get/` :
                this.props.iconRawURL;
            return (
                <LibraryItemComponent
                    bluetoothRequired={this.props.bluetoothRequired}
                    ...
          }

    srclibproject-fetcher-hoc.jsx代码在line:133

        ProjectFetcherComponent.defaultProps = {
            assetHost: 'https://assets.scratch.mit.edu',
            projectHost: 'https://projects.scratch.mit.edu'
        };

    3. 写一个服务提供资源服务

    const express = require("express");
    const path = require("path");
    const fs = require("fs");
    
    const app = express();
    
    app.get("*", function (req, res, next) {
      //设置跨域访问
      res.header("Access-Control-Allow-Origin", "*");
      res.header("Access-Control-Allow-Headers", "X-Requested-With");
      res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
      res.header("X-Powered-By", " 3.2.1");
      res.header("Content-Type", "application/json;charset=utf-8");
    
      next();
    });
    
    app.get("/internalapi/asset/*/get/", function (req, res) {
      let url = req.url.replace("/get/", "");
      file = path.join(process.cwd(), url);
      if (fs.existsSync(file)) {
        res.sendFile(file);
      } else {
        res.end("no file " + url);
      }
    });
    
    const port = 8603;
    app.listen(port, function () {
      console.log("sever listen to : " + port);
    });

    也修改scratch-ui中两个地方对应的的资源路径

    首先,srccontainerslibrary-item.jsx中

        render () {
            const iconMd5 = this.curIconMd5();
            const iconURL = iconMd5 ?
                // `https://cdn.assets.scratch.mit.edu/internalapi/asset/${iconMd5}/get/` :
                `http://localhost:8603/internalapi/asset/${iconMd5}/get/` :
                this.props.iconRawURL;
            return (
                <LibraryItemComponent
            ...

    其次,srclibproject-fetcher-hoc.jsx中

        ProjectFetcherComponent.defaultProps = {
            // assetHost: 'https://assets.scratch.mit.edu',
            assetHost: 'http://localhost:8603',
            projectHost: 'https://projects.scratch.mit.edu'
        };

    图片和声音加载可以了,但是有一个问题,在精灵选择时显示的缩略图界面,精灵的图片显示不正常,但是选择了精灵以后舞台下面的精灵图片显示正常

    作者    :秋时

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。

  • 相关阅读:
    LG P2473 [SCOI2008]奖励关
    三分法
    P2521 [HAOI2011]防线修建
    金融分析-ipython
    vue --webpack的使用
    Vue-npm命令解析
    Vue-router VUE路由系统
    爬虫--总目录
    爬虫-scrapy框架
    爬虫-性能相关- twisted-tornado
  • 原文地址:https://www.cnblogs.com/Netsharp/p/14450983.html
Copyright © 2020-2023  润新知