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售前工程师修炼之道> 本书精华内容 售前的重要性 售前要有逻辑能力 售前 ...
随机推荐
- 签到功能,用 MySQL 还是 Redis ?
现在的网站和app开发中,签到是一个很常见的功能,如微博签到送积分,签到排行榜. 如移动app ,签到送流量等活动. 用户签到是提高用户粘性的有效手段,用的好能事半功倍! 下面我们从技术方面看看常 ...
- MySQL全面瓦解5:数据操作-DML
说明 DML(Data Manipulation Language)数据操作语言,是指对数据库进行增删改的操作指令,主要有INSERT.UPDATE.DELETE三种,代表插入.更新与删除,这是学习M ...
- 4g数据无线传输终端dtu
将串口数据转换为IP数据或将IP数据转换为串口数据并且进行传输的过程被称为数据透明传输,利用4G网络进行数据透明传输的设备被称为4G网络无线数据双向透明传输终端,也可以称为4G DTU,现在市面上大多 ...
- K8S环境快速部署Kafka(K8S外部可访问)
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- numpy的统计分析
一.排序 间接排序(argsort,lexsort) 根据一个或多个数据集进行排序 1.Sort() --对数值直接进行排序 a.一维排序 b.二维排序 c.axis的认知 2.argsort() - ...
- 2020提高组模拟赛7 StormWind
StormWind 中文 切换语言(Change Language) 时间:4s 空间:512M 题目描述: 风暴城建造的防线错综复杂,可以抽象成一个有$n$个点$m$条边的有向拓扑图,暴风城的最 ...
- 一步一步实现直播软件源码的RTMP推流流媒体服务
第一步:准备工具 OBS推流工具下载及配置可以参见:OBS推流工具 第二步:安装流媒体服务 Windows/Linux系统环境中搭建直播流媒体服务 极速安装,下载解压一键启动即可,支持Windows和 ...
- C# 集合类(一)动态数组ArrayList
C# 集合类自己经常用到: 数组(Array).动态数组(ArrayList).列表(List).哈希表(Hashtable).字典(Dictionary),对于经常使用的这些数据结构,做一个总结,便 ...
- 完全卸载node.js
1.通过控制面板卸载node.js 2.删除安装所在文件夹下的nodejs文件夹[我的是 C:\Program Files\nodejs] 3.删除C:\Users\xxx(自己电脑的名字)下的.np ...
- 仿select下拉框
默认状态下,灰色面板出现.当点击页面按钮以及灰色面板外区域时,面板消失;点击按钮,灰色面板出现;点击灰色面板区域,面板不能消失. 主要考察:事件冒泡与取消事件冒泡. 代码: <!DOCTYPE ...