小教程：自己创建一个jQuery长阴影插件

长阴影设计是平面设计的一个变体，添加了阴影，产生了深度的幻觉，并导致了三维的设计。在本教程中，我们将创建一个jQuery插件，通过添加完全可自定义的长阴影图标，我们可以轻松地转换平面图标。

戳我查看效果图

在本节教程中，我们将介绍长阴影设计的元素，我们将创建一个简单的jQuery插件，让我们来设计这些元素。

让我们开始吧！

长阴影元素设计设计是什么？

我们将把这个元素分离为不同的部分，以此组成一个完整的长阴影设计：

主要元素，或元素投射阴影。
阴影长度通常很长，因此给出了效果的名称。阴影长度也给出了主要元素具有深度的幻觉。
阴影方向或角度。在现实世界中，这取决于光源的位置。通常，光源投射的所有阴影都有相同的方向。
阴影颜色和不透明度。光源颜色影响阴影的颜色。而且，光源越强，阴影越黑暗。

这些元素叠加在一起构成了3D立体效果。

创建长阴影jQuery插件

要创建jQuery长阴影插件，我们将设置一个基本的jQuery插件项目结构，如下所示：

创建一个文件夹来保存项目文件。我们可以为这个文件夹取名为 long-shadows-jquery-plugin。
在项目文件夹中，创建一个 index.html。这将包含我们的HTML代码。
创建一个文件，调用它 jquery.longshadows.js，并将其放在文件夹中。这将包含我们的jQuery插件的JavaScript代码。
为了保持模块分离，我们还将在此文件夹中创建另一个JavaScript文件并将其命名 script.js。我们将在这里使用我们刚刚创建的jQuery插件。
在项目文件夹中，heart.png可以在本教程的附件中找到可以找到的图标。

我们 index.html将包含一个基本的HTML结构，并且还将包括jQuery和我们的JavaScript文件。我们需要包含jQuery库，因为我们将实现一个jQuery插件。该 index.html文件应如下所示：

<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.longshadows.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <img src="heart.png" id="logo">
</body>
</html>

jquery.longshadows.js文件将包含jQuery插件代码，我们将向下面一样实现它：


(function($) {
    $.fn.longshadows = function(options) {
        var settings = $.extend({
            //options defaults go here
            ...
        }, options);
        //this applies the plugin to all matching elements
        return this.each(function() {
            //code of the plugin comes here
            ...
        });
    }
})(jQuery);

我们将从script.js文件中调用插件。需要的参数有：

shadowColor：主元素投射的阴影的颜色。
shadowLength：投影的长度。
shadowAngle阴影的角度。
shadowOpacity：阴影是不透明或透明的。
spacing：我们需要这个变量来扩展我们创建长阴影的元素周围的空间。这样，效果就会更明显。

要创建长阴影，我们将使用HTML5画布组件。我们可以创建一个内存画布，我们将在其上绘制原始图像元素及其阴影的副本。要绘制阴影，我们将简单地将图像元素的副本绘制在另一个的顶部，稍微带点偏移。

使用基于shadowLength和 shadowAngle参数的简单极坐标变换来计算份数和偏移量。另外，我们必须根据shadowColor参数设置的阴影的颜色对这些副本进行着色。

因为我们将阴影画成彼此之间的多个图像，所以我们将以相反的顺序从后到前绘制它们，从最远离图像元素的阴影开始。然后我们必须通过shadowOpacity参数设置所产生阴影的不透明度。

绘制阴影后，我们将简单地绘制原始图像。

我们来看看这个如何转换成jquery.longshadows.js文件中的代码：

(function($) {
    $.fn.longshadows = function(options) {
        var settings = $.extend({
            shadowColor: "black",
            shadowLength: 100,
            shadowAngle: 45,
            shadowOpacity: 100,
            spacing: 0
        }, options);
 
        return this.each(function() {
            var img = this;
            img.onload = function() {
 
                var self = this;
                var canvas = document.createElement("canvas");
                var ctx = canvas.getContext("2d");
                canvas.width = self.width + settings.spacing;
                canvas.height = self.height + settings.spacing;
 
                for (var r = settings.shadowLength; r >= 1; r--) {
                    var x = Math.round(r * Math.cos(settings.shadowAngle * Math.PI / 180));
                    var y = Math.round(r * Math.sin(settings.shadowAngle * Math.PI / 180));
 
                    ctx.save();
                    ctx.translate(x + settings.spacing / 2, y + settings.spacing / 2);
                    ctx.drawImage(self, 0, 0);
                    ctx.globalCompositeOperation = 'source-in';
                    ctx.fillStyle = settings.shadowColor;
                    ctx.rect(0, 0, canvas.width, canvas.height);
                    ctx.fill();
                    ctx.restore();
                }
                 
                var tempCanvas = copyCanvas(canvas, settings.shadowOpacity / 100.0);
 
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(tempCanvas, 0, 0);
                ctx.drawImage(self, settings.spacing / 2, settings.spacing / 2);
 
                self.onload = null;
                $(self).attr("src", canvas.toDataURL("image/png"));
            };
            img.src = img.src;
        });
    };
})(jQuery);
 
function copyCanvas(canvas, opacity) {
    var canvasDest = document.createElement("canvas");
    canvasDest.width = canvas.width;
    canvasDest.height = canvas.height;
    canvasDest.getContext("2d").globalAlpha = opacity;
    canvasDest.getContext("2d").drawImage(canvas, 0, 0);
    return canvasDest;
}

