最近Konva.jsを使い始めたので、少しだけ共有したいと思います。
Konvaオフィシャルサイト
https://konvajs.org/index.html
Konva.jsとは何ですか？
Konva.jsは、ウェブ上で2Dグラフィックスを簡単に作成できるJavaScriptライブラリです。HTML5のcanvas要素の上に構築されており、図形、画像、テキストを描画したり、アニメーションやインタラクティブな機能を追加したりできます。シンプルな描画から複雑なアニメーションまで、Konva.jsはアイデアを実現するための強力で柔軟なツールセットを提供します。Konva.jsのステージとレイヤーの概念
Konva.jsでは、ステージはキャンバス上のすべてを保持するメインのコンテナです。ステージは描画領域全体を表します。ステージの中には複数のレイヤーを持つことができます。各レイヤーは、図形、画像、テキストを描画できる透明な紙のシートのようなものです。レイヤーを使うことで、コンテンツを整理し、描画の異なる部分を独立して管理および更新することが容易になります。 (https://konvajs.org/docs/overview.html)初めて行うのは、konva.jsのインストールです。
フロントエンドプログラムとしてVueやReactを考える場合、それに対応するvue-konvaやreact-konvaをインストールできます。それを使わずに、単純にkonva.jsをインストールすることも可能です。
ただ、インストールした際に、現在の環境でスムーズに動作するかどうかを考える必要があります。多少他のライブラリや設定を追加しないと動作しない場合があります。これらの判断や調整は少し面倒かもしれません。
今回、まだテスト段階ですが、指定したバージョンのkonva.min.jsをダウンロードして、このファイルをインポートする方法がかなり簡単です。既存の開発環境への影響が少なく、CDNリンクよりも安定しています。
Symfonyで運用する場合、使用したいTWIGページにダウンロードしたkonva.min.jsファイルをインポートし、通常のJavaScriptファイルと同様に、JavaScriptやVue、konvaを利用すればOKです。
ただし、vue-konvaを使用しないため、Vueのdataにパラメータを設定し、konvaのstage、layer、circleなどのコンポーネントの状態を保存、変更する必要があります。
例えば：
import Vue from 'vue';
new Vue({
delimiters: ['${', '}'],
el: '#editArea',
mixins: [],
data: {
stage: null,
layerCircle: null,
circle: null,
},
mounted() {
this.showCircle();
},
methods: {
showCircle() {
// 使用したい<div>を取る
const container = this.$refs.container;
const {width, height} = container.getBoundingClientRect();
// stageを作成する
this.stage = new Konva.Stage({
container: container,
width: width,
height: height,
});
// layerを作成する
this.layerCircle = new Konva.Layer();
// 表示したいのサークルを設定する
this.circle = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 70,
fill: 'yellow',
draggable: true,
});
// layerをstageに追加する
this.stage.add(this.layerCircle);
// サークルをlayerに追加する
this.layerCircle.add(this.circle);
// 設定済みのlayerを描く（画面で表示する）
this.layerCircle.draw();
},
}
})
今回のシェアはここまでです。興味があれば、ぜひkonvaのサイトのDEMOを見てみてください。