読者です 読者をやめる 読者になる 読者になる

フニゲの開発日記

Electronとか...

Pointer Eventsのテスト

 WindowsのIEではだいぶ前から使えたらしいけど、Chromeでも55から使えるようになったのでテストしてみる。
 Electron(今はv1.4.13)ではまだ使えないが、そんなに遠くない将来使えるようになるはずだ。

<html> 
<head>

<script>
document.addEventListener("pointerdown", function(e) {
    console.log("down", e.x, e.y, e.pointerType, e.pressure);
});
document.addEventListener("pointerup", function(e) {
    console.log("up  ", e.x, e.y, e.pointerType, e.pressure);
});
document.addEventListener("pointermove", function(e) {
    console.log("move", e.x, e.y, e.pointerType, e.pressure);
    if (e.pressure > 0) {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var x = e.x - canvas.offsetLeft;
        var y = e.y - canvas.offsetTop;
        var size = e.pressure * 30;

        ctx.beginPath();
        ctx.globalAlpha = e.pressure;
        ctx.fillRect(x, y, size, size);
    }
});
</script>
</head>

<body>
pointer event test
<br>
<canvas id="canvas" width=500 height=500 style="border:1px solid black">
</body>
</html>

 こんな感じでイベントが取れる。

f:id:funige:20161230064729p:plain

 これまでwacomのwebブラウザ用プラグインしかなかったのだが、これならHUIONでもUGEEでも筆圧が取れるはず。たぶん。

 現状では価格の安い中華タブが今後主流になるのは間違い無いだろう。個人的にはwacomにはほんと期待していて、多少高くてもいいから精度の高い液晶タブレットを作って欲しいと思うんだけど。いやまったく、どうして描いた場所と違う位置に線が引かれるんだろう。視差なんてカメラでユーザーの目の位置を追跡して、ドライバできっちり補正すればいいじゃないか。

広告を非表示にする