如何使awesomeCloud点击

Question

好心来看看这个词云我只是想的话可链接 所以谁能帮助http://indyarmy.com/awesomeCloud/

Answer 1

在画布绘制词云很简单。使其可点击相当复杂！

画布是一个“绘制和遗忘”工具。在画布上绘制一个单词后，它就变成了一个单词图片。没有内置函数来跟踪单词在画布上的位置，更不用说单击某个单词。

如果您的工具具有灵活性，您可以尝试使用支持单击的工具包。有很多可能性，但这些浮现在脑海：

帆布库：画布绘制像fabricJS，easelJS，kineticJs，paperJs库（这些库可以使你的画布的话可点击和可跟踪）。你将不得不通过移动/旋转你的话来设计自己的云。

SVG： Svg元素成为Html DOM的一部分，因此可点击。 RaphaelJS是一个非常好的Svg图书馆。你将不得不通过移动/旋转你的话来设计自己的云。

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

如果你真的想“做自己动手”这里是如何：

下载awesomeCloud从GitHub（https://github.com/indyarmy/jQuery.awesomeCloud.plugin）

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

- 使用context.measureText（“你的单词”）来查找单词的宽度。

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

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

让用户点击您的云。

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

如果您遇到问题，您知道用户点击了哪个单词！

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>