本篇討論 pointermove 事件 觸發事件與不同手機的差異

pointermove 事件：

• PC： 綁定在物件的 pointermove 事件，是只要畫面上有東西動，就會觸發
• 手機： 手指放在螢幕上並移動，就會觸發

pointermove 事件的特性：

1. 不需作用在物件上就會觸發
2. 觸發時機為游標移動，但快速移動時每次觸發的時間點不好控制
3. 不同手機觸發 pointermove 事件 的靈敏度不同

- 不需作用在物件上就會觸發：

[ Demo ]
pointermove 事件 設定在橘色方塊上，游標在經過橘色方塊時變成手指形狀
但 pointermove 事件 在游標 經過整個畫面 時便觸發

hitBox.on('pointermove', onPointerMove);
function onPointerMove() {
    console.log('pointermove');
};

通常會搭配 pointerdown 與 pointerup 兩個事件
在物件觸發 pointerdown 事件 時紀錄一個變數、 pointermove 時根據變數執行行為，
並在 pointerup 時再次改變變數

- 觸發的時間點：不是每個 pixel 都觸發

[ Demo ]
測試： 製作一個紅球，當游標在 橘色方塊內 會更新紅球座標
結果： 游標緩慢移動時，紅球停在接近橘色方塊的邊界；
游標快速移出感應範圍時，由於 pointermove 事件 觸發間隔過短，會停在離邊界較遠的位置

function onDragMove(e) {
    // 偵測目前游標碰撞到的元件是哪個
    const hit = app.renderer.plugins.interaction.hitTest(e.data.global);
    
    // 如果目前游標碰撞到的元件是方塊，讓紅球貼在游標位置上
    if (this.dragging && hit && hit === hitBox) {
        const newPosition = this.data.getLocalPosition(this.parent);
        hitBall.x = newPosition.x;
        hitBall.y = newPosition.y;
    }
}

通常會發生在碰撞感應、拖拉效果等互動上。
但會有另一個問題，會在明天的文章討論

- 有些手機感應特別靈敏：

是個實務上可能會發生的問題：
手機：Google Pixel(3、4)
Google Pixel 對於 pointermove 事件 相當敏感，些微移動或甚至沒有感覺到移動時，都會觸發事件

[ Demo ]
測試： 測試手機觸發 pointermove事件 的時間與當下游標座標
結果： Google Pixel(3、4) 較為靈敏

測試手機 - Sony Xperia XZ1： 大約在 x、y 座標移動 1 以上觸發

測試手機 - Google Pixel 4： 在 x、y 座標移動 小於 0.01 時就觸發了

btn.on('pointerdown', function(){
    // 游標點下時，紀錄當下時間
	btn.startPressTime = new Date();
	btn.pressTime = 0;
	msg = '';
});
btn.on('pointermove', function(e){
    // 游標移動時，輸出 '經過時間'、 '游標當下座標'
	btn.pressTime = new Date().getTime() - btn.startPressTime.getTime();
	const point = e.data.global;    
    
	msg += `pointermove: time: ${btn.pressTime} {x:${point.x.toFixed(2)}, y:${point.y.toFixed(2)}}</br>`;
	output();
});

本日小節：

pointermove 事件 的觸發時機會因手機不同，影響到觸發時的座標計算
實務上我會使用 pointerdown pointerup 兩個事件觸發的時間差來做互動運算