预览模式: 普通 | 列表

snap.svg+vue实现圆形导航

查看案例请点击此处:
 
使用的技术框架:
1、snap.svg实现Svg
2、数据与视图双向交互由vue-cli3实现
 
功能点:
1、图形与数组双向互动。可点击“添加”按钮添加数组中的对象。
2、算法实现path环状节点,角度、弧度、边长的逻辑关系。
3、Snap.animate 实现动画、transform用法
4、stroke-dasharray实现线条间隙。
5、viewBox改变Svg中心。
6、textPath路径文字
 
通过这个案例,了解了两种方式,来实现SVG线条。用HTML+CSS方式、使用JS方式,都可以实现。
 
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 10
做为正当的做法,应该使用
Javascript代码
  1. npm install snapsvg  
  2. 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代码
  1. npm install snapsvg-cjs  
  2. import "snapsvg-cjs"  
经我验证可行。
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 65

 

查看案例请点击此处:

 
需要源码可联系站长本人。微信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动画,用来模拟流程控制

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 135

面试前端岗位的一次经历(长沙)

我与天智公司的短期合作(劳务合同)告一段落。因为从含浦到天智所在的中电软件园这边,每天路上都至少要1小时,有时候堵车就更长时间了。我还是打算出来上班,在含浦、洋湖、后湖这个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天。如果有团队支持,我觉得还勉强可以,但是把几个岗位都堆给我,我觉得我可能承受不了这个工作量。
 
我还在等更好的机会出现。 

Tags: 面试

分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 153

北京50天项目收获

这次赴北京,参与中科院某院组织的某军事类项目,历时近一个半月。整个项目组由8个不同的单位派员组成,前端人员十多人。
项目采用前后端分离,前端框架VUE+element ui。也使用了原生SVG做一些控件的开发。

我担任前端统筹组组长(共4人),统筹组工作职责:
1、负责搭建整个项目的前端框架和主体逻辑。撰写主干代码和路由表,做模块化的总体规划与示例。子单位只能在他们固定的目录,写固定名称的组件(我们称之为“槽位”),所以我们统筹组需要在原型设计的基础上,提前定出槽位。这个提前做的工作有时间要求,否则子单位不好开展工作。另外前期槽位如定得不合理的话,后期代码编写会有麻烦。我们统筹组总体还是达标了。
2、为各单位提供前端解释与咨询。各单位进场时间有前后,对项目理解也不一致。因此统筹组要帮助他们理解进场逻辑,并写出合格的组件。
3、以下主要是我们内部工作。安排人员开发几个重点组件(拖拽树、甘特图、圆形导航),这几个重点组件涵盖近二分之一的应用场景,非常重要。我做为前端组长,安排了专人来开发,追进度、规划要暴露的接口、做压力测试。(后文详细阐述)

查看更多...

分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 254

某大屏展示项目中,要实现“点击乡级区划,显示出相应的数据”,

最终效果,链接: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提供的工具,对区划进行了合并,完美解决了问题。

 

合并操作及控制台语法花了点时间。

工具:mapshaper.org

 

解析贴:

https://segmentfault.com/q/1010000013001601

同一页面展示多个图表 vue组件将地图封装了一下 查看本文源码

 

解决了以上主要问题,绘制类似地图,就只剩一些细节问题了。

 

 

本文同时发布到两处:

本人博客:http://www.contactu.cn

知乎专栏《低水平前端》:https://zhuanlan.zhihu.com/c_1040198727197237248

Tags: echart geojson

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 926

 我刚咨询了阿里云客服:

一个阿里云帐号,只能对应一个备案主体。

可以用邮箱做为主ID来注册阿里云帐号。也就是说,对于那种一个管理员管理多个备案的情况,可以用一个手机、多个邮箱组合,来注册多个阿里云帐号,进而达到管理多个备案主体的目标。

分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 991

SVG制作不规则链接热点的最简版演示

