scratch3.0自定义logo

最新推荐文章于 2023-01-25 20:33:58 发布

原创

最新推荐文章于 2023-01-25 20:33:58 发布 · 2.4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#scratch3.0 #scratch3.0二次开发 #二次开发 #react #替换logo

本文详述如何在scratch3.0中自定义logo，通过解析项目的源码结构，找到logo所在的DOM元素，并探讨两种替换方法：直接修改组件内部样式或通过组件参数传递自定义logo。同时提到了相关开发交流QQ群。

本文将把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下面是抽象出来的一个个的组件供容器引用，而容器给组件提供了数据

最低0.47元/天解锁文章