cloud - 如何使 awesomeCloud 可点击

Question

请看一下这个词云，我只是想让这些词可以链接，所以任何人都可以帮助http://indyarmy.com/awesomeCloud/

Answer 1

在画布上绘制文字云很简单。让它可点击是相当复杂的！

Canvas 是一种“一劳永逸”的工具。在画布上绘制一个单词后，它就变成了一个单词的图片。没有内置功能可以跟踪单词在画布上的位置，更不用说单击特定单词了。

如果您的工具具有灵活性，您可以尝试使用支持单击的工具包。有很多可能性，但我想到了这些：

画布库：画布绘图库，如 fabricJS、easelJS、kineticJs、paperJs（这些库可以使您的画布文字可点击和跟踪）。您必须通过移动/旋转您的文字来设计自己的云。

SVG： Svg 元素成为 Html DOM 的一部分，因此是可点击的。RaphaelJS 是一个非常好的 Svg 库。您必须通过移动/旋转您的文字来设计自己的云。

罐头云应用程序： Tagul ( http://tagul.com/blog ) 是一个在 Flash 中创建的应用程序，可创建可点击的词云。默认情况下，链接指向谷歌搜索，但您可以自定义每个单词链接以指向您想要的位置。

如果你真的想“自己动手”，方法如下：

从 Github 下载 awesomeCloud ( https://github.com/indyarmy/jQuery.awesomeCloud.plugin )

在绘制每个单词时，您需要像这样跟踪它：

-- 使用 context.measureText(“your word”) 来查找你的单词的宽度。

-- 使用您的单词的宽度和高度创建一个边界框并保存该边界框的位置和大小。

- 使用矩阵变换将您的单词移动和旋转到位并保存该矩阵变换。

让用户点击您的云。

当用户点击您的云时，对您的云中的每个单词进行命中测试。为此，您使用保存的矩阵变换来取消移动和旋转单击的点。然后你遍历每个单词保存的边界框，看看点击的点是否在边界框内。

如果你得到了点击，你就知道用户点击了哪个词！

Answer 2

试试这个叉子：

https://github.com/fguimara/jQuery.awesomeCloud.plugin

你必须改变这样的事情：

 <span data-weight="18">Google</span>

为了这：

<span data-weight="18"><a href="http://google.com">Google</a></span>