创建用于长阴影设计的jQuery插件

最新推荐文章于 2021-06-20 12:27:01 发布

cunjie3951

最新推荐文章于 2021-06-20 12:27:01 发布

阅读量175

点赞数

文章标签： js java python css javascript ViewUI

长阴影设计是平面设计的一种变体，其中添加了阴影，从而产生了深度的幻觉，并最终形成了三维外观。在本教程中，我们将创建一个jQuery插件，该插件将允许我们通过添加完全可自定义的长阴影图标轻松地转换平面图标。

如果您对用于向图标和文本添加长阴影的完整jQuery插件感兴趣，请查看CodeCanyon上的Long Shadow jQuery插件。

在本教程中，我们将研究长阴影设计的元素，我们将创建一个简单的jQuery插件，该插件将使我们能够控制这些元素。

让我们开始吧！

长阴影设计的要素是什么？

让我们分解一下构成长阴影设计的元素。我们可以看到我们有：

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

这些元素放在一起会产生一种幻觉，即主要元素不是平坦的，而是实际上是投射阴影的3D对象。

现在让我们创建一个jQuery插件，使我们可以控制这些元素。

创建Long Shadows 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 canvas组件。我们可以创建一个内存画布，在画布上绘制原始图像元素及其阴影的副本。为了绘制阴影，我们只需将图像元素的副本一点一点地画在另一个上即可。

使用基于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元素，在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 。

请注意，如果您的图像具有多种颜色，则结果将全部具有相同的颜色，如shadowColor ，在我们的情况下这是正确的，因为我们正在绘制阴影，并且阴影通常是相同的颜色。

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

当绘制完整个阴影时，我们必须最后进行此操作，否则将透明图像堆叠在一起会导致渐变效果。

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

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

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

我们如何使用jQuery Long Shadows插件？

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

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

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

这指示浏览器，当页面完成加载时，应将longshadows插件应用于具有ID logo的元素。

像这样调用插件将使用默认参数。由于使用这些默认参数的结果看起来并不理想，因此让我们看看如何进行更改。让我们这样称呼插件：

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

结果是这样的图像：

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

<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="background-color:#e37e52;" 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>

为此，我们利用可以从附件下载的tutsplus.png图像。请注意，我们能够将插件与CSS样式结合使用，在此示例中，在图标周围添加了彩色矩形。

恭喜啦

现在，您已经具有创建jQuery插件的基本知识，该插件会在图标上添加长长的阴影。您可以在此插件的基础上构建并使其适用于文本，例如，或组合多个图像和阴影效果。

如果您对带有更多配置选项的完整的long shadows插件感兴趣，请查看CodeCanyon项： Long Shadow jQuery Plugin 。

翻译自: https://code.tutsplus.com/tutorials/creating-a-jquery-plugin-for-long-shadow-design--cms-28924

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
创建用于长阴影设计的jQuery插件

您将要创造的长阴影设计是平面设计的一种变体，其中添加了阴影，从而产生了深度的幻觉，并最终形成了三维外观。在本教程中，我们将创建一个jQuery插件，该插件将允许我们通过添加完全可自定义的长阴影图标轻松地转换平面图标。如果您对用于向图标和文本添加长阴影的完整jQuery插件感兴趣，请查看CodeCanyon上的Long Shadow jQuery插件。在本教程中，我们将研...
复制链接

扫一扫