湖南长沙前端开发与培训－通途工作室-前端开发,技术培训,动效研究,求职信息

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组件化，方便复用

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

snap.svg+vue实现圆形导航

作者:admin 日期:2020-11-24

查看案例请点击此处：

http://258754.cn/2020/vue_demo/#/demo/svg_nav

使用的技术框架：

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出现错误的解决办法

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

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"

经我验证可行。

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

使用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提供的工具，对区划进行了合并，完美解决了问题。合并操作及控制台语法花了点时间。	工具：mapshaper.org 解析贴： https://segmentfault.com/q/1010000013001601
同一页面展示多个图表	vue组件将地图封装了一下	查看本文源码

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

本文同时发布到两处：

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

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

Tags: echart echart geojson geojson

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

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

作者:admin 日期:2019-02-28

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

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

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

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

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

作者:admin 日期:2019-02-18

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

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

这个演示用到了SVG的symbol/pattern。动画控制用的tweenmax，状态控制用了vue.js。

绘制方面，用了一个ps插件，我用自己熟悉的ps直接导出了svg矢量图形。

演示地址：

http://www.contactu.cn/2016/svg/test_svg_2019.html

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

在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中的设定配合。

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

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

作者:admin 日期:2018-10-20

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

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

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

开始学写微信小程序

作者:admin 日期:2018-09-23

早就有朋友跟我建议：“你应该开始写小程序，很简单，跟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 | 查看次数: 3413

跨域时遇到的一个顽症总结

作者:admin 日期:2018-02-01

在进行post跨域数据请求时（所有请求均header中带token），碰到一个奇怪的现象，postman测试可以通过，但是用页面进行调用时，总是报错。前后端忙活了大半天时间，最后找出问题。以下是程序员 “灰色头像”写的总结：

总结下今天出现的问题，主要是在跨域CORS的时候出现这个问题

首先需要知道一些容易忽略的知识点，浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

具体看

http://www.ruanyifeng.com/blog/2016/04/cors.html

还有一点需要注意，头部字段只支持

Accept

Accept-Language

Content-Language

Last-Event-ID

Content-Type

对于自定义的，比如我们头部传的token这个自定义头部会出现下面2种情况

1、axios对于跨域CORS正常会发送2次请求，第一次“预检”，我们这边有token自定义头部字段，虽然我们服务器设置了<add name="Access-Control-Allow-Headers" value="*" />但这个*虽然指所有，但只限制于上面所说的支持的，自定义的不会支持，所以就导致预检就失败，不会发送第二次请求

2、普通的ajax却可以支持，应该是没有做预检处理（这个还没详细了解）

所以主要还是服务器设置<add name="Access-Control-Allow-Headers" value="*" />要改为<add name="Access-Control-Allow-Headers" value="Content-Type,X-Requested-With,token" />，增加自定义的token，不能使用*这样的配置。这样对于做预检的，有什么自定义头部字段，这里就要额外增加。

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

我常用的gulpfile.js配置与sublime组件列表

作者:admin 日期:2017-05-15

我自己的gulpfile.js代码：

这样运行：

gulp --u DIRNAME

--u是自定义参数，这样可以快速建立DIRNAME目录的虚拟站点，并启动所有监听服务。当你有很多不同的目录时，这样做很方便。

Javascript代码

var gulp = require('gulp'),
// concat = require('gulp-concat'),
// uglify = require('gulp-uglify'),
// mock = require('n-mock'),
browserSync = require('browser-sync').create(),
// fileinclude = require('gulp-file-include'),
// minifyCss = require('gulp-minify-css'),
sass = require('gulp-sass')
autoprefixer = require('gulp-autoprefixer')
// directoryMap = require("gulp-directory-map")
;
gulp.task('default', function() {
var dir = gulp.env.u;
console.log( "----------------当前处理目录为：/"+ dir +"----------------" );
browserSync.init({
server: {
baseDir: dir,
index: "index.html"
}
});
// 自动刷新
gulp.watch(dir+'/*.html', function() {browserSync.reload(); });
gulp.watch(dir+'/scss/*.scss', function () {
return gulp.src(dir+'/scss/*.scss')
.pipe(autoprefixer({
browsers: [
"last 10 versions",
"last 12 Chrome versions",
"Firefox > 20",
"ie 6-8"],
cascade: true
}))
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(dir+"/css"));
});
gulp.watch(dir+'/css/*.css', function() {browserSync.reload(); });
gulp.watch(dir+'/js/common.js', function() {browserSync.reload(); });
});

我常用的sublime插件：

ColorPicker--色彩选择器

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

备案号不在的日子里，学到了不少的新知识

作者:admin 日期:2016-12-29

不知道咋的备案就失效了。好容易恢复了。备案号不在的这段半个月，学到了不少的新知识：

* 完整的学习了git命令行，用命令行管理自己的仓库https://github.com/csdudu，并上传了几个小片段。建立gh-pages分支。以后需要演示的片段，全部都使用这个方法进行演示了。
* 完整的了解了npm包管理的机制，编辑package.json，更多的npm语法。并且通过实战，了解到npm的一些坑：比如node版本的影响、cnpm的优缺点。
* 基本搞懂了Webpack的运行机制，编辑webpack.config.js，常用loader。日常使用webpack-dev-server --inline --content-base .方式进行热更新。
* 基于Webpack搞清了es6的import/require语法，投入使用。用loader方式打包vue工程。
* 基本搞懂vue-router路由系统，开始制作一个SPA的demo，以用于以后PC端的仿FLASH类网站。
* 恶补了许多vue组件的知识。
* vue自定义指令的写法。
* 了解了前端AJAX模拟的一些知识，比如mock server的工具、搭建方式。顺便学习了LeanCloud这种把数据库抽象为API的工具的基本用法。

接下来，要向VUE组件化开发、ES6语法，甚至React native的方向进军。微信小程序有时间也想试试。

Tags: 学习新知识学习新知识