SVG的动态之美-搜狗地铁图重构散记

搜狗地图发布了新版的移动端地铁图,改版初衷是为了用户交互体验的提升以及性能的改善.原版地铁图被用户吐槽最多的是pinch缩放不流畅.无过渡动画.拖拽边界不合理等等,大体上都是交互体验上的问题.实际上原版的问题不仅仅存在于交互体验上,源代码也是一团糟: 无模块化概念: 存在冗余逻辑和文件: 滥用第三方库&工具: UI的更新仍旧是直接操作DOM: 构建&发布流程不规范. 以上问题其实跟业务以及技术选型无关,可以说是任何一个“历史悠久”的项目都难以避免的问题.针对以上问题的重构方案不是本文要阐述…

TWaver初学实战——基于HTML5的交互式地铁图

每天坐地铁,经常看地铁图,有一天突然想到,地铁图不也是一种拓扑结果吗?TWaver到底能与地铁图擦出怎样的火花呢? 想到就干,先到网上找幅参考图.各种风格的地铁图还挺多,甚至有大学生自主设计制作,受到地铁相关人士的认可和赞扬.不过看到他花了3周时间,我就比较同情他了,如果学会了TWaver,我保他连3天都不用就可以完成,而且还是纯矢量.可交互.有动态效果.无失真缩放的拓扑图. 我们就以上面这幅地铁图为模版来进行制作. 一.数据整理俗话说兵马未动粮草先行,没有数据再好的创意也白搭.…

【重点突破】——SVG技术动态随机绘制圆形

一.引言在学习Canvas绘图技术时,做的是随机验证码的例子,在学习SVG绘图技术时,同样也有一个随机绘制的例子——动态随机绘制圆形.这个练习,即综合了多种SVG技术的知识点,又很具有艺术感,随机生成的任意一张图片都具有艺术之美. 二.要求在SVG画布上随机的绘制30个实心圆形,大小随机.位置随机.填充颜色随机.透明度随机:点击某个圆形后,它慢慢变大/淡,直至从DOM树上删除. 三.实现 <!DOCTYPE html> <html> <head lang="en…

Unity3D研究院之动态修改烘培贴图的大小&脚本烘培场景

Unity默认烘培场景以后每张烘培贴图的大小是1024.但是有可能你的场景比较简单,用1024会比较浪费.如下图所示,这是我的一个场景的烘培贴图,右上角一大部分完全是没有用到,但是它却占着空间. 有时候可能你想去修改烘培贴图的大小,如下图所示以前我试过在Inspector视图中修改烘培贴图的大小,图虽然是小了但是它是整体缩小,后来在手机上面发现这这样直接修改烘培贴图的大小确实有问题,接缝方面处理的有问题.而且每次烘培完场景以后都需要这样缩一下..(千万不要这样缩图) 我们需要美术在烘培场景的时…

Echarts动态加载饼状图实例（二）

一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div class="ui-container">  <div class="ui-list"> <ul> <li> <label class="ui-text">审核</label> &…

Echarts动态加载饼状图的实例

