大家来看这篇文章,想必都了解过wordle。但是wordle难以运用于自己项目的web展示。
于是我着手自己写了一个,这里给大家介绍一下方法。相信大家也能迅速的构建一个wordCloud,
该项目在gitHub地址:https://github.com/Leannechn/WordCloud.git
先看看效果吧,颜色可以自己定义,这里我就以单色显示:
数据格式:
首先我们先分析一下实现步骤:
在wordle中,采用的是不断产生随机位置,进行碰撞测验,如果被测验位置是空白则填充文字。那么统一
1、文字位置是相对集中的随机数(正态分布于中心点位置);
2、碰撞测验;
3、优化碰撞测验;
现在我们来一一解决问题:
1、正态分布的随机数:大家都知道Math.random( ) 产生的是均匀随机数,也就是文字会均匀的分布在整个画布中。那么到底如何生成正态分布的随机数呢。
生成的算法很简单:假设,我们用Math.random( ) 生成N个随机数,则这N个随机数的平均数趋近与0.5 。当N值越大,平均数趋近0.5的概率就越大,反之,概率越小 。想看原理的亲可另行了解正态分布的算法。总而言之,n个(0,1)之间的随机数的平均数以0.5为中心程正态分布。n值越大随机值越集中。
Math.floor(arr.reduce(function(i,j){return i+j})/n*(max-min))+min;
这样我们就取到了以(min,max)中心点正态分布的随机值。
2、碰撞测验:利用canvas的 .getImageData(x,y,width,height)
.getImageData(x,y,width,height)的返回值是一个一位数组。假设该矩形中用N 个像素点,每个像素点则由4个值决定即:r g b a;那么这个一位数组的长度为n*4,
于是,我们只要判断其中是否有像素信息即可。如果为空白则,所有的值都为0;如果碰撞,则重新生成随机值。
到此为止,制作水平方向的标签云已经没有问题了。计算优化后面再介绍。
那么竖直和水平的混搭要如何做?
亲肯定会说,旋转即可。是的 ,原理就这么简单!但是坑在于,旋转是相对于原点旋转的,那么生成的文字必须一开始是围绕中心点,而后平移到画布中间,
这时候的.getImageData(x,y,width,height)会如何变化呢,下节介绍。。。
某天心血来潮,想搞搞
词云
这玩意,网上很多在线生成
词云
的网站,但是加载都比较慢,或者有水印,再或者是无水印却背景颜色不喜欢。心想,这玩意不难,应该有开源代码库可以使用的吧?网上一搜,虽然方法不多,但是也总有一些好使的,特意摘取huaairen一文,加以提取出使用Python、Java和JS生成
词云
的方法,转载内容如下:
1. python生成
词云
图
简单的代码示例如下:
# coding=utf-8
from
word
.
world
cloud
库的基本使用
world
cloud
库把
词云
当成一个
word
cloud
对象
word
cloud
.
Word
Cloud
()代表一个文本对应的
词云
可以根据文本中词语出现的频率等参数
绘制
词云
绘制
词云
的形状,尺寸颜色都可以设定
world
cloud
库的常规方法
w=world.
Word
Cloud
()
以
Word
Cloud
对象为基础 配置参数 加载文本 输出文件
方法1 w.generate(txt) 向
Word
Cloud
对象w中加载文本txt,>>>w.generate("
由图可知,该文字
云
的效果是,一个大
标签
文字在区域中心,其它小
标签
文字围绕这个大
标签
文字。
其中,这些文字有随机的颜色。
除了大
标签
文字,其它
标签
文字大小也随机。
然后,围绕这个效果呢,想象一下火影忍者的轮回眼。
其实就像一颗小石头扔向湖面,泛起阵阵涟漪(圆圈)向外扩散。
之后,文字之间不能交叉,也就是说不能碰撞,那就是说不能重叠。
好了,让我们撸起...
1.原代码地址:https://github.com/wdm510708502/
web
gl-
cloud
s
2.打开index.html,有可能你会惊奇的发现,
云
呢?
云
呢? 你可能用的是谷歌浏览器或者360浏览器,而使用Microsoft Edge是可以正常显示的,为什么呢?
3.打开F12的console,你会发现,图片被跨域拦截了,因为这并不是img的src
4.要怎么解决呢?
var text = // A big long block of text as a string
var
cloud
= new
Cloud
5 ( )
.
canvas
( document . getElementById ( 'my
Canvas
' ) )
. width ( 800 )
. height ( 400 )
. text ( te
可以使用uni.
canvas
Context.lineTo()方法
绘制
直线。例如,要
绘制
直线从 (0,0) 到 (100,100),可以使用以下代码:
const ctx = uni.create
Canvas
Context('
canvas
Id');
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.stroke();
其中,
canvas
Id 是你要
绘制
直线的画布的 id。使用 moveTo() 方法将画笔移动到直线的起点,再使用 lineTo() 方法指定直线的终点,最后使用 stroke() 方法
绘制
直线。