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: [ [  [ ]?,]* [ 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字符串是用于设置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的设置实现了全局的自定义光标。

pixi.js 自定义光标样式的更多相关文章

  1. JS实现公告上线滚动效果

    本文实例为大家分享了JS实现公告上线滚动效果的具体代码,供大家参考,具体内容如下实现的效果如下,新闻公告上下滚动。代......

  2. 在使用内模块的时候需要先将所需的内置模块进行引入、OS模块在nodejs中OS模块提供了与操作系统相关的属性和方法/......

  3. node.js常用内置模块一

    在使用内模块的时候需要先将所需的内置模块进行引入、OS模块在nodejs中OS模块提供了与操作系统相关的属性和方法/......

  4. nodejs事件和事件循环详解

    目录简介nodejs中的事件循环phase详解timerspending callbacksidle, prepar......

  5. pixi.js 自定义光标样式

    pixi 介绍Pixi是一个超快的2D渲染引擎,通过Javascript和Html技术创建动画或管理交互式图像,从而......

随机推荐

  1. python 装饰器的基本使用

    知识点简单的装饰器带有参数的装饰器带有自定义参数的装饰器类装饰器装饰器嵌套@functools.wrap装饰器使用基......

  2. java中Map、Set、List的简单使用教程(快速入门)

    Map、Set、ListList的常用方法1、创建List list = new ArrayList<>......

  3. MYSQL 字符集设置(终端的字符集)

    每次利用终端 创建数据库或者创建表的时候,字符集都是latin1(不指定字符集的时候)如下:查看当前数据库的字符集c......

  4. 动态主机配置协议DHCP

    一---导读在日常生活中我们使用电脑,当我们连接到一个新的网络的时候,你知道中间发生了什么,最终你可以上网的吗?一个......

  5. PHP文件操作简单介绍及函数汇总

    文件操作一直是Web程序员头疼的地方,而文件操作在CMS这样的系统中又是必须的。如今,PHP文件操作的函数内容已经非......

  6. MySQL数据类型全解析

    数据类型:定义列中可以存储什么数据以及该数据实际怎样存储的基本规则。数据类型用于以下目的:1、允许限制可存储在列中的......

  7. [Java基础]——String类

    此篇博客主要整理Java中的String类的使用。一、String1.1 String 的定义上图是jdk中对......

  8. 原生JavaScript实现轮播图

    本文实例为大家分享了JavaScript实现轮播图的具体代码,供大家参考,具体内容如下效果:代码:* {margin......

  9. python日志通过不同的等级打印不同的颜色(示例代码)

    1,不用第三方库# coding: utf-8import loggingBLACK, RED, GREEN, YE......

  10. php中PHPUnit框架实例用法

    本期给大家带来的框架是一个单元测试内容,本身不是很难的东西,大家觉得困难,可能是把自己框在了技术上,事实上,并非如此......