jQuery插件ImageDrawer.js实现动态绘制图片动画攻略

ImageDrawer.js简介

ImageDrawer.js是一款基于jQuery的插件，可以实现动态绘制图片动画的效果。它通过将图片切割成一张张小图像，并在画布上绘制并动态显示这些小图像，从而形成一个连贯的动画效果。

ImageDrawer.js的特点是支持设置图像路径、可调整绘制速度、支持暂停和重启、支持多个实例等。

ImageDrawer.js使用方法

HTML布局

首先，在HTML中，需要创建一个容器元素，用于放置ImageDrawer.js插件画布。可以将容器元素定位到页面指定位置：

<div id="imageDrawer"></div>

引入jQuery和ImageDrawer.js

在使用ImageDrawer.js之前，需要先引入jQuery库。可以通过CDN引入，也可以下载到本地后引入。然后再引入ImageDrawer.js插件。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="ImageDrawer.js"></script>

设置图像路径

接着，需要设置图像路径。可以使用ImageDrawer.js提供的setImage方法，通过指定图片路径来加载图片，并将其切割成小图像：

$("#imageDrawer").ImageDrawer("setImage","path/to/image.png");

设置绘制速度

ImageDrawer.js支持设置绘制速度。默认速度为100ms/帧。可以使用ImageDrawer.js提供的setSpeed方法，通过指定绘制速度来控制绘制速度：

$("#imageDrawer").ImageDrawer("setSpeed",50); // 设置绘制速度为50ms/帧

暂停和重启

ImageDrawer.js支持暂停和重启绘制动画。可以使用ImageDrawer.js提供的pause方法暂停动画，setTime方法来重新开始动画：

$("#imageDrawer").ImageDrawer("pause"); // 暂停绘制动画
$("#imageDrawer").ImageDrawer("setTime", 0); // 重新开始绘制动画

支持多个实例

ImageDrawer.js支持多个实例。创造实例时，需要将不同容器元素初始化为ImageDrawer.js的实例：

$("#imageDrawer1").ImageDrawer({...});//创建1个实例
$("#imageDrawer2").ImageDrawer({...});//创建另1个实例

示例说明

示例1：绘制《夏目友人帐》中的猫咪形象

<div id="imageDrawer"></div>

$(document).ready(function(){
    $("#imageDrawer").ImageDrawer({
        imagePath: "https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js",
        imageWidth: 1240,
        imageHeight: 1754,
        frameWidth: 620,
        frameHeight: 877,
        totalFrame: 4,
        rowFrame: 2,
        speed: 50,
        repeat: true,
        autoStart: false
    });
});

这个示例中，我们的canvas画布大小设置为宽620，高877。猫咪图片大小为1240 x 1754，我们将它分为2行4列，用totalFrame来表示猫咪图像个数。speed设为50ms，图片播放速度更快。

示例2：通过在canvas上绘制线条动态地生成文字

<div id="imageDrawer"></div>

$(document).ready(function(){
    var canvaswidth = 300;
    var canvasheight = 150;
    $("#imageDrawer").ImageDrawer({
        imagePath: "",
        canvasWidth: canvaswidth,
        canvasHeight: canvasheight,
        lineWidth: 1,
        lineColor: "black",
        lines: [
            {x: 20, y: 50},
            {x: 120, y: 30},
            {x: 220, y: 70},
            {x: 270, y: 100},
            {x: 280, y: 130}
        ],
        speed: 50,
        repeat: true,
        autoStart: false
    });
});

这个示例中，我们没有使用图片来动态绘制，而是通过在canvas上绘制线条，动态地生成出了文字。我们的线条信息全部以对象的形式缓存在lines数组中。AutoStart设置为false，接着我们可以触发动画启动：