Python小程式——利用wordcloud庫生成詞雲（二）
wordcloud庫利用wordcloud物件生成詞雲，其中可以配置很多屬性，讓你的詞雲更加個性化。
w_cloud = wordcloud.WordCloud(
font_path=font,
background_color=None, mode="RGBA", # 背景透明
width=1000,
height=600,
mask=mask)# 引數含義如下：
# font_path : string //字型路徑，需要展現什麼字型就把該字型路徑+字尾名寫上，如：font_path = '黑體.ttf'
# width : int (default=400) //輸出的畫布寬度，預設為400畫素
# height
# prefer_horizontal : float (default=0.90) //詞語水平方向排版出現的頻率，
# 預設 0.9 （所以詞語垂直方向排版出現頻率為 0.1 ）
# mask : nd-array or None (default=None) //如果引數為空，則使用二維遮罩繪製詞雲。如果 mask 非空，
# 設定的寬高值將被忽略，遮罩形狀被 mask 取代。除全白（#FFFFFF）的部分將不會繪製，其餘部分會用於繪製詞雲。
# 如：bg_pic = imread('讀取一張圖片.png')，背景圖片的畫布一定要設定為白色（#FFFFFF），
# 然後顯示的形狀為不是白色的其他顏色。可以用ps工具將自己要顯示的形狀複製到一個純白色的畫布上再儲存，就ok了。
# scale
# min_font_size : int (default=4) //顯示的最小的字型大小
# font_step : int (default=1) //字型步長，如果步長大於1，會加快運算但是可能導致結果出現較大的誤差。
# max_words : number (default=200) //要顯示的詞的最大個數
# stopwords : set of strings or None //設定需要遮蔽的詞，如果為空，則使用內建的STOPWORDS
# background_color : color value (default=”black”) //背景顏色，如background_color='white',背景顏色為白色。
# max_font_size
# mode : string (default=”RGB”) //當引數為“RGBA”並且background_color不為空時，背景為透明。
# relative_scaling : float (default=.5) //詞頻和字型大小的關聯性
# color_func : callable, default=None //生成新顏色的函式，如果為空，則使用 self.color_func
# regexp : string or None (optional) //使用正則表示式分隔輸入的文字
# collocations : bool, default=True //是否包括兩個詞的搭配
# colormap : string or matplotlib colormap, default=”viridis”
# 給每個單詞隨機分配顏色，若指定color_func，則忽略該方法。
預設生成的詞雲是一個長方形，黑色背景的圖片，要想生成指定形狀的詞雲圖片就要用到mask屬性了（這裡用imageio庫的imread()方法讀取圖片資訊）：
mask = imread('template.jpg')我選的模板形狀圖（背景一定要全白#FFFFFF）：
如果生成詞雲的字型顏色想從模板圖片取色的話，用recolor()方法設定即可。
# 從背景圖片生成顏色值
image_colors = wordcloud.ImageColorGenerator(mask)
w_cloud.recolor(color_func=image_colors)
關於Python的wordcloud庫先寫到這裡，接下來利用詞雲圖片實現一個很早以前寫過的前端效果，文字聚合、散出動畫：
直接貼原始碼吧，基於CSS3寫的小特效。（說說大概思路：將圖片設定為背景，然後用js將背景div劃分成一個固定行數和列數的小div，每個小div使用CSS3的3D轉換translate3d(x,y,z)函式和transform屬性實現動畫效果。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字聚合、散出動畫</title>
<style type="text/css">
html {
height: 100%;
padding: 0;
margin: 0;
}
body {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
background: #ccccff;
background-size: 100% 100%;
padding: 0;
margin: 0;
}
button {
position: relative;
z-index: 1;
}
#ctn {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 1000px;
height: 563px;
-webkit-transform-style: preserve-3d;
}
#ctn div {
position: absolute;
background: url(wordcloud.png) no-repeat;
background-size: 1000px auto;
transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-webkit-transform: translate(0, 0) translateZ(0) scale(1, 1) rotateX(0deg) rotateY(0deg);
}
</style>
</head>
<body>
<button id="btn_Spread">文字打散</button>
<button id="btn_Aggregate">文字聚合</button>
<div id="ctn"></div>
<script>
window.onload = function() {
function rnd(n, m) {
return parseInt(Math.random() * (m - n) + n);
}
var oDiv = document.getElementById('ctn');
var C = 6; //劃分的列數
var R = 9; //劃分的行數
//容器的中心點X座標（相對於容器的左上角）
var divCX = oDiv.offsetWidth / 2;
//容器的中心點Y座標（相對於容器的左上角）
var divCY = oDiv.offsetHeight / 2;
//接下來在容器內生成C * R 個 div
for (var i = 0; i < R; i++) {
for (var j = 0; j < C; j++) {
var oNewDiv = document.createElement('div');
//接下來給 oNewDiv 設定初始狀態
var w = Math.floor(oDiv.offsetWidth / C); //小塊的寬度
var h = Math.floor(oDiv.offsetHeight / R); //小塊的高度
var offsetLeft = j * w; //新元素的left值
var offsetTop = i * h; //新元素的top值
var l = offsetLeft + w / 2; // 新元素的中心點x座標（相對於容器的左上角）
var t = offsetTop + h / 2; // 新元素的中心點y座標（相對於容器的左上角）
//容器中心點到新元素中心點向量（簡化形式）
var disX = l - divCX; //初始的translateX值
var disY = t - divCY; //初始的translateY值
oNewDiv.setAttribute('class', 'oNewDiv');
oNewDiv.style.left = offsetLeft + "px"; //新元素的left值
oNewDiv.style.top = offsetTop + "px"; //新元素的top值
oNewDiv.style.backgroundPosition = "-" + offsetLeft + "px -" + offsetTop + "px"; //背景位置
oNewDiv.style.width = w + 'px';
oNewDiv.style.height = h + 'px';
oNewDiv.style.WebkitTransform = "perspective(800px) translate3d(" + disX + "px, " + disY + "px, 600px) rotateY(" + rnd(-180, 180) + "deg) rotateX(" + rnd(-180, 180) + "deg) scale(2,2)"; //初始的transform值
oNewDiv.style.opacity = 0; //初始的透明度為0
oDiv.appendChild(oNewDiv);
}
}
function animateSpread() {
for (var i = 0; i < document.getElementsByClassName('oNewDiv').length; i++) {
var oNewDiv = document.getElementsByClassName('oNewDiv')[i];
var l = oNewDiv.offsetLeft + oNewDiv.offsetWidth / 2;
var t = oNewDiv.offsetTop + oNewDiv.offsetHeight / 2;
var disX = l - divCX;
var disY = t - divCY;
oNewDiv.style.WebkitTransform = 'perspective(800px) translate3d(' + disX + 'px, ' + disY + 'px, 600px) rotateY(' + rnd(-180, 180) + 'deg) rotateX(' + rnd(-180, 180) + 'deg) scale(2,2)';
oNewDiv.style.opacity = 0;
}
}
function animateAggregate() {
for (var i = 0; i < document.getElementsByClassName('oNewDiv').length; i++) {
document.getElementsByClassName('oNewDiv')[i].style.WebkitTransform = 'translate3d(0,0,0)';
document.getElementsByClassName('oNewDiv')[i].style.opacity = 1;
};
}
//接下來讓新元素飛到聚合狀態，醬紫就會出現一張完整的“拼圖”~
setTimeout(function() {
animateAggregate();
}, rnd(300, 500));
document.getElementById('btn_Spread').onclick = animateSpread;
document.getElementById('btn_Aggregate').onclick = animateAggregate;
}
</script>
</body>
</html>