obnizのディスプレイで遊んでみた
カテゴリ： その他
特に何を作ろうという構想は無かったけれども、電子工作とjavascriptという違和感たっぷりなワードの組み合わせにつられて入手。とりあえず、液晶で遊んでみる。
obniz.js、Displayクラス(1.4.3の10463行目から) の drawメソッド (1.4.3の10682行目から) を見ると、コンテキストさえ渡せればobnizのディスプレイに表示できそうなので、SVGをcanvasに変換してくれるJavaScriptライブラリを探してみた。
"svg canvas 変換" で検索すると、あっさり canvg というのが出てきたのでこれを利用。
canvg() は、第一引数にcanvas要素、第二引数にSVGソース文字列を指定する事でSVGをcanvasに変換。
さらに、第三引数にcanvasレンダリング後のコールバックを設定できる "renderCallback" が用意されているのでこれを利用。
<script src="https://cdn.jsdelivr.net/npm/canvg@2.0.0-beta.0/dist/browser/canvg.min.js"></script>
<script>
const obniz = new Obniz;
obniz.onconnect = async function () {
const canvas = canvas要素,
svg = svgソース文字列;
canvg(canvas, svg, {
renderCallback: function(){
const ctx = canvas.getContext(‘2d’);
obniz.display.draw(ctx);
}
});
}
</script>
実行ページ：https://obniz.io/users/150/repo/draw_svg.html
一発ギャグ的な遊びが出来そうです。
-
obniz
