FlipZine

星空之上，灵动之美，奔放空灵

精美与华丽的交汇正如此刻的时间和空间，生出一番别样的灵韵

大道至简，至臻至美，一切只为更好

特点

• 可在画布上使用简单的图像和复杂的HTML块
• 拥有简单的API和灵活的配置
• 与移动设备兼容
• 支持横向和纵向屏幕模式，自动适配可视屏幕
• 支持软性和硬性页面类型（仅在HTML模式下）
• 拥抱TS，无任何依赖

安装

使用npm安装最新版本

npm install flipzine --save-dev

或者从码云上下载 https://gitee.com/dewapex/flipzine.git

使用

如果你已经通过npm安装了软件包，你应该从flipzine软件包中导入FlipZine，或者直接使用<script/>标签。

<script src="{path/to/scripts}/fz.webpack.browser.js"></script>

创建新的FlipZine对象：

import { FlipZine } from 'flipzine';

const fz = new FlipZine(htmlParentElement, settings);

// 如果你通过script标签引入fz.webpack.browser.js，请使用如下代码创建:
const fz = new Flip.FlipZine(htmlParentElement, settings);

htmlParentElement : HTMLElement- 根元素，书籍将在这里被创建

settings: object - 配置对象

要从画布上加载页面，请使用 loadFromImages:

fz.loadFromImages(['path/to/image1.jpg', 'path/to/image2.jpg' ... ]);

要从html元素中加载页面，请使用 loadFromHtml:

fz.loadFromHtml(items);

例如：

<div id="book">
    <div class="my-page" data-density="hard">
        Page Cover
    </div>
    <div class="my-page">
        Page one
    </div>
    <div class="my-page">
        Page two
    </div>
    <div class="my-page">
        Page three
    </div>
    <div class="my-page">
        Page four
    </div>
    <div class="my-page" data-density="hard">
        Last page
    </div>
</div>

const fz = new FlipZine(document.getElementById('book'), {
    width: 400, // 必要参数 - 基本页面宽度
    height: 600, // 必要参数 - 基本页面高度
});

fz.loadFromHTML(document.querySelectorAll('.my-page'));

使用data-density="hard"属性来指定页面类型（soft | hard）并定义翻转动画。

配置

在创建一个对象时要定义这些参数。

• width: number - required
• height: number - required
• size: ("fixed", "stretch") - 默认值: "fixed" 书籍是否在父元素下被拉长
• minWidth, maxWidth, minHeight, maxHeight: number 你必须设置书籍尺寸的阈值: "stretch"
• drawShadow: bool - 默认值: true 翻页时是否绘制阴影
• flippingTime: number (milliseconds) - 默认值: 1000 翻页动画时长
• usePortrait: bool - 默认值: true 允许切换到纵向模式，这种模式使用克隆html元素（页面）
• startZIndex: number - 默认值: 0 z-index的初始值
• startPage: number - 默认值: 0 书籍渲染成功后的初始页码
• autoSize: bool - 默认值: true 如果此值为真，父元素将等于书的大小
• maxShadowOpacity: number [0..1] - 默认值: 1 阴影强度（1：最大强度，0：隐藏阴影）
• showCover: boolean - 默认值: false 如果此值为真，第一页和最后一页将被标记为硬面，并将以单页模式显示
• mobileScrollSupport: boolean - 默认值: true 在移动设备上触摸书本时禁止内容滚动
• swipeDistance: number - 默认值: 30 (px) 检测滑动的最小距离（1.1.0版的新内容）
• clickEventForward: boolean - 默认值: true 将点击事件转发到页面的子HTML元素（仅适用于a和button标签）（1.1.0的新功能）
• useMouseEvents: boolean - 默认值: true 使用鼠标和触摸事件进行翻页（1.2.0的新功能）
• disableFlipByClick: boolean - 默认值: false 如果这个值为真，通过点击整本书进行翻转将被锁定。点击只能在角落里工作（2.0.3版的新内容）

事件

监听事件请使用on方法:

fz.on('flip', (e) => {
    // callback code
    alert(e.data); // current page number
});

可用事件：

• flip: number - 翻页时触发
• changeOrientation: ("portrait", "landscape") - 页面方向改变时触发
• changeState: ("user_fold", "fold_corner", "flipping", "read") - 书籍状态发生变化时触发
• init: ({page: number, mode: 'portrait', 'landscape'}) - 当书籍被初始化且起始页加载时触发。在使用 "loadFrom... "方法之前，先监听（on）这个事件
• update: ({page: number, mode: 'portrait', 'landscape'}) - 当书籍页面更新时触发（使用 "updateFrom... "方法）

事件对象有两个字段。data: number | string和object: FlipZine。

方法

• getPageCount: number - 获取书籍的总页数
• getOrientation: 'portrait', 'landscape' - 获取当前方向：纵向或横向
• getBoundsRect: PageRect - 获取当前书籍的尺寸和位置
• getCurrentPageIndex: number - 获取当前页码（从0开始）
• turnToPage(pageNum: number) - 翻到指定的页码（无动画）
• turnToNextPage() - 翻到下一页(无动画)
• turnToPrevPage() - 翻到前一页(无动画)
• flipNext(corner: 'top' | 'bottom') - 翻到下一页(有动画)
• flipPrev(corner: 'top' | 'bottom') - 翻到前一页(有动画)
• flip(pageNum: number, corner: 'top' | 'bottom') - 翻到指定的页码（有动画）
• loadFromImages(images: ['path-to-image1.jpg', ...]) - 从图像中加载页面
• loadFromHtml(items: NodeListOf | HTMLElement[]) - 从html元素中加载页面
• updateFromHtml(items: NodeListOf | HTMLElement[]) - 从html元素中更新页面（0.4.0版新增）
• updateFromImages(images: ['path-to-image1.jpg', ...]) - 从图像中更新页面（0.4.0版新增）
• destroy() - 销毁器。删除一个根HTML元素和所有的事件处理程序（0.4.0的新功能）