如何使awesomeCloud可点击

请看一下这个词云，我只是想让这些词可以链接

---

因此，任何人都可以帮助在画布上绘制单词Cloud很简单。使其可点击是相当复杂的

Canvas是一个“画图并忘记”的工具。在画布上画出一个单词后，它就变成了一个单词的图片。没有内置函数来跟踪单词在画布上的位置，更不用说单击特定单词了

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

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

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

罐装云应用程序：Tagul（）是在flash中创建的一个应用程序，可以创建可点击的词云。默认情况下，链接指向谷歌搜索，但您可以自定义每个单词链接以指向所需位置

如果你真的想“自己做”，以下是方法：

从Github（）下载awesomeCloud

当你画每个单词时，你需要像这样跟踪它：

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

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

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

--使用矩阵变换将单词移动并旋转到位，然后保存该矩阵变换

让用户点击你的云

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

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

试试这个叉子：

您必须更改如下内容：

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

Google

为此：

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