【祝】Chromebook Spin 11 での筆圧検知のやり方がわかったぞ！！

日付:
　Wacom のプラグインが入っているとでも思っていたのかと。ええ。ものすごく簡単な解決方法でした。

核となるコードはこれ
document.getElementById("検知したいエリアのID").addEventListener("touchmove", function(e) {
  console.log(e.touches[0].force);
});

...以上。Wacom のスタイラスペンって言うからプラグイン使うのかと思ったらそうじゃなかったんですね。
　というわけで、筆圧と座標を検知して表示するテスター作りました。

index.html 
<html>
  <head>
    <title>JavaScript Pressure Detector - Takuma.K</title>
    <link href="style.css" rel="stylesheet"></link>
    <script src="script.js"></script>
  </head>
  
  <body oncontextmenu="return false;">
    <div id="circle"></div>
  </body>
</html>

style.css 
* {
  box-sizing: border-box;
}

html body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  background: #000;
  color: #fff;
  overflow: hidden;
}

#circle {
  position: fixed;
  border: 8px solid #f00;
  background: rgba(255,0,0,.6);
  border-radius: 50%;
  z-index: 99;
  display: none;
}

script.js 
const checkForce = ()=>{
  let body = document.getElementsByTagName("body")[0];
  body.addEventListener("touchmove",writeForce);
  body.addEventListener("touchstart",writeForce);
  body.addEventListener("touchend",()=>{
    switchCircle("none");
  });
};

const writeForce = (e)=>{
  let touches = e.touches;
  let pen = undefined;
  for(let touch of touches) {
    if(touch.force) pen = touch; break;
  }
  let pressure = 0;
  if(pen.force) pressure = pen.force;
  drawCircle(pen.clientX,pen.clientY,pressure);
  let node = document.createElement("div");
  node.innerText = "Pressure: "+pressure;
  document.getElementsByTagName("body")[0].insertBefore(node,document.getElementsByTagName("div")[0]);
};

const drawCircle = (x,y,p)=>{
  let circle = document.getElementById("circle");
  let size = Math.pow(p+1,6);
  switchCircle("block");
  circle.style.width = 12*size+"px";
  circle.style.height = 12*size+"px";
  circle.style.borderWidth = 0.5*size+"px";
  circle.style.left = (x-12*size/2)+"px";
  circle.style.top = (y-12*size/2)+"px";
};

const switchCircle = (display)=>{
  let circle = document.getElementById("circle");
  circle.style.display = display
}

document.addEventListener("DOMContentLoaded",checkForce);

　それともう1つ見つけたことがあって、上で出したデモページなんですが、これペンじゃなくて指で押しても圧力検知するんです。
　...てことは"専用"スタイラスペンって必要ないよね？(acer とWacom に怒られる)

　でもこれ iPad Pro 向けと同じソースコードで作れるからその点ではすごく良いですね。お絵かきソフト作るか......

コメント

コメントを投稿