UDN-企业互联网技术人气社区

板块导航

浏览  : 2026
回复  : 2

[HTML5] 使用CANVAS实现交互性圆形马赛克效果

[复制链接]
王许柔的头像 楼主
发表于 2017-1-6 15:12:51 | 显示全部楼层 |阅读模式
  在看D3.js的时候,无意间看到了一个 例子 ,觉得很有趣,像是会分裂的圆形的马赛克。看了下代码,发现是使用svg完成的,但是具体实现方式使得在手机端无法把玩,于是就自己实现了一个canvas版本的。代码很简单,canvas初学者可以自己试试当做练笔,还是挺有趣的一个效果。

  Online Demo

  online demo

  在demo中任意从本地选择一张图片,然后通过鼠标移动或者移动端touchmove就能实现圆形分裂的效果。

  难点

  说是难点,其实根本不难。一开始看到的时候会好奇大大小小的圆形的颜色是怎么计算的,计算该面积下的平均值?其实很简单,就是从绘制了图片的canvas上获取圆心坐在图片对应位置上的颜色值。这样的算法在圆形半径较大的时候,对被遮盖的图片区域的颜色代表性其实不好,但是从整个分裂过程来看,这个取色的方案效果还不错。

  关键技术点

  canvas绘图: CanvasRenderingContext2D.drawImage()

  canvas绘制圆形: CanvasRenderingContext2D.arc()

  canvas上取指定坐标上的颜色值: CanvasRenderingContext2D.getImageData()

  思路

  将图片绘制在一个offline(即不用挂在DOM树上)的canvas上,为了在指定位置获取颜色用

  创建另一个canvas,用来绘制圆。两个canvas尺寸保持一致(而且都是方形),方便通过坐标获取颜色

  绘制第一个圆形,以canvas中心为原点,使用对应offline canvas坐标上的颜色填充

  维持一个 circles 数组,代表所有的圆,每个元素有坐标(x, y),半径(r)和是否标记分裂(readyToSplit)
 
  需要一个渲染循环(rendering loop),不断的找出被标记出来需要分裂(readyToSplit)的圆,拿去做分裂绘制

  事件处理:当mousemove或者touchmove发生在圆上时,该圆被标记 readyToSplit = true ,后面的则有渲染循环去处理

  测试驱动

  在我自己做这样的编程时,会以测试驱动的方式开始代码。因此会脑子里先写下自己写的类将被如何使用,怎么样能够简单易用。

  我打算把这个效果封装成一个类,它将在使用时被实例化。最终的效果肯定是要在DOM树上显示的,所以这里在实例化时肯定需要指定一个mount节点,所有的事情在其内部进行。而且,按照通常的习惯,开放一些配置,使得使用者可以做一些简单的定制化。但是目前还没有想好哪些内部的配置拿出来比较合适,所以第二个参数 options 可以后面再考虑。
  1. var cs = new CircleSplit('#mountNode', options);
复制代码

  我希望能够动态的切换显示的图片内容,所以想提供一个 setImage 的方法,它应该能接受图片路径,或者 Image 元素对象。
  1. cs.setImage(image);
复制代码

  OK,这就是目前我希望的实例化方式,和想要提供的接口。后面再具体实现过程中,可以再继续添加或者修改。

  试想内部

  结合前面谈到的实现思路,考虑 CircleSplit 类里面该如果定义属性和私有共有方法。

  从构造函数入手。个人习惯在构造函数最后加上init方法,init方法里做一些准备工作,完成 setImage 前的一些必要的事情。
  1. function CircleSplit (el, options) {
  2.         ...
  3.         this._init();
  4. }

  5. CircleSplit.prototype._init = function () {
  6.   this._createSourceCanvas(); // 创建源canvas,用来绘制图片,作为offline canvas,提供坐标颜色使用
  7.     this._createTargetCanvas(); // 创建目标canvas,用来绘制看到的大大小小的圆
  8.     this._render(); // 开启渲染循环
  9.     this.bindEvent(); // 绑定事件,touchmove mousemove这些
  10. }
复制代码

  这样我们一下子多了好几个函数,而且目的都很明确,因此可以很容易的判断需要那些实例属性和该如何实现各自函数体。这里可能需要多注意一下 _render() ,思路中谈到在这里应该去绘制需要分裂的圆,那么大致应该像下面这样:
  1. CircleSplit.prototype._render = function () {
  2.    // 循环体
  3.      this.circles.forEach(function (circle) {
  4.        if (circle.readyToSplit) {
  5.            this._splitCircle(circle);
  6.              circle.readyToSplit = false;
  7.          }
  8.      }, this);
  9.    
  10.      // 下一个循环
  11.      requestAnimationFrame(this._render.bind(this));
  12. }
复制代码

  而什么时候设置 circle.readyToSplit 呢?就是在 bindEvent() 的事件处理函数里面。这里会通过 _tagCircle() 遍历circles,找到能hitd到事件坐标的一个圆,将其标记(tag)上readToSplit。

  从共有方法入手。 setImage 之后,相当于将整个CircleSplit中的状态都重置了下, circles 数组得重置,两个canvas得重置等。
  1. CircleSplit.prototype.setImage = function (image) {
  2.     this._resetCanvas(this.sourceCanvas); // clear source canvas
  3.     this._drawSourceImage(image); // draw source canvas
  4.     this._resetCanvas(this.targetCanvas); // clear target canvas
  5.     this._drawCircle(x, y, r) // draw target canvas。绘制第一个,也是最大的一个圆形。圆心为canvas中心,半径为canvas的一半
  6. }
