ImageDrawer.js图片绘制插件

最新推荐文章于 2024-04-16 10:00:33 发布

weixin_30735391

最新推荐文章于 2024-04-16 10:00:33 发布

阅读量231

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhaozhou/p/9868968.html

版权

ImageDrawer.js图片绘制插件有以下一些可用的配置参数。

Duration：整个动画或每个步骤的绘制时间（以秒为单位）
Background：在绘图时将颜色放在图片上
Callback：绘画结束时调用onece的函数
Pencil：绘图铅笔图像的选项对象
Width：铅笔图像宽度
Height：铅笔图像高度
marginTop：图片上的铅笔图像上边距
Marginalft：图片上的铅笔图像上边距
Disappear：绘图完成后，使铅笔消失的秒数
fromBottom：从图片的底部开始绘图
invertAxis：垂直绘制图像
Src：铅笔图像路径

效果案例：网络不佳这下载观看

<!DOCTYPE html>
<html>
<head>
    <title>动态绘图</title> 
    <link rel="stylesheet" type="text/css" href="http://p8sv0x8g6.bkt.clouddn.com/imagedrawer.css">
    <style type="text/css">
        html, body, #main {
            margin: 0px;
            padding: 0px;
            overflow: hidden;
            width: 100%;
            height: 100%;
            min-width: 100%;
            max-width: 100%;
            min-height: 100%;
            max-height: 100%;
        }

        #container {
            width: 1000px;
            margin: auto;
            margin-top: 50px;
        }
            #container img {
                width: 100%;
                height: 100%;
            }
    </style>
</head>
<body>
    <div class="htmleaf-container">
      
        <div id="main">
            <div id="container">
                <img id="bob" src="http://p8sv0x8g6.bkt.clouddn.com/imgdrm.jpg">
            </div>
        </div>
    </div>

    <script src="http://p8sv0x8g6.bkt.clouddn.com/jquery-2.1.1.min.js"></script>
    <script src="http://p8sv0x8g6.bkt.clouddn.com/imagedrawer.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('div#container').drawImage();
        });
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/zhaozhou/p/9868968.html

weixin_30735391

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ImageDrawer.js图片绘制插件

ImageDrawer.js图片绘制插件有以下一些可用的配置参数。Duration：整个动画或每个步骤的绘制时间（以秒为单位）Background：在绘图时将颜色放在图片上Callback：绘画结束时调用onece的函数Pencil：绘图铅笔图像的选项对象Width：铅笔图像宽度Height：铅笔图像高度margi...
复制链接

扫一扫