KonvaのライブラリはRequireJSを使って読み込みます。ライブラリの読み込みからアニメーションの描画を行うコードは別のファイルに記述し、Oracle APEXのページにはコードを一切埋め込まないようにします。
非常に簡単ですが、作成したAPEXのアプリケーションは以下のように動作します。
以下より簡単に実装について紹介します。
空のAPEXアプリケーションを作成します。名前はPlay Konvaとしました。
ホーム・ページにKonvaのアニメーションを表示する領域を作成します。
静的コンテンツのリージョンを作成し、ソースのHTMLコードとして以下を記述します。
<div id="container" style="width: 500px; height: 500px;"></div>
ページ・プロパティのJavaScriptのファイルURLに以下を記述します。
[require requirejs]#APP_FILES#app#MIN#.js
静的アプリケーション・ファイルとしてapp.js（およびミニファイしたapp.min.js）を作成します。内容として以下を記述します。ほとんどQuick Lookの内容そのままですが、HTML要素に表示するように変更しています。また、Stageのwidthとheightが受け取るのは数値だけなので、DIV要素のサイズを数値で渡すようにしています。
以上でアプリケーションは完成です。
今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/play-konva.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
