移动端多点触控开发库–hammer.js

在之前的移动端开发中,基础库采用的都是zetpo.js,一些基本的手势交互也是用原生的touch事件完成。但最近一个项目里涉及了拖拽和缩放等一些多点触控的复杂操作,考虑项目时间紧、自己封装多点触控库的复杂,于是就决定使用hammer.js作为多点触控开发库。一个项目用下来,对hammer.js也有大概的认知了。接下来的内容描述了hammer.js的所有触摸行为和一些方法,其中有些方法和属性默认是禁止的,需要手动开启 继续阅读

发表在 前端技术 | 标签为 , | 留下评论

实现canvas里图形的拖拽

在前端交互中,拖拽是比较常见的。比如页面里弹出的登录框,或者一些个人主页的自定义布局,这种布局允许用户自由的拖拽不同模块到不同位置,当然这种自定义布局涉及到后台数据记录,再或者我们曾经玩过的拼图游戏,这些都是拖拽的应用。

倘若说到拖拽的表现形式,有通过js结合mouse事件(mousedown、mousemove、mouseup)来改变DOM元素的left、top值的,也有html5里拖放API,而今天讲的则是canvas里的图形拖拽。

首先来看实例演示:canvas里图形的拖拽

那么类似这种交互是如何实现的? 在上篇文章–canvas里的变速(线性)运动中,我们知道,canvas没有DOM的概念,因此就更没有什么给元素绑定事件的做法。我们换个思路,要实现canvas里图形的拖拽,就相当于把图形的绘制坐标不断改变,并且这个绘制坐标是随着鼠标移动而改变的。但如何将鼠标坐标与图形绘制坐标建立关系呢? 继续阅读

发表在 前端技术 | 留下评论

canvas里的变速(线性)运动

在canvas还未成为规范前,对于html元素的动画都是通过定时器不断改变DOM属性来实现的,当到了某个目标值,我们要做的只是判断属性值是否相等然后再决定是否清空定时器。元素的动画包括线性和变速,这样的动画可以自己去写,当然也有很多类似的动画库,比如之前在做flappy bird时里面提到的tween.js。

而canvas里的动画不同于html元素,因为它没有DOM的概念 继续阅读

发表在 前端技术 | 标签为 | 留下评论

使用canvas滤镜处理图片效果

在上一篇文章中,说到了使用css3的滤镜来处理图片效果,虽然看上去很强大,通过拖动range控件也很方便来设置其对应值。但是有个问题,即你只能看到对应的效果,却无法右键保存处理的图片。你当然可以通过截图来保存,但不仅不方便,截的图也不精确。

显然,本篇文章就是为了解决以上问题而来的。

若你对canvas了解,你会发现它处理图片的功能完全不亚于css3。首先来看个demo:canvas滤镜处理图片

看完以上demo,我们就来逐一说说这些滤镜处理的实现原理:

在说明实现原理前,我们首先需要知道一些关于canvas操作图片的知识。就是对于一个绘制了图片的canvas 继续阅读

发表在 前端技术 | 标签为 | 留下评论

css3 filter

css3中filter俗称滤镜效果。它可以调整元素的色调(灰化、亮化、对比度、饱和度)、也能使元素产生模糊和反相的等效果。通常,我们使用filter的各种功能函数来处理图片,如果你将它应用于html页面,也会获得不一般的效果。这个特性支持最新版的chrome和firefox,接下来,我们来介绍filter下的八种功能:

hue-rotate 色调

hue-rotate 色调 -webkit-filter: hue-rotate(50deg); 取值为 0 – 360(可为负数),默认值为0,即没有任何效果。当值大于360,或者小于0时,会重复 0 – 360所产生的效果,即如同transform 中 rotate的取值效果。

-webkit-filter: hue-rotate(50deg);
filter: hue-rotate(50deg);

继续阅读

发表在 前端技术 | 标签为 | 留下评论