pixi.js 自定義游標樣式

傅小灰發表於2021-01-11

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

注意:buttonModecursor的值會互相覆蓋,以最後設定的為準。

全域性自定義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觸發互動的方式、buttonModecursor之間的關係以及CSS cursor,通過對全域性cursorStyles的設定實現了全域性的自定義游標。

相關文章