大屏展示典型案例,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 vue-cli3引用snap.svg出现错误的解决办法
作者:admin 日期:2020-11-12- npm install snapsvg
- import Snap from 'snapsvg'
- npm install snapsvg-cjs
- import "snapsvg-cjs"
可拖拽生成节点的组织结构图-vue+svg+betterscroll+原生js-drag
作者:admin 日期:2020-10-30
查看案例请点击此处:
顺便提一下,这种连线可以跟动画相结合,参见我的另一个小例子:
http://www.contactu.cn/2016/svg/test_svg_2019.html
VUE+TWEENMAX+SVG动画,用来模拟流程控制
面试前端岗位的一次经历(长沙)
作者:admin 日期:2020-10-15我打算在含浦、洋湖、后湖这个3公里圈子里找份前端工作。上周通过BOSS直聘联系到后湖的一家公司,基本条件和待遇双方都符合,于是约定面谈。
北京50天项目收获
作者:admin 日期:2020-09-17项目采用前后端分离,前端框架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这就是个最简演示,其它常用技术就不解释了。
演示地址 :
http://www.contactu.cn/2016/svg/qg.html
VUE+TWEENMAX+SVG动画,用来模拟流程控制
作者:admin 日期:2019-02-18那种工厂中很多个管道、流水线、控制阀门的控制体系,如果用软件来控制的话,会要操作很多的动画。用普通的HTML+IMAGE方式,很难表现一些复杂的控制。早几年的FLASH,是这方面的强手,但现在适用的方案,应该只好用SVG了。
我一直想了解一下SVG的组织结构及动画控制,这次终于实践了一个小demo。
在Scss中直接使用px单位,通过gulp,自动转为rem单位
作者:admin 日期:2018-10-27使用了https://www.npmjs.com/package/gulp-px2rem-plugin
注意width_design与pieces都要与ydui.flexible.js中的设定配合。
试着用css animation实现的逐帧动画
作者:admin 日期:2018-10-20我的试验: 258754.cn/2018/tyfp/test.html
模仿对象是:http://www.101.com