0

親切にこの単語の雲について見てください私は単語をリンク可能にしたいので誰でもhttp://indyarmy.com/awesomeCloud/を助けることができます

4

2 に答える 2

1

キャンバスにワード クラウドを描画するのは簡単です。クリック可能にするのはかなり複雑です。

Canvas は「描いて忘れる」ツールです。カンバスに単語が描かれると、それはただの単語の絵になります。単語がキャンバス上のどこにあるかを追跡する組み込み関数はありません。ましてや、特定の単語をクリックすることはできません。

ツールに柔軟性がある場合は、クリックをサポートするツールキットを使用してみてください。多くの可能性がありますが、これらは思い浮かびます：

キャンバス ライブラリ: fabricJS、easelJS、kineticJs、paperJs などのキャンバス描画ライブラリ (これらのライブラリを使用すると、キャンバスの単語をクリックおよび追跡可能にすることができます)。単語を移動/回転させて、独自の雲をデザインする必要があります。

SVG: Svg 要素は Html DOM の一部になるため、クリック可能になります。RaphaelJS は非常に優れた Svg ライブラリです。単語を移動/回転させて、独自の雲をデザインする必要があります。

Canned Cloud Apps: Tagul ( http://tagul.com/blog ) は、クリック可能なワード クラウドを作成するフラッシュで作成されたアプリです。デフォルトでは、リンクは Google 検索を指していますが、各単語リンクをカスタマイズして、目的の場所を指すようにすることができます。

本当に「自作」したい場合は、次の方法があります。

Github から awesomeCloud をダウンロードします ( https://github.com/indarmy/jQuery.awesomeCloud.plugin )

各単語を描画するときは、次のように追跡する必要があります。

-- context.measureText(“your word”) を使用して、単語の幅を見つけます。

-- 単語の幅と高さを使用して境界ボックスを作成し、その境界ボックスの位置とサイズを保存します。

-- マトリックス変換を使用して単語を所定の位置に移動および回転し、そのマトリックス変換を保存します。

ユーザーがクラウドをクリックできるようにします。

ユーザーがクラウドをクリックしたら、クラウド内の各単語に対してヒット テストを実行します。これを行うには、保存したマトリックス変換を使用して、クリックしたポイントの移動と回転を解除します。次に、各単語の保存された境界ボックスを繰り返し処理し、クリックしたポイントが境界ボックス内にあるかどうかを確認します。

ヒットすると、ユーザーがどの単語をクリックしたかがわかります。

于 2013-03-06T17:03:54.723 に答える
0

このフォークを試してください：

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>
于 2014-10-11T19:17:50.723 に答える