turnjs fabricjs canvas 翻书

2024年1月19日 222次阅读 来源: charles

近来做了一个翻书结果的项目, 来总结一下完成历程和碰到的一些题目, 供本身今后疾速处置惩罚题目, 愿望也能帮到一样碰到此类题目的同砚, 假如有更好的要领,愿望你能分享给我
git地点

插件:

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

题目都是些本身觉的比较难处置惩罚的, 比较单方面, 若有其他疑问能够留言交换或许Bing

Turn.js

当你从Turn官网下载下来文件后它内里会供应5种事例代码, 依据需求我用的是docs, 先看一段简朴的事例代码:

  • HTML
<div id="flipbook"></div>
  • 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)

团体思绪是如许的:

  1. 用Promise加载图片, 同时将promisepush到数组promiseArr中, 能够用来推断图片是不是都下载完和做对照推断.
  2. 假定第一页有20个图片, 每建立一个Promise就在stepCounter中对应的属性纪录一下, 对照推断.
  3. 把图片的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}';

所以直接调接口本身写了个

    原文作者：charles
    原文地址: https://segmentfault.com/a/1190000008150419
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