界面修改

安装

下载scratch-gui项目，并进入目录，执行下面的命令安装依赖包。

git clone https://github.com/LLK/scratch-gui.git
cd scratch-gui
npm install

目录结构

├── build                    # 编译后的文件夹
│   ├── static               # 静态资源
│   ├── chunks               # scratch核心加载器
│   ├── index.html           # scratch编辑器
│   ├── player.html          # scratch播放器
│   ├── lib.min.js           # scratch核心
├── src
│   ├── components           # UI组件
│   ├── containers           # 容器组件，承载容器组件业务逻辑
│   ├── css                  # 全局通用css
│   ├── examples             # 集成测试用例
│       ├── extensions       # 拓展案例
│   ├── lib                  # 插件及高阶组件
│       ├── audio            # 声音插件
│       ├── backpack         # 背包插件
│       ├── default-project  # 默认项目
│       ├── libraries        # 素材库相关
│       ├── video            # 视频模块
│   ├── playground           # 编译后页面的模版
│   ├── reducers             # 全局状态控制
├── test                     # 测试用例
├── translations             # 翻译库
├── README.md
└── package.json
└── webpack.config.js

启动

执行下面命令，启动项目。

npm run start

启动成功后，可以看到控制台输出Compiled successfully.，表示编译完成。

浏览器输入http://localhost:8601/，即可访问项目，如下。

更改Logo

在src/components/memu-bar/文件夹上传你的Logo图，然后在menu-bar.jsx中找到替换掉。

# 替换成你的logo图
import scratchLogo from './scratch-logo.png';

然后，我们还能找到另外一个地方也用了logo图，找到并替换。

更改主题色

找到css/color.css文件，找到如下参数，更改即可。

修改菜单栏

菜单栏的有些功能，我们不需要，可以隐藏起来。

主要改动的是menu-bar.jsx文件，而且还是MenuBar组件的render()方法。

对于不需要的组件，我们完全可以把代码注释或者删除掉。

【Scratch二次开发】01-界面修改相关推荐

20150411--Dede二次开发-01
20150411--Dede二次开发-01 目录一.目前市场流行的电子商城系统 1 二.ecshop的介绍 1 三.安装 2 四.echsop 的目录结构 5 五.分析ecshop里面程序的架构 5 ...
c# cad二次开发 ribbon界面给CAD加个菜单栏
c# cad二次开发 ribbon界面给CAD加个菜单栏 using System; using System.Collections.Generic; using System.Text; usi ...
scratch二次开发(一)
一.scratch模块 ## scratch-vm 虚拟机解析加载序列化项目文件.扩展功能实现.根据相应事件渲染舞台### scratch-audio 声音引擎解析.播放声音### scratch-b ...
Revit二次开发之批量修改族名称及族类型名称
昨天是参加工作整一年的好日子,在这一年中逐步开始接触C#和Revit二次开发,困扰和BUG伴随着整个学习过程.由于Revit二次开发的资料和课程不多,很多情况下都是依靠博客.技术贴和QQ群里的大神等方 ...
Revit二次开发01——环境搭建（附Revit 2018 + Visual Studio 2017下载地址）
目录 1.准备工作 1.1 安装Revit 2018 1.2 安装Revit 2018 SDK 1.3 安装Visual Studio 2017 2.配置Addin Manager 3.测试 3.1 ...
【工业串口和网络软件通讯平台(SuperIO)教程】五.二次开发图形显示界面
SuperIO相关资料下载:http://pan.baidu.com/s/1pJ7lZWf 1.1 图形显示接口的作用用于显示采集终端设备的数据,可以把不同类型设备的数据以多种形式集成显示在不 ...
【Revit二次开发-01】
一.C#开发相关资料 1.周婧袆出品相关资料(淘宝有售) 视频地址:视频教程可以在YouTube中搜索"Revit二次开发"找到课件地址:链接:https://pan.baidu ...
【Scratch二次开发】06-修改界面字体大小
字体调节 Scratch在1.0和2.0的版本中,都支持字体调节.但是在3.0版本中,这个功能消失了.而且,在分辨率低的情况下,界面上的中文文字看不清楚.下面,我们就来解决这个问题. 菜单栏文字对于 ...
【Scratch二次开发】05-翻译国际化
翻译国际化 Scratch作为一个全球软件,提供了很多国家的语言版本.但是在国内,我们主要使用的还是英语和中文为主,其他的小语种,我们完全可以不用加载. scratch-I10n scratch-gu ...

【Scratch二次开发】01-界面修改