canvas element を通常のイメージ扱いし、モバイル端末でタッチスクロールできるようにする

canvas で画像を composite し、生成された canvas を通常の img のように表示上をタッチスクロール可能にするためには…

環境：

vue@2.6.12

konva@7.1.3

canvas を dataURL に変換してcanvas と置換

⇒ キャンバスを一度画面にレンダリングした後でないと変換出来なかった。

solution)

canvas の上に overlay する element をかぶせる。

<div id="overlay" :class="{overlayZindex: overlayZindex}" :style="{width: stageSize.width + 'px', height: stageSize.height + 'px'}">

<div id="canvas">

mounted() {

　　this.resizeStage() // get canvas stage width and height

　　this.$nextTick(() => {

　　　　this.loadKonva() // initialize konva canvas

　　　　this.overlayZindex = true  // overlay に overlayZindex class を付与

　　})

}

<style>

#overlay {

　　position: absolute

}

#canvas {

　　position: relative

　　z-index: 1

}

.overlayZindex {

　　z-index: 2

}

overlay に後付けで z-index を定義しているのは初めから z-index: 2 を定義すると stage size が取得できなかったため。

ref:

monteecristoo.hatenablog.com

[ゲーム&モダンJavaScript文法で2倍楽しい]グラフィックスプログラミング入門 ——リアルタイムに動く画面を描く。プログラマー直伝の基本 (WEB+DB PRESS plus)