摘要：最近做了一個翻書效果的項目來總結一下實現過程和遇到的一些問題供自己以后快速解決問題希望也能幫到同樣遇到此類問題的同學如果有更好的方法希望你能分享給我地址插件問題都是些自己覺的比較難解決的比較片面如有其他疑問可以留言交流或者當你從官網下載

最近做了一個翻書效果的項目, 來總結一下實現過程和遇到的一些問題, 供自己以后快速解決問題, 希望也能幫到同樣遇到此類問題的同學, 如果有更好的方法,希望你能分享給我
git地址

插件:

Turn.js, Fabric.js, Touch.js, jQuery.js, jQuery-ui.js, ES6-Promise

問題都是些自己覺的比較難解決的, 比較片面, 如有其他疑問可以留言交流或者Bing

Turn.js

當你從Turn官網下載下來文件后它里面會提供5種事例代碼, 根據需求我用的是docs, 先看一段簡單的事例代碼:

HTML

JS

$("#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則不能(只是猜想沒有驗證).

Fabric.js

這里每一頁內容都是由圖片, 文字, 線段組成的, 所以用了canvas.

第一個問題是背景平鋪問題, 因為在Fabric文檔中好像不支持背景平鋪, 也可能是我沒有找到, 所以就用了這種方式, 直接給畫布加背景:

$("#canvas").css({
  "background-image":"url(" + url + ")",
  "background-size": "size"
})

第二個問題是繪制貝塞爾曲線問題, 在繪制貝塞爾曲線用的是Path方法, 先看段代碼:

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.

第三個問題是層級問題, 你想文字在圖片上面, 你想小的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加載圖片, 同時將promisepush到數組promiseArr中, 可以用來判斷圖片是否都下載完和做對比判斷.

假設第一頁有20個圖片, 每創建一個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}";

所以直接調接口自己寫了個