• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载
 访客
首页 » 代码教程 » JavaScript » 正文

为长阴影设计创建一个jQuery插件

ngkoma • 2年前 (2022-06-05) • JavaScript

为长阴影设计创建一个jQuery插件 第1张您将要创建的内容

长阴影设计是平面设计的一种变体，其中添加了阴影，产生深度错觉，从而使设计看起来具有 3D 立体感。在本教程中，我们将创建一个 jquery 插件，它允许我们通过添加完全可定制的长阴影图标来轻松转换平面图标。

为长阴影设计创建一个jQuery插件 第2张

在本教程中，我们将了解长阴影设计的元素，我们将创建一个简单的 jQuery 插件来控制这些元素。 

让我们开始吧！

长影设计的要素是什么？

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

为长阴影设计创建一个jQuery插件 第3张

  • 主要元素，或投射阴影的元素。

  • 阴影长度，通常很长，因此给出了效果的名称。阴影长度也给人一种主要元素有深度的错觉。

  • 阴影方向或角度。在现实世界中，这是由光源位置决定的。通常，光源投射的所有阴影都具有相同的方向。

  • 阴影颜色和不透明度。光源颜色会影响阴影的颜色。此外，光源越强，阴影越暗越清晰。

这些元素放在一起创造了一种错觉，即主要元素不是平面的，而是一个投射阴影的 3D 对象。

现在让我们创建一个 jQuery 插件来控制这些元素。

创建长阴影 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。 

请注意，如果您的图像具有多种颜色，则结果将全部为相同颜色，如 所示 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
    });
});

结果是这样的图像：

为长阴影设计创建一个jQuery插件 第4张

由于此插件是可配置的，并且可以应用于任何图像、多个图像以及参数值的无限组合，因此想象力是您唯一的限制。如果我们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'
    });
});

我们得到这个结果，非常适合网站标题设计：

为长阴影设计创建一个jQuery插件 第5张

此外，使用不同图像的其他示例：

<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插件 第6张

恭喜

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


文章目录
  • 长影设计的要素是什么？
  • 创建长阴影 jQuery 插件
  • 我们如何使用 jQuery Long Shadows 插件？
  • 恭喜

    • 如无特殊说明，文章均为本站原创，如若转载，请注明出处：老吴教程
    视频资源部分来自互联网，勿轻易相信视频广告！请自行鉴别避免上当受骗！
    文章标题：为长阴影设计创建一个jQuery插件
    文章地址：https://www.weixiaolive.com/en/index.php/post/277.html

    相关推荐

      最新文章 | 热门文章 | 随机文章

    站长SO库
    源码
    阿里云