html5
Chouglas
这个作者很懒,什么都没留下…
展开
-
使用Hammer.js操作svg
hammer.js 是一个支持多手势操作的库,可以绑定dom元素,同时监听单击、双击、放缩、长按、滑动、旋转等事件。官网地址: https://hammerjs.github.io/在我参与的某个项目开发中,需要实现对svg图形的绘制以及各种手势操作的监听,使用 hammer.js 很大程度的提高了开发的效率。首先在html中加入svg:<!DOCTYPE html><html><head>原创 2016-03-10 10:13:45 · 1429 阅读 · 0 评论 -
js操作svg整体缩放
首先我们先创建一个svg整体布局,代码如下:<!DOCTYPE html><html><head> <title>js操作svg实现整体缩放</title> <meta charset="utf-8"></head><body> <svg id="svg" style="background:#FAFAFA;"> <g id="svgPanel">原创 2016-03-11 13:34:29 · 5375 阅读 · 1 评论 -
JS操作SVG模拟水滴分离、融合效果
很多的App应用下拉刷新使用拉拽圆的动态效果来表示下拉过程,很富有表现性;还有QQ的消除红点的过程等,都使用到了这种类似水滴融合的效果。这种变化的实质是绘制两个圆,然后在两个圆之间利用贝塞尔曲线来描绘弧形,在两个圆的距离随着拖动发生改变时,通过计算数学公式动态地更改曲线的弧度,从而使整个变化过程看起来更加协调。下面粗略模拟一下这个过程,如果想要更加完美的表现,需要经过精确的计算得出更准确的公式,这里原创 2016-03-23 22:52:52 · 4637 阅读 · 0 评论