小教程：自己創建一個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插件的基礎，它為你的圖標添加了長陰影。你可以在此插件之上構建，使其適用于文本，或組合多個圖像和陰影效果。
浙公網安備 33010602011771號