大屏展示典型案例，SVG+CANVAS动画效果,flexible响应式尺寸
作者:admin 日期:2021-03-24演示在此： http://258754.cn/2020/ehs/canvas_and_svg.html
技术要点：
- 异形边框，自适应尺寸。已经做成了VUE标准组件。边框的宽、高可以使用px，也可以使用rem。
- 边框SVG+MASK+路径动画，底部CANVAS动画。
- flexible.js，每个块的宽、高，会根据整个页面的宽度自适应变化 。
SVG异形边框及路径动画+CSS动画演示
作者:admin 日期:2021-03-19演示地址：
http://contactu.cn/2021/vue_svg_tweenmax_demo/index.html
- 根据窗体的width/height参数，自动计算生成SVG的path路径
- tweenmax+MorphSVGPlugin生成小光点绕路径环游的动画，tweenmax的CSS动画生成右下角的色彩变化
- VUE组件化，方便复用
snap.svg+vue实现圆形导航
作者:admin 日期:2020-11-24查看案例请点击此处：
使用的技术框架：
1、snap.svg实现Svg
2、数据与视图双向交互由vue-cli3实现
功能点：
1、图形与数组双向互动。可点击“添加”按钮添加数组中的对象。
2、算法实现path环状节点，角度、弧度、边长的逻辑关系。下图中所有不同颜色的线段，都是通过CSS定义得到的。可以把一个圆环分成3份，也可以分成50份，得到不同的视觉效果。
3、Snap.animate 实现动画、transform用法
4、stroke-dasharray实现线条间隙，比如下例中的白色间隔。
5、viewBox改变Svg中心。
6、textPath路径文字，实现跟随弧度变化的文字
通过这个案例，了解了两种方式，来实现SVG线条。用HTML+CSS方式、或使用snap.svg的JS方式，都可以实现。
vue-cli3引用snap.svg出现错误的解决办法
作者:admin 日期:2020-11-12做为正当的做法，应该使用
Javascript代码
- npm install snapsvg
- import Snap from 'snapsvg'
来使用svap.svg
但事实上这样是不行的，会报红字错：
vue-router.min.js:6 TypeError: Cannot read property 'on' of undefined
找了很多百度、github issue的很多资料，发现很多人都碰到了这个问题，也提供了Webpack及改写vue-cli3( vue.config.js)的办法，但实验发现都解决不了问题。
最终在stackoverflow.com找到了最简便的解决办法：
Javascript代码
- npm install snapsvg-cjs
- import "snapsvg-cjs"
经我验证可行。
可拖拽生成节点的组织结构图-vue+svg+betterscroll+原生js-drag
作者:admin 日期:2020-10-30
查看案例请点击此处：
需要源码可联系站长本人。微信18975141930。
使用的技术框架：
1、原生Svg用来画线
2、原生js拖动dragover、dragleave、drop行为
3、betterscroll实现画布拖动
4、整个底层由vue-cli3实现
功能点：
1、图形与数组双向互动。树节点有单击、右键单击、删除等行为，可通过console.log查看。
2、左侧方案节点可以直接拖到右侧蓝色节点上，添加树节点
3、树节点变化后，会自动调整画面宽、高，并重绘线条
4、线条的柄长度、连接点位置，包括宽度、颜色，都已经用变量实现。
这个案例主要是用来测试JS与SVG的结合、拖动行为的基础实现。到具体项目中，是将树结构打包为一个dtree.vue的组件，对外暴露行为。本例只是一个雏形雏形，有了这套理论，可以实现更复杂的东西。比如在页面上任何DOM对象之间都可以连线，画图形标记，是不是想想都有点小激动？
顺便提一下，这种连线可以跟动画相结合，参见我的另一个小例子：
http://www.contactu.cn/2016/svg/test_svg_2019.html
VUE+TWEENMAX+SVG动画，用来模拟流程控制
面试前端岗位的一次经历（长沙）
作者:admin 日期:2020-10-15我打算在含浦、洋湖、后湖这个3公里圈子里找份前端工作。上周通过BOSS直聘联系到后湖的一家公司，基本条件和待遇双方都符合，于是约定面谈。
那天我提前10分钟到了，公司在后湖的创业区，环境不错，就这一点来说，心理加分。但是他们公司并没有挂牌，公司也没人值守，我没找到是具体哪一间房。我在前台坐了一会儿，L经理一行三个人才到公司，说是刚下火车，刚从外地回来。
寒喧两句，一位黑色西装的W经理跟我交流技术细节。可能是我的工作年限比较长，简历上列的项目太多，W经理都没怎么问我技术细节。W经理直接跟我说了一个需求，让我描述下实现思路。我没听懂他要的是什么，另外我想，组件的功能实现，难道不是产品经理的活儿么？我可是面前端岗位呀。
W经理重复了两次，我还是没搞清他到底要实现什么。是要我做功能分析？还是UI设计？还是前端技术架构？要说这几门我倒是都会，就是真没听懂他的思路。
老鸟跟新人的区别，就是我碰到不会或是不理解的东西，会接受现实，并从容地应对。没听懂就是没听懂，可能是你表达不好，也可能是我没有这个经历，“只要你给我时间，我一定能搞懂。这世界上没有听不懂的需求。”
W经理最后放弃了描述，他有点不服气。向L经理示意可以直接谈待遇了。我说：“不考核下我的技术了？”W可能感觉有点被动（被应聘者反将），于是他说也行，那就考核几个点吧。问了几个问题，我记得的有：
VUE-CLI路由类型--我说分为hash和history，他又问我两者区别，我坦承不了解，工作中没用过，但我觉得百度一下就行了。
组件传数据的几种方式--我说了最典型的三种，他说还有更多的没有。我说我查过文档，应该还有更多，但工作中没用到就暂时没去了解。
es6跟组件功能有什么联系？（仿佛如此）----我说es6是一种技术手段，跟功能设计没啥联系。不过我补充了一下我使用es6与lodash库的一些经历。
最后W经理让我看了他们的后台界面，问我，如果只给一个功能描述，是否能实现从“功能设计-UI交互设计-前端编码”这一系列工作，我说我可以，但是我觉得这应该由团队来实现，而不是我一个人。
最终还是没有谈拢，原因如下：
团队感觉太小太新，人手不齐。从办公室的布置（只放了几张桌子和刚组装完的电脑）看得出来。虽然L经理说他们张家界还有几十人的团队，但长沙这边确实看不到人。
L经理说他们并不缺钱，但我觉得如果属实，公司应该布置得更正式一些。然后招人进度也不会象目前这样，如果引入一个有力的HR来专门做招聘工作，长沙各种类型的员工还是招得到的。如果连招人这一点都无法保障的话，我只能说这个团队还是缺乏执行力。
虽然承诺了他们招聘事宜上的顶薪，但是要9-8-6的工作制，晚上到8点，每周6天。如果有团队支持，我觉得还勉强可以，但是把几个岗位都堆给我，我觉得我可能承受不了这个工作量。
我还在等更好的机会出现。
北京50天项目收获
作者:admin 日期:2020-09-17这次赴北京，参与中科院某院组织项目，历时近一个半月。整个项目组由8个不同的单位派员组成，前端人员十多人。
项目采用前后端分离，前端框架VUE+element ui。也使用了原生SVG做一些控件的开发。
我担任前端工作：
1、负责搭建整个项目的前端框架和主体逻辑。撰写主干代码和路由表，做模块化的总体规划与示例。子单位只能在他们固定的目录，写固定名称的组件（我们称之为“槽位”），所以我们统筹组需要在原型设计的基础上，提前定出槽位。这个提前做的工作有时间要求，否则子单位不好开展工作。另外前期槽位如定得不合理的话，后期代码编写会有麻烦。我们统筹组总体还是达标了。
2、为各单位提供前端解释与咨询。各单位进场时间有前后，对项目理解也不一致。因此统筹组要帮助他们理解进场逻辑，并写出合格的组件。
3、以下主要是我们内部工作。安排人员开发几个重点组件（拖拽树、甘特图、圆形导航），这几个重点组件涵盖近二分之一的应用场景，非常重要。我做为前端组长，安排了专人来开发，追进度、规划要暴露的接口、做压力测试。（后文详细阐述）
4、使用element组件构建约20个页面。中间含有大量的列表、表单、弹窗。在element基础上也另外封装了一些组件。比如封了一个可拖动的el-dailog。
5、对全局scss的定义：使用了内置的element-variables变量文件，统一颜色及组件外观。
6、使用vuex进行跨组件通讯。
7、大量的api请求和前后端联调工作。（后文详细阐述）
三个组件的功能描述：
1、树组件：
这个树组件我们内部命名为gtree（类似脑图），节点上要通过拖拽行为增加子节点。树图与数据双向交互，节点可增、删、改。
我们使用了go.js（破解版）构建。
这个树的核心代码由黄工写的，外部事件由我进行定义和调试。
2、甘特图：
这个组件先后开发了两版。之前版本由赵工写的，性能方面有些问题。后面这一版由黄工写，外部接口由小周进行调试。
这一版避免了数据条数较多时的卡顿问题，在上下连续拖拽和展开时做了逐步加载，这是一个重大的升级。
“时间条”从头开始就是黄工写的，可以拖动移动，也可以拖动改变大小。
3、圆形导航：
这个圆形导航黄工写了SVG的环状实现。这个组件我全文reivew了代码，已经基本掌握。
环状实现用的SVG的原生PATH对象，这部分体现出黄工的算法功底。
以下谈谈我的收获：
1、前后端联调涉及大量的数据处理，要熟练地使用ES6语法和lodash库。对我本人来说，以前这方面实战得较少，这次跟小周、小任学了不少语法和技巧。
2、图形算法方面，黄工表现出非常高的开发效率。他对算法很熟，比如将四个数组转化成四个同心圆，并进行均分切割，再得到PATH对象。他对DOM模型很熟，比如手写了可拖拽变换宽度的长方形。文档阅读能力也很强，他读了gojs的英文版的官方文档，才完成了gtree的所有功能。我除了学习他的构建思路，还跟他学到了算法、控制台debugger的一些技巧。
3、对于VUE工程化、同步协作方面，有了一次完整的实践。比如模块化、路由、组件定义的粒度、VUEX、env环境变量的使用。
4、对后端接口调试有了比较完整的认识。比如HOST切换、数据异常时的一般呈现、数据前端加密、axios的封装等。
接下来的研发想法：
1、重点研发一下SVG图形写法（简单的用原生，复杂的用框架）。争取能自如地实现SVG图形化。
2、总结一下lodash的各种用法，尤其是跟日常工作相关的技法。
3、建议使用postman用到开发中，后端测试完样例，再交给前端，可较大提升前后端协同能力。
项目采用前后端分离，前端框架VUE+element ui。也使用了原生SVG做一些控件的开发。
我担任前端工作：
1、负责搭建整个项目的前端框架和主体逻辑。撰写主干代码和路由表，做模块化的总体规划与示例。子单位只能在他们固定的目录，写固定名称的组件（我们称之为“槽位”），所以我们统筹组需要在原型设计的基础上，提前定出槽位。这个提前做的工作有时间要求，否则子单位不好开展工作。另外前期槽位如定得不合理的话，后期代码编写会有麻烦。我们统筹组总体还是达标了。
2、为各单位提供前端解释与咨询。各单位进场时间有前后，对项目理解也不一致。因此统筹组要帮助他们理解进场逻辑，并写出合格的组件。
3、以下主要是我们内部工作。安排人员开发几个重点组件（拖拽树、甘特图、圆形导航），这几个重点组件涵盖近二分之一的应用场景，非常重要。我做为前端组长，安排了专人来开发，追进度、规划要暴露的接口、做压力测试。（后文详细阐述）
4、使用element组件构建约20个页面。中间含有大量的列表、表单、弹窗。在element基础上也另外封装了一些组件。比如封了一个可拖动的el-dailog。
5、对全局scss的定义：使用了内置的element-variables变量文件，统一颜色及组件外观。
6、使用vuex进行跨组件通讯。
7、大量的api请求和前后端联调工作。（后文详细阐述）
三个组件的功能描述：
1、树组件：
这个树组件我们内部命名为gtree（类似脑图），节点上要通过拖拽行为增加子节点。树图与数据双向交互，节点可增、删、改。
我们使用了go.js（破解版）构建。
这个树的核心代码由黄工写的，外部事件由我进行定义和调试。
2、甘特图：
这个组件先后开发了两版。之前版本由赵工写的，性能方面有些问题。后面这一版由黄工写，外部接口由小周进行调试。
这一版避免了数据条数较多时的卡顿问题，在上下连续拖拽和展开时做了逐步加载，这是一个重大的升级。
“时间条”从头开始就是黄工写的，可以拖动移动，也可以拖动改变大小。
3、圆形导航：
这个圆形导航黄工写了SVG的环状实现。这个组件我全文reivew了代码，已经基本掌握。
环状实现用的SVG的原生PATH对象，这部分体现出黄工的算法功底。
以下谈谈我的收获：
1、前后端联调涉及大量的数据处理，要熟练地使用ES6语法和lodash库。对我本人来说，以前这方面实战得较少，这次跟小周、小任学了不少语法和技巧。
2、图形算法方面，黄工表现出非常高的开发效率。他对算法很熟，比如将四个数组转化成四个同心圆，并进行均分切割，再得到PATH对象。他对DOM模型很熟，比如手写了可拖拽变换宽度的长方形。文档阅读能力也很强，他读了gojs的英文版的官方文档，才完成了gtree的所有功能。我除了学习他的构建思路，还跟他学到了算法、控制台debugger的一些技巧。
3、对于VUE工程化、同步协作方面，有了一次完整的实践。比如模块化、路由、组件定义的粒度、VUEX、env环境变量的使用。
4、对后端接口调试有了比较完整的认识。比如HOST切换、数据异常时的一般呈现、数据前端加密、axios的封装等。
接下来的研发想法：
1、重点研发一下SVG图形写法（简单的用原生，复杂的用框架）。争取能自如地实现SVG图形化。
2、总结一下lodash的各种用法，尤其是跟日常工作相关的技法。
3、建议使用postman用到开发中，后端测试完样例，再交给前端，可较大提升前后端协同能力。
使用echarts地图，大屏实现“县乡级行政区划”数据展示的几个难点汇总
作者:admin 日期:2020-06-12某大屏展示项目中，要实现“点击乡级区划，显示出相应的数据”，
最终效果，链接：http://258754.cn/2020/guidong/demo.html
经过几天的学习，解决了一些疑难问题，特汇总如下以供参考：
| 难点 | 解决方法 | 参考文章或链接 |
| echarts地理图的基础实现-基于geojson | 参考了百度官方示例-香港地图 | https://echarts.apache.org/examples/zh/editor.html?c=map-HK |
| 外框发光效果实现 | geo--itemStyle | |
| 得到县一级的geojson数据 | 很多方法得到，本处给出一个很方便的工具 | https://gallery.echartsjs.com/editor.html?c=x4snrWXFGe |
| 网上公开的geojson数据，免费只到县一级，没有乡镇一级地图 |
1、自己手工绘制，比较粗糙，边界不准 2、找到了精确边界数据的购买渠道，很便宜 |
geojson.io这个网站可以手工绘制区块 |
| 买到的 geojson数据比较旧，今年度新的区划已经发生了合并。 |
使用mapshaper.org提供的工具，对区划进行了合并，完美解决了问题。
合并操作及控制台语法花了点时间。 |
解析贴： |
| 同一页面展示多个图表 | vue组件将地图封装了一下 | 查看本文源码 |
解决了以上主要问题，绘制类似地图，就只剩一些细节问题了。
本文同时发布到两处：
知乎专栏《低水平前端》：https://zhuanlan.zhihu.com/c_1040198727197237248
一个阿里云帐号，只能对应一个备案主体
作者:admin 日期:2020-05-06SVG制作不规则链接热点的最简版演示
作者:admin 日期:2019-02-28一朋友要做一个“战国地图”，不会做“不规则热点”。我给他做了这个最简版演示。SVG是我用ps描的，很粗略。响应用的是vue.js，其实用jquery也是一样的。
这就是个最简演示，其它常用技术就不解释了。
演示地址 ：
http://www.contactu.cn/2016/svg/qg.html
这就是个最简演示，其它常用技术就不解释了。
演示地址 ：
http://www.contactu.cn/2016/svg/qg.html
VUE+TWEENMAX+SVG动画，用来模拟流程控制
作者:admin 日期:2019-02-18那种工厂中很多个管道、流水线、控制阀门的控制体系，如果用软件来控制的话，会要操作很多的动画。用普通的HTML+IMAGE方式，很难表现一些复杂的控制。早几年的FLASH，是这方面的强手，但现在适用的方案，应该只好用SVG了。
我一直想了解一下SVG的组织结构及动画控制，这次终于实践了一个小demo。
这个演示用到了SVG的symbol/pattern。动画控制用的tweenmax，状态控制用了vue.js。
绘制方面，用了一个ps插件，我用自己熟悉的ps直接导出了svg矢量图形。
演示地址 ：
在Scss中直接使用px单位，通过gulp，自动转为rem单位
作者:admin 日期:2018-10-27使用了https://www.npmjs.com/package/gulp-px2rem-plugin
使用这个gulp插件，可以在Scss中直接使用px单位，然后通过gulp的转换，自动转为rem单位，与我常用的ydui.flexible.js配合，最终完成px2rem的转换。
gulp语法如下：
.pipe(sass().on('error', sass.logError))
.pipe(px2rem({'width_design':640,'pieces':6.4,'ignore_px':[1,2]}))
.pipe(gulp.dest(dir+"/css"));
注意width_design与pieces都要与ydui.flexible.js中的设定配合。
试着用css animation实现的逐帧动画
作者:admin 日期:2018-10-20我的试验： 258754.cn/2018/tyfp/test.html
模仿对象是：http://www.101.com
