日日是Oracle APEX: KonvaのアニメーションをOracle APEXのアプリケーションに表示する

2024年12月23日月曜日

KonvaのアニメーションをOracle APEXのアプリケーションに表示する

KonvaのアニメーションをOracle APEXのアプリケーションに表示してみます。KonvaのGitHubのページにあるQuick Lookの表示に取り組みます。

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要素のサイズを数値で渡すようにしています。

	require(["https://unpkg.com/konva@9.3.16/konva.min.js"], (Konva) => {

	/*
	* Konvaのアニメーションの表示領域とサイズを取得。
	*/
	const containerEl = document.getElementById('container');
	const rect = containerEl.getBoundingClientRect();

	var stage = new Konva.Stage({
	width: rect.width,
	height: rect.height,
	container: containerEl
	});

	apex.debug.info(stage);

	// add canvas element
	var layer = new Konva.Layer();
	stage.add(layer);

	// create shape
	var box = new Konva.Rect({
	x: 50,
	y: 50,
	width: 100,
	height: 50,
	fill: '#00D2FF',
	stroke: 'black',
	strokeWidth: 4,
	draggable: true,
	});
	layer.add(box);

	// add cursor styling
	box.on('mouseover', function () {
	containerEl.style.cursor = 'pointer';
	});
	box.on('mouseout', function () {
	containerEl.style.cursor = 'default';
	});

	});