一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div style="width: 100%; height: 400px;" id="main"> </div> 三.js代码(加载图表的方法): /** * @param {String} p_chart 初始化报表的id * @param {Array} p_obj 初始化报表的数据对象数组 *…

Vue如何动态配置img标签的图片源src

(一)首先通过绑定数据给src提供图片地址 <template> <div> <img :src=image_path /> </div> </template> <script> export default { data() { return { image_path: "../assets/imgs/hello.png" // 我这里是根据图片在源码中的路径来确定的,需要依据具体的情况来赋值 } } } &l…

不需要图片，css+svg绘制动态loading加载图标

1.html 部分: <div id="refershDiv" class="refershDiv"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <rect transform="rotate(0 50 50) translate(0 -25)"> <animate attribut…

高德地图地铁图adcode 城市代码

北京 1100天津 1200石家庄 1301沈阳 2101大连 2102长春 2201哈尔滨 2301上海 3100南京 3201无锡 3202苏州 3205杭州 3301宁波 3302合肥 3401福州 3501南昌 3601青岛 3702郑州 4101武汉 4201长沙 4301广州 4401深圳 4403佛山 4406东莞 4419南宁 4501重庆 5000成都 5101昆明 5301西安 6101香港 8100…

动态更新echarts k线图数据通过websocket取数据

1.加载插件,实例化chart.2.链接websocket3.接收数据,处理数据,调用chart的实例,不断更新数据<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><div id="container"><…

图的遍历 | 1131地铁图： dfs复杂模拟题

这题在搞清楚思路绕过坑后,还是可以写的出通过sample data的代码的.但是不能AC,让我很气. 最后查清原因:还是对dfs本质理解的不够. wa代码: vis[s]=1; dfs(s,e,0); 殊不知本题有多个查询数据.如果只调用一遍还可以蒙混过关,但是这样的错误必然导致wa ac代码: vis[s]=1;dfs(s,e,0);vis[s]=0; 参考柳诺博客修改的AC代码: #include <stdio.h> #include <memory.h> #include &…

BZOJ 3237([Ahoi2013]连通图-cdq图重构-连通性缩点)

3237: [Ahoi2013]连通图 Time Limit: 20 Sec Memory Limit: 512 MB Submit: 106 Solved: 31 [ Submit][ Status] Description Input Output Sample Input 4 5 1 2 2 3 3 4 4 1 2 4 3 1 5 2 2 3 2 1 2 Sample Output Connected Disconnected Connected HINT N<=100000 M<…

方便前端使用的SVG雪碧图

更多代码详情:github.crmeb.net/u/LXT 简介由于SVG自身的矢量性质,不管在什么情况下,图标都很清晰,可以适应不同尺寸大小和不同分辨率.不用担心模糊和锯齿.同时还能更改图标的填充颜色. CSS雪碧图和SVG雪碧图传统的CSS图标可以分为图片图标和字体图标. 图片图标是将所有的icon整合到一张图中,然后通过定位获取其中的某个图标.优点是管理简单,网络请求少.缺点是在高像素屏幕上图标和周边内容相比会显得比较模糊:大小固定:大多数样式无法修改,单个图标使用场景有限. 相对来说…

UML动态模型图简单介绍

UML动态模型图描述了系统动态行为的各个方面,包括用例图.序列图.协作图.活动图和状态图.下面就每种图做一个简单介绍: 用例图用例图描述系统外部的执行者与系统提供的用例之间的某种联系.所谓用例是指对系统提供的功能的一种描述.执行者是使用用例的人或外部系统,二者之间的联系描述了“谁使用哪个用例”.用例图着重于从系统外部执行者的角度来描述系统需要提供哪些功能,并指明该执行者是谁.在用例图中,椭圆表示用例,小人表示执行者.下图所示为一个普通用户进入某系统的用例图,该图描述了当普通用户进入系统时,“普…

利用PS自动切图、支持svg且支持icoMoon——再也不用四处去转格式了

今天想导出svg格式的图片支持webFont,结果AI打不开了,文件好像损坏了,于是就想办法在PS里面导出. 网上搜索到一篇文章,腾讯的 http://isux.tencent.com/ps-photoshop-cc-fd.html, 同时还会引用到一个三方脚本 http://hackingui.com/design/export-photoshop-layer-to-svg/ , 三方脚本的一篇文章 http://www.ui.cn/detail/53284.html. 最终找到了解决办法,…

JavaScript动画实例：递归分形图动态展示

在“JavaScript图形实例:SierPinski三角形” 和“JavaScript图形实例:Levy曲线及其变形”等文章中我们介绍了通过递归生成分形图形的方法.我们可以将绘制的分形图形每隔一定的时间间隔后,增加递归深度重新绘制一次,这样就可以得到分形图形的动态生成效果. 1．SierPinski垫片递归深度depth从1开始,将递归绘制的SierPinski垫片每隔1秒后增加递归深度(depth++),重新绘制一遍,得到SierPinski垫片的动态生成动画效果. 编写如下的HTML代码…

简洁既是美—用while语句复制数组

简洁既是美,程序员应尽量尝试编写简洁的表达式,争取用简单的代码来实现更多的功能,当然,这也要看情况了(有时候也得考虑程序运行的时间嘛). 在阅读C++Prime Plus到while语句时有一个讲一个数组内容复制到另一个数组的例子: //arr1 is an array if ints int *source=arr1; size_t sz=sizeof(arr1)/sizeof(*arr1); //number of elements int *dest=new int[sz]; while(…

HTML5大数据可视化效果（二）可交互地铁线路图

前言最近特别忙,承蒙大伙关照,3D机房的项目一个接着一个,领了一帮小弟,搞搞传帮带,乌飞兔走,转眼已经菊黄蟹肥……有个小弟很不错,勤奋好学,很快就把API都摸透了,自己折腾着做了个HTML5的魔都的地铁线路图,能拖能拽的,还和电子地图做了交互.哥决定把小弟的成果纳入“HTML5大数据可视化效果”系列,以示鼓励(P.S. 其实还挺有压力的,后浪推前浪,新人赶旧人.我们这些老鸟也得注意,免得让00后给抢了饭碗) 效果图对比网上的地铁图还是很多的,小弟选了这张比较新的做参考.想当年哥来魔都打拼时,…

在 SVG 中添加交互性

原文地址:http://www.ibm.com/developerworks/cn/xml/x-svgint/ SVG 中的交互性可以分为三个领域 -- 链接.事件和脚本.本文将依次讨论这三个领域. 注意:要查看本技巧中的 SVG 文档,需要有一个 SVG 查看程序,可以在参考资料中找到这种查看程序(还有一个包括所有相关文件的 .zip 文件). 链接最基本的交互形式是链接.在 SVG 中,通过一个 <a> 标签提供链接,这与 HTML 链接的方式几乎相同.将 <a> 标签与一…

WPF简易北京地铁效果图

这个是百度地图上北京地铁的地址http://map.baidu.com/?subwayShareId=beijing,131,我们先看下百度上面的效果图我要实现的内容比较简单,就是绘制这些图,和在地铁线上滑动时,会有跟着走的地铁名的提示. 以下是我实现的,简陋的效果图实现过程: 一.扒数据我不会爬虫,所以,这里是用Fiddler把数据给扒下来,由于北京地铁官网,最近在维护中,所以进不去,不知道他们是不是提供了相关的数据,如果数据丰富的话,可做的东西还是很多的. F12打开开发者工具,用鼠标…

svg从入门到装逼(一)

svg文件是基于xml的矢量图,而canvas是基于html和js的位图.关于两者的比较,在粗就不赘述了. 1. 首先来上一个svg的基本结构: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&q…

基于vue和svg的树形UI

vue-svg-tree 基于vue和svg的动态树形UI 截图应用 npm install vue-svg-tree 示例 <template> <div> <vue-svg-tree :treeData="treeData" svgId='svg' ref="svgTree" ></vue-svg-tree> </div> </template> <script> impo…

JS判断图片是否加载完成背景图404 快到碗里来

面对这个问题我最多做到表面笑嘻嘻 …… 真不知道测试怎么那么…… 啥都能给你测出来有的没的都能给你测出来算了算了谁让本仙女本精灵本可爱温柔大方善解人意呢 …呵呵呵 ————————————正文开始了———————————— 这是一个动态更换登录页面背景图的功能但是如果客户的相对应的文件夹没有更换过图片的话就要有默认显示的图片 logoBg就是默认显示的图片 logoUrl是客户更换的背景图最初的代码是这个样子的工具文件: html引入 import {validateImage…

SVG DOM常用属性和方法介绍(1)

12.2 SVG DOM常用属性和方法介绍将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析器所特有的.SVG支持DOM2标准. 12.2.1 文档初始化相关 — evt属性 evt表示事件本身,可以通过evt获取与当前事件相关的信息,用户可以在script中定义响应函数,进行相应的处理.它与普通JavaScript脚本中的event基本相同,只不过在普通JavaScript的脚本中简…

SVG开发注意事项

SVG Scalable Vector Graphics 可缩放的矢量图形起源在 2003 年一月,SVG 1.1 被确立为 W3C 标准,在过去很长一段时间,网页注重文字和图片的展示, SVG就被遗忘了,随着网页对图形的要求越来越高,SVG又出现在人们的视野中. 关注点可以从SVG这个名字就能瞄到我们第一个关注点在哪里,没错,就是可缩放的矢量图形,这个还是得从位图和矢量图说起,可以直白来说,位图缩放容易模糊,而矢量图一般不会,因为矢量图记录了位置信息,每次按照大小重新计算图形,而位图只能…

地铁合作（hjy）

用时大概时间 18 个小时我的队友是 :黄珺瑜我们一开始的想法是自己建立数据库,用来查询路线,再调用一下百度api作为地图(仅作地图没有任何操作的那种):后来我们的步骤也的确是这样,我们先确定了苏州地铁图为项目对象,然后将它所有的地铁站,线路等信息储存到数据库里,通过建立5个数据表来储存,四个表为线路表,还有一个表是交换站表.并按部就班的设计我们的算法.终于经过我们历时6个小时左右的时间终于把我们的算法设计出来了. 以下是一条线上没有交换站的情况,有交换站的情况,以及两条线的情况: 然…

《数据可视化之美》高清PDF全彩版|百度网盘免费下载|Python数据可视化

<数据可视化之美>高清PDF全彩版|百度网盘免费下载|Python数据可视化提取码:i0il 内容简介 <数据可视化之美>内容简介:可视化是数据描述的图形表示,旨在一目了然地揭示数据中的复杂信息.可视化的典型如纽约地铁图和人脑图.成功的可视化的美丽之处既在于其艺术设计,也在于其通过对细节的优雅展示,能够有效地产生对数据的洞察和新的理解. 在<数据可视化之美>中,20多位可视化专家包括艺术家.设计师.评论家.科学家.分析师.统计学家等,展示了他们如何在各自的学科领域内开…

把UI图里的小图标制作成icon font

一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标,本文深入讨论使用icon-font的的制作方法:在PS里面导出svg,制作字体图标.这种方法既有sprites图不需要浏览器发多次请求的优点,也有使用clip-path/svg矢量无损的优点,并且支持IE6及以上. 使用sprites图可以自行用PS将多个小图标放至一张图: sprites图的缺点是不…

基于ionic+angulajs的混合开发实现地铁APP

基于ionic+angulajs的混合开发实现地铁APP 注:本博文为博主原创,转载时请注明出处. 项目源码地址:https://github.com/zhangxy1035/SubwayMap 一.项目简介在该项目中的地铁app是基于ionic+angularjs开发的一款软件,其中使用了高德地图的开放接口(地铁JS API)网址为:http://lbs.amap.com/api/subway-api/subway-summary/.在该app中主要实现了,地铁线路图的整体展示,起点终点设置…

eCharts动态加载各省份的数据

假如从数据库读出以下数据,如何将数据展示在地图之上 1.部门的名称数据: List deptname=[联通事业部-上海联通项目组, 联通事业部-河南联通项目组, 联通事业部-贵州联通项目组, 联通事业部-黑龙江联通项目组, 联通事业部-总部项目中心, 联通事业部-河北联通项目组, 联通事业部-北京联通项目组, 联通事业部-西藏联通项目组, 联通事业部-湖北联通项目组, 联通事业部-江苏联通项目组, 联通事业部-宝马业务拓展部, 联通事业部-浙江联通项目组, 联通事业部-重庆联通项目组, 联通事…

【SVG的动态之美-搜狗地铁图重构散记】的更多相关文章