一朋友要做一个“战国地图”,不会做“不规则热点”。我给他做了这个最简版演示。SVG是我用ps描的,很粗略。响应用的是vue.js,其实用jquery也是一样的。

这就是个最简演示,其它常用技术就不解释了。

演示地址 :
http://www.contactu.cn/2016/svg/qg.html

查看更多...

分类:前端研究 | 固定链接 | 评论: 2 | 引用: 0 | 查看次数: 6106

VUE+TWEENMAX+SVG动画,用来模拟流程控制

那种工厂中很多个管道、流水线、控制阀门的控制体系,如果用软件来控制的话,会要操作很多的动画。用普通的HTML+IMAGE方式,很难表现一些复杂的控制。早几年的FLASH,是这方面的强手,但现在适用的方案,应该只好用SVG了。

我一直想了解一下SVG的组织结构及动画控制,这次终于实践了一个小demo。

这个演示用到了SVG的symbol/pattern。动画控制用的tweenmax,状态控制用了vue.js。
绘制方面,用了一个ps插件,我用自己熟悉的ps直接导出了svg矢量图形。
 
演示地址 :
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3795

 使用了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中的设定配合。

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 5631

试着用css animation实现的逐帧动画

我的试验: 258754.cn/2018/tyfp/test.html

模仿对象是:http://www.101.com

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3947

我一个学生成功找到前端对口工作

他在我这里培训了五六次,基本就是按照自学+答疑的路子走的,也跟着做了。前天给我报讯,被一长沙大公司录取,薪资5000+,在今年不太景气的背景下,也还算不错的起步了。
分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2543

开始学写微信小程序

早就有朋友跟我建议:“你应该开始写小程序,很简单,跟VUE的路子很象”。九月份,有一段时间手头没有新单子,于是开始学习。机会不错,从我一个业务关系那里买到了一个慕课的视频,《纯正商业级应用-微信小程序开发实战》。课程不错,我想听的都讲了。我不想听的,基本都没有。
 
花二天时间听完课程,自己写代码实战了一下---果然跟VUE类似。第一感觉就是文件体系拆得太散了。虽然大家都是HTML/CSS/JS/JOSN这几样,但是小程序4个文件分开写,几个页面一起弄的话,感觉我的sublime的标签都不够用了。VUE的单页面组件多么的紧凑。
 
另外,组件的写法跟页面文件,两者有点不一样。比如小程序组件调用的开关还要在josn中定义、小程序的响应函数居然要放在methods:{}中,而页面又不需要。感觉小程序好粗糙。
 
第三方库,我找了有赞出品的vant-weapp,跟vant for vue一脉相承。
js工具库,小程序
 
SCSS写习惯了。可是小程序没有提供支持。在网上找到个由gulp驱动的workflow,还真好用。
 
编辑器这块儿,在Sublime中直接找了个小程序语法插件,配合原来使用的emmet,还挺好用。
 
总体来说,确实难度不大。熟悉VUE体系的不妨多学这一项技能。
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3046

目前利用<script>方式,不使用webpack的开发人员还很多,我之前一直不知道,可以绕过webpack,直接尝鲜.vue的单文件组件方式,直到发现了这个组件。目前我已经在多个项目中使用。

这个插件的用法在百度上基本搜不到。具体使用方式可以看这个中文文档:

https://kuro.tw/posts/2017/07/11/%E4%B8%8D%E9%9C%80%E7%B7%A8%E8%AD%AF%E4%B9%9F%E8%83%BD%E8%BC%89%E5%85%A5-vue-%E5%85%83%E4%BB%B6%E6%AA%94-%E4%BD%BF%E7%94%A8-http-vue-loader/

也可以直接看github官网文档:

https://github.com/FranckFreiburger/http-vue-loader

 

查看更多...

分类:VUE研究 | 固定链接 | 评论: 2 | 引用: 0 | 查看次数: 18046