grailsとarctext.jsで丸く曲がったテキストを表示する

grailsとarctext.jsで丸く曲がったテキストを表示するには、以下の手順を実行します。

1. ApplicationResources.groovyでモジュールを宣言

modules = {
    application {
        resource url:'js/application.js'
    }
  // arctext.jsのモジュールを宣言
  arctext {
    dependsOn 'jquery'
    resource url:'js/jquery.arctext.js', disposition:'head'
  }
}

jquery.arctext.jsはweb-app/jsに配置します。

2. main.gspに以下のようにr:requireを使用してリソースを導入します。

  <g:layoutHead/>
<!-- arctext.jsを使用 -->
<r:require module="arctext"/>
        <r:layoutResources />
 </head>

3. viewに以下のようなコードを追加します。

<!-- arctext.jsで丸く曲がったテキストを表示する -->
<style type="text/css" media="screen">
.arctext {
  color: #5577dd;
  font-size: xx-large;
}
</style>
<span id="arctext" class="arctext">Groovy and Grails</div>
<script type="text/javascript">
  $(function(){
    $("#arctext").arctext({radius: 200});
  });
</script>

出力画面

動作環境
grails 2.0.1

関連情報
arctext.jsのホームページ
http://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/