リアルタイム＋画像でちらつく Flickers in real time + image

[toshirot]

thanx 下り専門@kudarisenmonさん

https://twitter.com/kudarisenmon/status/785976172924448768 下り専門‏@kudarisenmon @toshirot ccchart使ってみました。公開ありがとうございます。高校物理の教材を作ってみました。 http://kudarisenmon.github.io/wave-simulator/ スムーズに動いていい感じなのですが、「反射」を表現するためimgを使ってjpg背景画像で壁を作ったらかなりチラつきます

リアルタイム＋画像でちらつく問題を再現してみる http://jsfiddle.net/UkdvS/671/

[toshirot]

この問題は、下記のイシューと同じで、WebSocketによるリアルタイム表示が、initによる再起でcanvasをすべて書き換えているために起きています。

ヒートマップ＋画像でリアルタイム処理した時にチラつく Eliminate flickering on the heatmap type with image. #23 https://github.com/toshirot/ccchart/issues/23

ヒートマップの時はヒートマップ専用のcanvasで再描画しているため、軸や画像などの再描画を停止しても問題が無いため対処出来ましたが、 これについては、別途initの影響を受けない画像をDOMかcanvasで用意するしか無いのかなぁと思います。

[kudarisenmon]

再現コードです。（一番左の「自動再生」で発生します） http://senmon.tk/~kudarisenmon/wave-simulator/ WebSocketは使ってませんが、値を変えた後毎回initを読んでいるので同じですね。

[toshirot]

kudarisenmonさんこんにちは

ちょっと作業環境にトラブルがあってあまりさわれていません。すみません。

とりあえず、websocket時にDOM画像を入れるテスト http://ccchart.org/test/img/img2-1.htm

ただDOMで入れるならwebsocketに限らないというかコードを埋め込むのではなく外に書いた方がよいのかなぁ

[toshirot]

モジュールからメソッド ccchart.drawImgs を書き替えてテストしてみました。 ccchart.jsは通常のもの（　ccchart-v1.12.082.js　） です。

http://ccchart.org/test/img/img2-2.htm

ただこれは、if(this.wsidoj[this.id]){　... で分岐させたのでWebSocket以外には使えません。 このあたりにWS以外の再起処理でも使えるように明示的なフラグプロパティを設定するのが良いかも？

[toshirot]

複数 Canvas + 画像のテスト http://ccchart.org/test/img/img2-3.htm

※drawImgsメソッド内の img.onloadのレスポンスが怪しいので廃止 ※通常は

  <canvas id=hoge0></canvas>

この状態のcanvasを、今のところ下記の状態にラップしています div img canvas /div

具体的にはこんな感じ

  <div class="-ccchart-imgBox" id="-ccchart-imgBox-hoge0" style="position: relative; top: 0px; left: 0px;">

    <img src="http://ccchart.com/sakura.png" style="position:absolute;;top:110;left:110;width:250px;height:120px;opacity:0.6;z-Index:0;">

    <canvas id="hoge0" class="-ccchart" title="0: Option img" width="600" height="400" style="display: block;"></canvas>

</div>

[toshirot]

canvasと画像の位置合わせが発生するので、念のために 画像 + 複数canvas + 各種position(absolute, relative,etc...)属性 のテスト

http://ccchart.org/test/img/test-css-marker.htm

position: fixed や z-index を指定したものの画像がcanvasの下に隠れて?見えない。（ hoge6, hoge7, hoge2 ）

※canvasの上か下かのプロパティがあってもよいかも？ 背景を透明にすれば、下にあってもみえるはず。

[toshirot]

hoge6のz-index6 のパターンを修正。 http://ccchart.org/test/img/test-css-marker2.htm

canvasの現在z-indexを取得して画像のz-index値を+1してる。 configの指定で "useDivImg": true またはccchart下にwebsocketオブジェクトがあるとcanvasではなく img 要素を使います。

`var data = [ ["年度"] ,["ジュース"] ,["ウーロン"] ]

var conf = {

"config": { "useVal": "yes" , "type": "line" , "lineWidth": 5 , "imgAlpha": 0.4 , "img": ["http://ccchart.com/sakura.png",110,110,250,120] , "xScaleRotate": -60 , "xScaleAlign": "right" , "xScaleYOffset": 8 , "paddingBottom": 70 , "useDivImg": true //これ } };`

#ただ、ここまでの方法はメモリを食いすぎるるので、もしプラグインではなく本体へ実装するなら、別の方法を考え直したい。

[toshirot]

とりま、kudarisenmonさんの画像を使ってテスト

http://jsfiddle.net/UkdvS/677/