pixi.js 自定義游標樣式

傅小灰發表於2021-01-11
JS

pixi 介紹

Pixi是一個超快的2D渲染引擎，通過Javascript和Html技術建立動畫或管理互動式影像，從而製作遊戲或應用。

專案地址：https://github.com/pixijs/pixi.js
API 地址：https://pixijs.download/dev/docs/index.html
中文教程地址：https://github.com/Zainking/learningPixi

遊戲中都會做一些跟整個遊戲畫面風格相符的定製游標，比如英雄聯盟中的稜形游標。在游標移動到敵對單位（互動物件）上時，會變成一把小?，釋放技能時又變成了另外的形狀。ps:為了找素材我特意打了一局遊戲(手動狗頭).

首先，我們需要建立一個可互動的區域。

const star = new PIXI.Graphics();
star.beginFill(0xfff8dc);
star.drawStar(200, 200, 5, 50);
star.endFill();

star.interactive = true;//啟用互動響應
star.buttonMode = true;//設定互動時游標樣式為 pointer 等同於 star.cursor = 'pointer'


app.stage.addChild(star);

在之前的文章中，我們提到過，可互動的關鍵就在於需要設定DisplayObject的互動屬性interactive。只有當interactive=true時，觸控、點選、滑鼠等事件才能被該物件捕獲到。（對於互動物件，原本的互動範圍只是元素本身的位置範圍，但是還可以通過設定hitArea來定義更大的互動範圍。）

cursor : This defines what cursor mode is used when the mouse cursor is hovered over the displayObject.

buttonMode: Setting this changes the 'cursor' property to 'pointer'.

CSS cursor 樣式

在我們看到的html中，所有的pixi繪製都是基於一個canvas實現的。也就是說，游標的變化其實都是相當於修改了canvas的cursor樣式。

cursor: [ [ <uri> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | 
     progress | wait |cell | crosshair | text | vertical-text | alias | copy | move | 
     no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | 
     se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | 
     col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ];

1、cursor屬性適用於所有元素；

2、cursor屬性僅對具有指標裝置（如滑鼠）的裝置有效；它對觸控裝置沒有任何影響。

3、並非所有瀏覽器都支援cursor屬性的所有屬性值，且所有屬性值在所有瀏覽器和作業系統中顯示的效果不一定相同。

通過給不同的五角星設定不同的cursor屬性，就可以實現這樣的效果。

cursor

注意：buttonMode和cursor的值會互相覆蓋，以最後設定的為準。

全域性自定義cursor樣式

千呼萬喚始出來直接上程式碼：

const defaultIcon = "url('imgs/bunny.png'),auto";
const hoverIcon = "url('imgs/bunny_saturated.png'),auto";

app.renderer.plugins.interaction.cursorStyles.default = defaultIcon;
app.renderer.plugins.interaction.cursorStyles.pointer = hoverIcon;

cursorStyles(傳送門)是一個Object<string, Object>型別的鍵值對，string字串是用於設定cursor的值，object為對應cursor的具體樣式內容。

這個解釋起來比較拗口，看個樣例就明白了。

const hoverIcon = "url('imgs/bunny_saturated.png'),auto";
//定義一個名為mycursor的游標樣式並繫結具體css
app.renderer.plugins.interaction.cursorStyles.mycursor = hoverIcon;

//新增一個新的互動物件並將其cursor設定為mycursor
const star = new PIXI.Graphics();
star.interactive = true;
star.cursor = 'mycursor';
...

總結

本文介紹了pixi中設定DisplayObject觸發互動的方式、buttonMode和cursor之間的關係以及CSS cursor，通過對全域性cursorStyles的設定實現了全域性的自定義游標。

相關文章