复制代码

  _drawSourceImage() 里面就是调用了 CanvasRenderingContext2D.drawImage() 进行图片绘制。这个API函数有3中传参形式,我这里选择了5参数的形式,使用了自己写的简易的居中库 CenterIt ,来解决图片居中绘制问题:无论图片尺寸,都可以轻易的居中覆盖填充(cover)或者居中包含(contain)填充。

  这里的 _drawCircle(x, y, r) 应该能重用,后面每次圆形分裂的时候都能调用。初步给它3个参数,圆心坐标和半径。在其内部应该能够自己去获取坐标对应的颜色值。所以简单想象一下它的内部:
  1. CircleSplit.prototype._drawCircle = function (x, y, r) {
  2.     ...
  3.     context.fillStyle = this._getColor(x, y); // 获取坐标颜色
  4.   context.beginPath();
  5.   context.arc(x, y, r, 0, 2 * Math.PI);
  6.   context.closePath();
  7.   context.fill();
  8.     ...
  9. }
复制代码

  绘制圆时使用 CanvasRenderingContext2D.arc() API,使用起来不算简单明了,每次还需要begin和close Path。相比而下,一些canvas的游戏库或者图形库,则简单直观的多:
  1. // create.js
  2. var circle = new createjs.Shape();
  3. circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);

  4. // two.js
  5. var circle = two.makeCircle(72, 100, 50);
  6. circle.fill = '#FF8000';
  7. circle.stroke = 'orangered';
  8. circle.linewidth = 5;
复制代码

  因此,如果要做比较复杂的绘制操作,推荐找一个适合自己的canvas库,会使得工作变得容易的多。

  关于 _getColor() 函数,这里使用了 CanvasRenderingContext2D.getImageData() :
  1. CircleSplit.prototype._getColor = function (x, y) {
  2.     ...
  3.     var pixelData = this.sourceCanvas.getContext('2d').getImageData(parseInt(x), parseInt(y), 1, 1).data;
  4.   return 'rgb(' + pixelData[0] + ',' + pixelData[1] + ',' + pixelData[2] + ')';
  5. }
复制代码

  如下图:
2.png

  假设左上角起始点为(x, y),一个方格为一个像素,那么 getImageData(x, y, 1, 1).data 就会返回 [255,0,0,255] ,代表Red=255,Alpha=255。如果 getImageData(x, y, 2, 2).data 就会返回 [255,0,0,255, 255,0,0,255, 255,0,0,255, 255,0,0,255] 长度为16的数组,每4个为一组代表一个像素上的rgba值。 getImageData() 就是一个能帮助我们对canvas进行像素级别操作的API函数。

  一些基于canvas的“刮刮卡”插件,也是 getImageData() 的应用:在图片上绝对定位一个灰色的canvas,代表刮刮卡蒙层;通过对手指触摸的像素点的alpha值进行修改来实现被“刮“开的效果。当然这里的修改需要使用到配套的 putImageData() 函数;同时对整个canvas像素中alpha值为0的像素点的百分比 进行统计,可以完成刮开了80%就展示全部图片的效果。

  实现

  上面是大致的实现思路,和编码的思想过程。为了表达出我自己在完成一个功能的时候,是如何从无到有,定义属性,定义API的。只是自己的一点经验,希望有帮助。

  如果你对这些知识不熟悉,却也感兴趣的话,可以参考该项目 代码

  问题与优化

  github上的代码与上面讲的思路一致,但是会有些不一样,主要是在功能实现之后,发现了一个需要优化的地方。

  渲染速度在 _render() 渲染循环中,我们对所有的circles进行遍历。但是当整副图片分裂次数很彻底时,会有上万个圆,会导致每个渲染循环里的计算时间过长,导致下一个渲染循环在理想的时间后才执行,从而导致了卡顿的感觉。于是为了解决这个问题,引入了 renderingCircles 数组,将被标记的circle全部插入这个数组中,渲染循环中只关心这里的值,用额外的存储空间换更短的计算时间。

  显示模糊最先的实现中,两个canvas得尺寸是根据mountNode决定的, canvas.width `canvas.height`被设为和mountNode一样的维度值。于是在一些设备上显示出明显的边缘锯齿。这里的解决方案就是设置canvas的宽和高为两倍于mountNode的宽高,然后通过style去设置canvas显示成和mountNode一样的尺寸。这里就是canvas的自身的宽高属性和canvas style的宽高之前的区别的理解和应用。

  图片跨域问题

  在canvas操作图片时,可能会碰到这样的错误信息:Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

  关于这个的 官方解释 是:在canvas上可以绘制没有跨域许可的图片资源(images without CORS approval),但是这样做会“感染(taints)”的canvas,而在感染的(tainted)canvas上调用 toBlog() , toDataURL() , getImageData() 会抛出上面的安全方面的错误。

  在 CircleSplit.setImage(imageUrl) 时,可能就会碰到这个问题。

  解决方案,首先需要图片有跨域许可。这个需要在提供图片服务的server上进行配置。这里不多介绍,有跨域许可的图片被加载时,在控制台上应该能看到:(这里我使用的七牛的图片)
1.png

  其次,需要在加载图片时,设置crossOrigin属性:
  1. var image = new Image();
  2. image.crossOrigin = 'anonymous';
  3. image.onload = function () {};
  4. image.src = imageUrl;
复制代码

  应用

  其实个人很喜欢最后完成的交互效果(有点强迫症,喜欢不断的戳掉泡泡),于是将这个小效果做了一个简单的H5页面,在年底这个时间点里,讲述和回顾在2016年的大事件。你也可以来体验下: 2016-recap

相关帖子

发表于 2017-1-6 15:13:20 | 显示全部楼层
回帖支持下楼主,请眼熟我,我叫单剑↘走天涯
使用道具 举报

回复

发表于 2017-1-6 15:37:42 来自手机 | 显示全部楼层
HTML5还是很有前景的
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部