最近作了一个翻书效果的项目, 来总结一下实现过程和遇到的一些问题, 供本身之后快速解决问题, 但愿也能帮到一样遇到此类问题的同窗, 若是有更好的方法,但愿你能分享给我
git地址php
插件:
Turn.js, Fabric.js, Touch.js, jQuery.js, jQuery-ui.js, ES6-Promisecss
问题都是些本身觉的比较难解决的, 比较片面, 若有其余疑问能够留言交流或者Bingjquery
Turn.js
当你从Turn官网下载下来文件后它里面会提供5种事例代码, 根据需求我用的是docs, 先看一段简单的事例代码:git
<div id="flipbook"></div>
$('#flipbook').turn({ width: width, height: height, pages: length, autoCenter: true, when: { // 处理事件 missing: function(e, pages) { // e:(event), pages:(type:arr,须要添加的页数) var book = $(this) pages.forEach(function(item, i) { addPage(item, i, data) }) } } })
把你的内容放在flipbook下面, 而后经过turn(object)来初始化你的数据, 固然你也可使用DOM添加数据, 而后再初始化数据.区别多是经过missing事件监听能够及时知道数据变化, 而经过DOM则不能(只是猜测没有验证).es6
Fabric.js
这里每一页内容都是由图片, 文字, 线段组成的, 因此用了canvas.github
第一个问题是背景平铺问题, 由于在Fabric文档中好像不支持背景平铺, 也多是我没有找到, 因此就用了这种方式, 直接给画布加背景:json
$('#canvas').css({ 'background-image':'url(' + url + ')', 'background-size': 'size' })
第二个问题是绘制贝塞尔曲线问题, 在绘制贝塞尔曲线用的是Path方法, 先看段代码:canvas
var path = new fabric.Path('C43,128,28,143,17,153C14,156,12,158,12,158z', { opacity: .5, // 线条透明度 stroke: '#e4393c', // 颜色 strokeLineCap: 'round', // 线头样式 strokeWidth: 3, // 线宽 fill: false, // 填充透明 strokeLineJoin: 'round' // 交点样式 }) canvas.add(path) // 添加到canvas上
你能够经过这种方式来加曲线, 其实完整写法是new Path('M0,0L100,100C50,50,60,60,70,70z', {})
其中字母也能够小写, 逗号能够用空格代替或者短横线, 应该也支持其余的(我没试过)M表明将点移动那里而后L画出一条线, C表明开始画贝塞尔曲线, 是三次贝赛尔曲线(还有二次的,不知道Bing下), 三次贝塞尔曲线须要4个点来控制, 第一个点就是代码里面的(100,100), 紧接着是第一个控制点(50,50), 第二个控制点(60,60), 最后一个点(70,70)结束点z封闭一下. 你想在C后面加8个数? 别试了, 我试过没用. 在绘制过程当中你会发现绘制出来的曲线老是首尾相连,若是不合需求你在绘制的最后就不能加z, 同时把fill设置为false.api
第三个问题是层级问题, 你想文字在图片上面, 你想小的logo在最顶部可是每每绘制出来并非你想要的效果, 这是由于图片和logo大部分都是图片, 请求是异步的, 你把异步拿来的图片画上去设置zindex并不能达到预期的效果, 先看代码:数组
var stepCounter = {}, layerArr = [], promiseArr = [] function adjustment(canvas, img, index) { var obj = new Object() obj.canvas = canvas obj.img = img obj.index = index return obj } function draw() { var promise = new Promise(function(res, rej) { var img = new Image() stepCounter[num] += 1 img.src = url img.onload = function() { res(img) } }) promise.then(function(img) { Img = new fabric.Image(img, { ... // 设置一些属性 }) canvas.add(Img) obj = adjustment(canvas, Img, -50) layerArr.push(obj) promiseArr.push(promise) }) } setTimeout(function() { if (stepCounter[i] == promiseArr.length) { Promise.all(promiseArr).then(function() { layerArr.sort(function(a, b) { return a.index - b.index }) layerArr.forEach(function(item, i) { var c = item.canvas c.moveTo(item.img, i) c.renderAll() }) }) return } setTimeout(arguments.callee, 50) }, 50)
总体思路是这样的:
Promise
加载图片, 同时将promise
push到数组promiseArr
中, 能够用来判断图片是否都下载完和作对比判断.Promise
就在stepCounter
中对应的属性记录一下, 对比判断.zIndex
和一些必要信息放在一个数组中(layerArr)
, 图片下载完调整zIndex
.最后用setTimeout
检测当页绘制的图片与promise.length
是否相同, 相同就证实全部图片都在加载中, 再用Promise.all()
肯定图片加载完成后就能够调整图片的zIndex
了, 我参考了stackoverflow0, stackoverflow1, 考虑到Promise
的兼容性, 须要引入ES6-Promise
翻书区域
用了Touchjs模拟, 就很少说了, 很简单.
分享
原来用的是jiathis分享, https后不能用了, 多是不支持.
var qzone = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={url}&title={title}&pics={pic}&summary={content}'; var sina = 'http://service.weibo.com/share/share.php?url={url}&title={title}&pic={pic}&searchPic=false'; var weixin = 'http://qr.liantu.com/api.php?text={url}';
因此直接调接口本身写了个