iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 15
0
Modern Web

再談 PixiJS,那些先前不一定有提到的部分與地雷系列 第 15

[Re:PixiJS - Day15] pointermove 事件與不同手機間的差異

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

pointermove 事件:

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

pointermove 事件的特性:

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

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

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

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

通常會搭配 pointerdownpointerup 兩個事件
在物件觸發 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 兩個事件觸發的時間差來做互動運算


上一篇
[Re:PixiJS - Day14] hitArea 屬性
下一篇
[Re:PixiJS - Day16] 在手機上實作擼來擼去的互動
系列文
再談 PixiJS,那些先前不一定有提到的部分與地雷45

尚未有邦友留言

立即登入留言