Snap Build Your Own Block修炼之道-添加自定义类别
Snap Build Your Own Block自我修炼方法:
1、所有的面向对象,其实是对面向过程的抽象过程而已;
2、面对别人的开源项目时,需要找准源头(即项目运行的起点,当然有的是没有的哈,没有起点时,
则按照使用开源项目时,其使用流程,然后一步一步的学习研究);
//+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
在Snap Build Your Own Block中添加自定类别所需要修改的JS文件如下:
JS文件:gui.js、objects.js
Snap Build Your Own Block项目的源头:
snap.html中第28行
-->gui.js 203行,该文件中第207行是IDE_Morph的初始化的工作
应用的常用设置(用户偏好设置)在第214行this.applySavedSettings();中修改
-->gui.js 264行中方法中包含有IDE_Morph建立是一些初始化块的工作,主要代码在
gui.js第282行this.buildPanes();的方法中(gui.js文件第504行);
-->跳转到 this.buildPanes()方法中,包含所有的其他初始化工作,代码如下:
{
this.createLogo();
this.createControlBar();
this.createCategories(); //在gui.js文件中的第939行
this.createPalette();
this.createStage();
this.createSpriteBar();
this.createSpriteEditor();
this.createCorralBar();
this.createCorral();
}
-->gui.js文件中的第939行代码中包含两个内部函数function addCategoryButton、
function fixCategoriesLayout;如果只是添加自定类别则只需关心addCategoryButton;
然后gui.js文件中的第939行代码中找到addCategoryButton被调用的地方(第1031行)
-->在gui.js文件中1031行代码上下解读,跳转到SpriteMorph所在JS文件:objects.js文件中的第1318行
-->在objects.js文件中用字符"categories"查找定位到SpriteMorph.prototype.categories(第6581)再次找到第117行
即可查看到Snap Build Your Own Block固定带有的类别,在这个数组中添加自定义类别,自定义类别的添加,需要
添加在'other'之前,因为在gui.js第1030行的代码可以看出,其是以'other'类作为数组的结束判断标志的;
以下是这一步所涉及到的objects.js文件中的JS代码:
{
SpriteMorph.prototype.categories = //在objects.js文件中第117行
[
'motion',
'control',
'looks',
'sensing',
'sound',
'operators',
'pen',
'variables',
'lists',
'优唯思',
'other' //###好像是作为一个判断数组遍历结束的标志
];
SpriteMorph.prototype.blockColor = { //在objects.js文件中第132行
motion : new Color(74, 108, 212),
looks : new Color(143, 86, 227),
sound : new Color(207, 74, 217),
pen : new Color(0, 161, 120),
control : new Color(230, 168, 34),
sensing : new Color(4, 148, 220),
operators : new Color(98, 194, 19),
variables : new Color(243, 118, 29),
lists : new Color(217, 77, 17),
优唯思 : new Color(217, 117, 17),
other: new Color(150, 150, 150)
};
}
-->在上一步修改完成之后,在objects.js文件第132中,添加同样的字段配置新添加的自定义类别的颜色
这一步是必须的,不要之后代码会运行不成功的,会出现下一下错误:
{
Uncaught TypeError: Cannot read property 'lighter' of undefined
at ToggleButtonMorph.drawEdges (file:///D:/mylearn/t_sourceinsight/snap/widgets.js:761:49)
at ToggleButtonMorph.createBackgrounds (file:///D:/mylearn/t_sourceinsight/snap/widgets.js:694:10)
at ToggleButtonMorph.TriggerMorph.drawNew (file:///D:/mylearn/t_sourceinsight/snap/morphic.js:9182:10)
at ToggleButtonMorph.init (file:///D:/mylearn/t_sourceinsight/snap/widgets.js:557:10)
at new ToggleButtonMorph (file:///D:/mylearn/t_sourceinsight/snap/widgets.js:502:10)
at addCategoryButton (file:///D:/mylearn/t_sourceinsight/snap/gui.js:963:18)
at file:///D:/mylearn/t_sourceinsight/snap/gui.js:1031:13
at Array.forEach (native)
at IDE_Morph.createCategories (file:///D:/mylearn/t_sourceinsight/snap/gui.js:1029:38)
at IDE_Morph.buildPanes (file:///D:/mylearn/t_sourceinsight/snap/gui.js:507:10)
}
最后的效果图:
提示1:
在gui.js文件中第224行代码处this.currentCategory = '优唯思';可以修改打开Snap时默认的选中的类别;
提示2:
如果要为自定类别添加一些默认的子块,其主要涉及修改的也是objects.js文件。
希望看官们,提供点学习别人开源框架的经验,万分感激
我QQ邮箱:1609059186@qq.com;可以相互交流
Snap Build Your Own Block修炼之道-添加自定义类别的更多相关文章
- 《编写高质量代码:Web 前端开发修炼之道》 笔记与读后感
编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...
- 《JS修炼之道》—— 读后总结
本篇是基于<JS修炼之道>的记录性与总结性的文章,这本书从多种框架的角度,讲述了JS开发中的一些实用技巧. 比如Prototype,JQuery,Mootools,YUI,Dojo,Ext ...
- [读书笔记] Web 前端开发修炼之道
原创地址:http://www.cnblogs.com/bnbqian/p/3735565.html 转载请注明出处 今天我们要读的书是Web 前端开发修炼之道 第1章 从网站重构说起 1.1 糟糕的 ...
- ELK修炼之道
看了ELK大半年了,现在就慢慢的总结一下对ELK的理解 参考资料 ELK stack中文指南 Elasticsearch权威指南 官方文档 Elasticsearch基础篇 此篇用于介绍Elastic ...
- Java程序员修炼之道 之 Logging(1/3) - Logback 配置(转)
转自紫风乱写:http://www.blogjava.net/justfly/archive/2014/08/10/416768.html,建议大家去原处学习 写在前面的话: 作为<Java程序 ...
- java程序员修炼之道
今天在论坛里看到了一位工作10年的java大牛总结的java程序员修炼之道,看完后给出的评价是:字字玑珠,深入人心,猛回头,自己一无是处··· 大牛告诉我们应该好好学习与修炼以下知识与技能 Java语 ...
- 《编写高质量代码--Web前端开发修炼之道》读书笔记
前言 这两周参加公司的新项目,采用封闭式开发(项目成员在会议室里开发),晚上加班到很晚,所以没时间和精力写原创博客了,今天就分享下这篇<编写高质量代码--Web前端开发修炼之道>读书笔记吧 ...
- 《程序员修炼之道:从小工到专家》【PDF】下载
<程序员修炼之道:从小工到专家>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196340 内容简介 <程序员修炼之道> ...
- 福利,一张图看懂IT售前工程师修炼之道
职场中的新人如何自我定位? 如何深刻理解IT售前这个职位? 如何从IT售前菜鸟成长为IT售前专家? 推荐这本书<IT售前工程师修炼之道> 本书精华内容 售前的重要性 售前要有逻辑能力 售前 ...
随机推荐
- pandas dataframe 时间字段 diff 函数
pandas pandas 是数据处理的利器,非常方便进行表格数据处理,用过的人应该都很清楚,没接触的可以自行查阅pandas 官网. 需求介绍 最近在使用 pandas 的过程中碰到一个问题,需要计 ...
- 惊呆了!Spring Boot 还能开启远程调试?
持续原创输出,点击上方蓝字关注我 目录 前言 什么是远程调试? 为什么要远程调试? 什么是JPDA? 如何开启调试? transport server suspend address onthrow ...
- mysql分组函数与查询
Ⅰ.分组函数的分类: max():最大值 min():最小值 sum():和 avg():平均值 count():计算非空的个数 这些都是通用的,sqlserver.oracle.mysql都是一样的 ...
- echarts legend 图例文字闪烁显示
最近同事小夏遇到一个需求:客户要求echarts图表上指定的图例文字闪烁显示. 先放一张图: 客户要求:待处理字样要闪动显示. 小夏一番百度之后,求助于我:快来看看,怎么有客户提这种百度都百度不到答案 ...
- [Luogu P3986] 斐波那契数列 (逆元)
题面 传送门:https://www.luogu.org/problemnew/show/P3986 Solution 这是一道很有意思的数论题. 首先,我们可以发现直接枚举a和b会T的起飞. 接下来 ...
- NOIP 2013 P1967 货车运输
倍增求LCA+最大生成树 题目给出的是一张图,在图上有很多算法无法实现,所以要将其转化为树 题中可以发现货车的最后的载重量是由权值最小的一条边决定的,所以我们求最大生成树 求完最大生成树后我们得到一个 ...
- Vue的生命周期--代码片段
Vue 实例有一个完整的生命周期,也就是从开始创建. 初始化数据. 编译模板. 挂载 Dom. 渲染→更新→渲染. 销毁等一系列过程,我们称这是 Vue 的生命周期.通俗说就是 Vue 实例从创建到销 ...
- Android NurReaderView 阅读器 (字符串-.txt文件)
有些地方还没配置好.2/3天后在更新.... 功能 支持字符串和<.txt>文件 文字自动分各个页面 支持从右到左-(从右边开始的语言.比如维吾尔语哈扎克语...外国的阿拉伯语等) 支持自 ...
- Python - Git仓库忽略提交规则 & .gitignore配置
Git 忽略文件提交的方法 有三种方法可以实现忽略Git中不想提交的文件. 在Git项目中定义 .gitignore 文件 这种方式通过在项目的某个文件夹下定义 .gitignore 文件,在该文件 ...
- mybatis print sql config
log4j.rootLogger=DEBUG, Console #Console log4j.appender.Console=org.apache.log4j.ConsoleAppender log ...