这个插件通过options传递参数。这些参数将与默认值合并并存储在 settings变量中。这样我们可以快速地使用插件，而不需要传递任何参数。

img变量将保存于我们应用效果原始图像元素的引用。我们需要监听图像的onload 事件，以确保在应用效果时图像被完全加载。此外，将注意到，在onload 之后还有一个img.src = img.src;。这将触发 onload功能，因为我们不确定浏览器加载图像和脚本的顺序。

在onload 处理程序内部，我们创建内存 canvas元素，我们将在其中绘制最终结果，与图像的大小相同spacing。然后，从最远点向中心开始，我们使用绘制的图像的偏移的极坐标变换绘制画布上的图像副本：

var x = Math.round(r * Math.cos(settings.shadowAngle * Math.PI / 180));
var y = Math.round(r * Math.sin(settings.shadowAngle * Math.PI / 180));

要在画布上绘制图像，我们使用画布2D上下文并调用 drawImage()函数。这将在画布上绘制图像的副本，但是我们需要的是它的彩色版本。为此，我们利用画布合成操作。在这个教程中，将 source-in与用shadowColor填充的矩形一起使用，这将使图像副本与原始图像具有相同形状但颜色是 shadowColor。

请注意，如果你有多种颜色的图像，则结果将全部为相同的颜色，因为我们正在绘制阴影，而阴影通常是相同的颜色。

for循环负责绘制阴影; 然而，它是完全不透明的。我们希望能够使用shadowOpacity参数设置阴影不透明度。为此，我们使用 copyCanvas()函数，该函数利用临时画布并将canvas内容的不透明度设置为指定的值。

我们必须在整个阴影被绘制出来时进行这一步，否则堆叠透明图像在彼此之上将导致渐变效果。

让我们来看看onload处理程序的最后两行：

self.onload = null;
$(self).attr("src", canvas.toDataURL("image/png"));

第一行onload从图像中移除处理程序。我们这样做是因为在下一行中，我们想将在画布上绘制的图像设置src为原始图像的新图像。如果我们没有删除处理程序，那么我们将进入一个无限循环。

如何使用jQuery长阴影插件？

现在我们已经实现了这个插件，我们来看看我们如何实际使用它以及它产生的结果。为此，我们将使用该 script.js文件，我们将在其中调用刚创建的插件。

调用插件的最简单的方法是：


$(document).ready(function(){
    $("#logo").longshadows();
});

这将指示浏览器当页面完成加载时，调用longshadows()函数.

调用这样的插件将使用默认参数。由于使用这些默认参数的结果并不是很好，我们来看看我们如何改变它们。让我们像这样调用插件：

$(document).ready(function(){
    $("#logo").longshadows({
        spacing:50,
        shadowOpacity:30,
        shadowAngle:30,
        shadowLength:400
    });
});

这导致像这样的图像：

从我们的插件得到的图像

由于这个插件是可配置的，可以应用于任何图像，多个图像以及参数值的无尽组合，想象力是你唯一的限制。如果我们index.html像这样调整HTML ：


<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.longshadows.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <style type="text/css">
        body{
            background:rebeccapurple;
            padding: 0;
            margin:0;
        }
        .text{
            display: inline-block;
            margin-top: 50px;
            width: 400px;
        }
        h1 {
            color:white;
            font-family: sans-serif;
            font-size:46px;
        }
        p{
            color:white;
            font-size:18px;
        }
        #logo{
            vertical-align: top;
        }
    </style>
</head>
<body>
    <img src="heart.png" id="logo">
    <div class="text">
        <h1>Long Shadows jQuery Plugin</h1>
        <p>Long shadow design is a variation of flat design to which shadows are added creating the illusion of depth and resulting in a design that looks 3-dimensional.</p>
    </div>
</body>
</html>

此外，如果我们script.js使用这些参数调用插件：

$(document).ready(function(){
    $("img").longshadows({
        spacing:150,
        shadowOpacity:20,
        shadowAngle:160,
        shadowLength:400,
        shadowColor:'#330000'
    });
});

我们得到这个结果，这是完美的网站标题设计：

使用长阴影效果的示例：

<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.longshadows.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <style type="text/css">
         
        .text{
            display: inline-block;
            margin-top: 0px;
            margin-left: 10px;
            width: 400px;
        }
        h1 {
            font-family: sans-serif;
            font-size:36px;
            margin-top: 0;
        }
        p{
            font-size:14px;
        }
        #logo{
            vertical-align: top;
        }
 
         
    </style>
</head>
<body>
    <img style="" src="tutsplus.png" id="logo">
    <div class="text">
        <h1>Tuts+</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>    
     
</body>
</html>

Congratulations

你现在有了创建一个jQuery插件的基础，它为你的图标添加了长阴影。你可以在此插件之上构建，使其适用于文本，或组合多个图像和阴影效果。

原文来自here哈哈~更多有趣的教程来这里瞄瞄瞄

posted @ 2017-08-16 15:09 igeekbar 阅读(641) 评论(0) 编辑收藏举报

刷新页面返回顶部

小教程：自己创建一个jQuery长阴影插件

长阴影元素设计设计是什么？

创建长阴影jQuery插件

如何使用jQuery长阴影插件？

Congratulations

公告

中文互联： GBin1.com | RSS订阅 | 邮件订阅 | 手机订阅