scratch3.0自定义logo

本文将把scratch3.0的logo替换为我自己的logo。
最终效果图：

scratch3.0是基于react的一个项目。整个项目就像一颗大树，顺着入口进去总能找到你要找的地方。
本次我们需要替换的是logo，那么我们就先找到logo这个dom。项目入口文件是src/playground/index.jsx。这个文件里面导入了render-gui.jsx，在render-gui.jsx我们就可以看到整个项目了，如下图所示：

后面所有的二次开发几乎所有都需要从这个地方进去慢慢展开。如果进入url是默认的话，那么这个simulateScratchDesktop的bool值则为false，这里的三目最终结果就是后面的那部分了。

通过WrappedGui我们可以找到src/containers/gui.jsx文件。gui.jsx文件是在containers目录下，那么这个containers是什么呢？顾名思义，containers就是一些容器，正是这些一个个容器融合在一起最终组成了整个scratch项目。而这里的gui.jsx正是那个最大的容器，它包含了其他的容器。

我们进入gui.jsx中会发现属于样式的代码就那么几行，其中引入了GUIComponent这个component（组件），而这个组件是在src/components/gui/gui.jsx这里。那么containers下面的容器和components下面的组件它们有什么关系呢？纵观整个scratch项目会发现，components下面是抽象出来的一个个的组件供容器引用，而容器给组件提供了数据。

进入src/components/gui/gui.jsx文件，可以看到很多样式，仔细看就会发现它分别对应了界面的一部分，而其中的MenuBar则对应了顶部的这个菜单栏。代码如下：

我们进入到MenuBar这个dom，可以找到src/components/menu-bar.jsx，说明这个MenuBar也是个组件，要用的话需要传相应的参数进去。我们可以看到上图gui在引用的时候确实也传了很多参数进去。

现在我们看到menu-bar的样式，下面是部分截图：

通过分析样式我们可以知道上图的324行-332行就是描述的我们项目左上角的logo。那么接下来就需要修改它了。既然找到它那么就有无数种办法来修改它，这里只说两种方式：

第一种是暴力一点儿的方式，我们把我们的logo文件先拷贝到src/components/menu-bar/目录下面。然后在menu-bar.jsx文件引入这个文件，如下图：

然后在333行引入，如下图：

开发环境的话保存后我们即可看到效果图。
第二种方式优雅一点儿，333行代码本来src=this.props.logo，从这个代码可以发现是从传入menu-bar这个组件的参数中获取了logo这个属性，也就是说谁引入menu-bar谁就可以定义这个logo，这确实是一种低耦合的方式。前面我们说到gui引入menu-bar传入了很多参数，其中就有logo，但是这个logo在gui里也好像没初始化。menu-bar它设置了允许传入了哪些参数，我们回过头再看看menu-bar对传入参数的要求，在menu-bar的699行-758行规定了传入参数及其类型，在menu-bar的760行-763设置了一些默认参数，可以看到这里就有logo的默认参数，是scratchLogo，而scratchLogo是在menu-bar引入一个svg，所以我们可以替换这个svg或者修改这个默认值，最终也可以替换 logo
。
废话有点儿多了，一个简单的替换logo居然写了这么多没用的，抱拳！

scratch3开发交流qq群:892705966

scratch3.0自定义logo相关推荐

scratch3.0 二次开发-基本介绍(第一章)
scratch3.0系列章节列表 scratch3.0 二次开发-基本介绍(第一章) scratch3.0二次开发运行scratch-gui项目并了解工程结构(第二章) scratch3.0二次自定义 ...
视频教程-沐风老师Scratch3.0快速入门视频课程-其他
沐风老师Scratch3.0快速入门视频课程沐风课堂创始人,专栏作家,独立媒体人,资深互联网从业者. 沐风老师 ¥20.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 ...
via自定义搜索引擎代码_VIA浏览器自定义logo设置
via浏览器比较小巧,该有的功能也都有. 自定义logo可以用html代码 1.文字logo,文字大小,样式都可以自己调整姿势小王子 2.天气logo a.url+"?"+c,a ...
Scratch3.0新手入门教程
Scratch是由MIT(麻省理工学院)米切尔·瑞斯尼克(Mitch Resnick)教授带领的"终身幼儿园团队"(Lifelong Kindergarten Group)开发的一 ...
Android中自定义logo二维码绘制（仿微信QQ二维码）
自定义Logo二维码绘制(追加上一篇简单二维码绘制) 1.实现思路 2.实现(新增拍照以及相册上传logo以及分享和保存二维码) 简单绘制二维码地址: Android 实现简单绘制二维码(包含带LOG ...
Scratch3.0——助力新进程序员理解程序(十二、画笔)
Scratch3.0--助力新进程序员理解程序(十二.画笔) 目录 Scratch3.0--助力新进程序员理解程序(十二.画笔) 前言环境下载地址安装说明 1.菜单栏 2.功能栏 3.代码区 4 ...
Scratch3.0——助力新进程序员理解程序(十一、自制积木)
Scratch3.0--助力新进程序员理解程序(十一.自制积木) 目录 Scratch3.0--助力新进程序员理解程序(十.自制积木) 前言环境下载地址安装说明 1.菜单栏 2.功能栏 3.代码 ...
Scratch3.0——助力新进程序员理解程序(难度案例三、五子棋双人对战-电脑需要AI写不出来)
Scratch3.0--助力新进程序员理解程序(难度案例三.五子棋双人对战-电脑需要AI写不出来) 前言一般来说,针对6-18岁的少年儿童开展的编程教育,现在,最常见的形式是线上和线下模式相结合的课 ...
小程序生成长图（预览，不限高度）+小程序码+小程序码中间logo换成自定义logo
上条博客已经介绍了如何云调用生成小程序码,链接地址: https://blog.csdn.net/mingjuna2010/article/details/92796711 这条博客我们来介绍小程序中 ...

scratch3.0自定义logo

scratch3.0自定义logo相关推荐

最新文章

热门文章