pixi 鼠标交互事件

最新推荐文章于 2024-06-26 09:38:24 发布

转载最新推荐文章于 2024-06-26 09:38:24 发布 · 4.5k 阅读

js 专栏收录该内容

17 篇文章

订阅专栏

博客详细介绍了不同操作的触发事件，包括鼠标左键、右键触发事件，如click、rightclick等；触摸屏触发事件，如touchstart、touchend等；还有兼容鼠标和触摸屏的共同触发事件，如pointerdown、pointerup等。

1.鼠标左键触发事件：

click：点击事件

mousedown：鼠标按下

mousemove：鼠标移动

mouseout：鼠标移出

mouseover：鼠标经过

mouseup：鼠标松开

mouseupoutside：鼠标按下，移出对象松开

2.鼠标右键触发事件：

rightclick：点击事件

rightdown：鼠标按下

rightup：鼠标松开

rightupoutside：鼠标按下，移出对象松开

3.触摸屏触发事件：

touchcancel：触摸系统cancels键

touchend：触摸结束

touchendoutside：触摸开始，移出对象松开

touchmove：触摸移动

touchstart：触摸开始

4.兼容鼠标和触摸屏的共同触发：

pointercancel：触发系统cancels键

pointerdown：触发按下

pointermove：触发移动

pointerout：触发移出

pointerover：触发经过

pointertap：触发点击

pointerup：触发松开

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

SeriousSnow_

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

PixiJS教程（004）：点击事件交互

WwLK123的博客

07-04

560

本文介绍如何使用PixiJS实现点击宝剑改变颜色的交互效果。通过设置精灵的interactive属性为true，并添加点击事件监听器，在点击时随机修改sprite.tint属性值来改变宝剑颜色。代码还展示了如何创建PixiJS应用、加载纹理、设置精灵属性以及实现旋转动画。最终效果是点击旋转的宝剑时会随机变换颜色。关键代码仅需3行，主要使用on('click')事件和tint属性实现变色功能。

PIXI_函数&事件处理

Hunter的博客

04-23

2590

PIXI_函数&事件处理事件处理鼠标常用事件移动端常用事件【兼用鼠标】监听事件获取鼠标坐标事件处理基础代码 // 设置舞台 var app = new PIXI.Application(500, 700); // 添加舞台 document.body.appendChild(app.view); // 创建自定义事件处理函数 function f1() { ...

参与评论您还未登录，请先登录后发表或查看评论

pixi-mousewheel:pixi.js插件，可在显示对象上启用鼠标滚轮事件

05-08

pixi-mousewheel-pixi.js插件关于 pixi.js的此插件会自动为pixi显示对象调度鼠标滚轮滚动事件。它仅针对具有交互性并设置了特殊标志的对象触发事件。当滚动所述显示对象时，默认文档滚动被阻止。此外，它还标准化了鼠标滚轮增量，以实现跨浏览器的一致性。演示版文献资料要为任何显示对象启用鼠标滚轮事件，请将其上的interactiveMousewheel标志设置为true 。该mousewheel事件将通过派出。 displayObject.interactiveMousewheel = true displayObject.on('mousewheel', (delta, event) => { myOtherDisplayObject.y += delta * 100 }) delta是归一化为[-1,1]的滚动量。该event是本机DO

PixiJS学习（10）事件机制

幻蝶

07-21

3993

简介事件机制是人机交互的前提，用户在进行操作（点击）之后，页面对于事件的反馈和相应。针对 Pixi 的事件机制，主要还是比较常规的一些事件：鼠标事件、触摸事件。例如：点击事件（tap：移动端，click：pc端）、触摸事件（touchstart：开始触摸，touchmove：触摸移动，touchend：结束触摸）事件绑定在 PixiJs 中对于事件的绑定比较简单，首先将对象的 interactive 设置为 true ，然后是 on 进行绑定。...

pixi.js 实现Sprite跟随鼠标移动

Akony的博客

07-05

4973

移动功能在官方实例中已有，不过在开发过程中因为与需求有个冲突bug，所以又重新写了一个，虽然并没有直接解决不过也记录下吧。官方实例代码： obj.on('mousedown', onDragStart) .on('touchstart', onDragStart) .on('mouseup', onDragEnd) .on('mouseupoutside', onDragE...

javascript 鼠标滚轮事件

10-30

在前端开发中，鼠标滚轮事件是常用的交互方式之一，用以实现页面滚动、图片查看、地图缩放等操作。然而，不同浏览器对鼠标滚轮事件的实现存在差异，最为典型的是Internet Explorer（IE）和Firefox。IE使用...

pixizam:PIXI鼠标放大

05-21

通过深入了解PixiZam和PIXI.js，开发者可以创建出具有交互性和高性能的图像查看体验，特别是在处理大量或高分辨率图片时。此外，由于PixiZam是开源的，你可以查看其源代码，学习如何自定义和扩展功能，甚至贡献自己...

给精灵绑定点击事件

weixin_34176694的博客

02-15

508

2019独角兽企业重金招聘Python工程师标准>>> ...

Pixi精灵的交互事件

RepecTT的博客

07-18

353

【代码】Pixi精灵的交互事件。

PixiJS教程（四）：事件交互

热门推荐

Arcobaleno

08-25

1万+

其实这俩按理说应该是一样的，都是射线，但是神奇的是，OnMouseDown只需要在物体上加上Collider就能被触发，但是OnPointerDown(）要加的东西就多了。如下图所示，我只有Cube和Light，然后MainCamera上啥都没有：难道OnMouseDown()默认在内部已经加上了射线了吗？感觉OnMouseDown()的相关源码被封装的比较紧密，内部实现无法窥探。很显...

前端动画渲染引擎pixi.js系列（4）如何实现鼠标交互事件

@黄小泽的个人博客

04-17

1万+

一.交互事件概念事件交互是指显示对象PIXI.Sprite、PIXI.Container与用户交互所触发的事件。常用的交互事件主要有如点击、拖拽等。在PixiJS中所触发的事件可以分为4种类型：鼠标左键触发，鼠标右键触发，触摸屏触发，兼容鼠标和触摸屏的共同触发。二.交互事件参考 1.鼠标左键触发事件： click：点击事件 mousedown：鼠标按下 mousemov

学习 PixiJS — 交互工具

weixin_34308389的博客

03-04

1366

说明 Pixi 内置一组功能有限的用于鼠标交互和触摸交互的方法，但是对于游戏和应用程序所需的丰富交互性，建议使用第三方库来简化操作，这篇文章介绍的是 Tink 库，它有通用的指针对象、拖放精灵、按钮对象、键盘控制等一些有用的功能。使用 Tink 库要开始使用 Tink ，首先直接用 script 标签，引入 js 文件。 <...

click 和 mousedown 以及map地图的pointerdown

weixin_30827565的博客

07-11

707

click只触发单击鼠标左击事件， mousedown 可以判断鼠标左中右事件pointerdown 不能判断鼠标左右中事件转载于:https://www.cnblogs.com/yhl-0822/p/9294796.html

通过指针事件统一触摸和鼠标

03-04

495

我经常收到诸如“ 手机和平板电脑上的触控设备如此之多 ” 这样的开发人员的问题，我应该从哪里开始呢？ ”和“ 触摸输入最简单的构建方法是什么？ ”简短的回答： “这很复杂。” 当然，在现代的，支持触摸的浏览器中，或者作为较旧的浏览器的后备，确实存在一种更统一的方式来处理Web上的多点触摸输入。在本文中，我想向您展示一些使用MSPointers的浏览器实验-一种新兴的多点触摸技术和polyfi...

PIXI入门系列之基本使用(上篇)

玉案轩窗的博客

04-27

3923

在之前文章PIXI开篇中对于PIXI的定位以及历史进行了说明，相信对PIXI整体有了一定的认知，本篇是入门系列的第二篇，本篇文章主要介绍相关PIXI API的具体使用以及一些关键知识点，相关的细节性还是需要结合PIXI API文档来具体查看。本篇文章熟悉PIXI基本API的使用，主要介绍了如下Application、Container、Sprite、Graphics、Text、Ticker、Assets的基本使用以及一些关键点。

使用PIXI制作简单canvas逐帧动画的心得

qq_15506981的博客

07-20

1678

//在我们的html模板中有我们的代码块主要使用ref属性来进行动态添加canvas节点 <div class="Index_container" id="Index_container" ref="container"> //首先在Vue项目中导入我们的PIXI库 import * as PIXI from "pixi.js" //可以在mounted中调用我们的方法createCanvas来初始化PIXI画布； mounted(){ this.createCanvas() } cre

移动端的touchstart,touchmove,touchend事件中的获取当前touch位置

weixin_34050427的博客

11-02

1083

前提：touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定。原生：document.querySelector("#aa").addEventListener('touchmove', function(){...});jq： $(".aa").on("touchmove",function (e) {...};1.获取当前touch位...

基于Pixi.js的交互插件实现Pointer事件统一管理

虽然 Pixi.js 自身已经内置了基础的交互支持（通过 `PIXI.interaction.InteractionManager`），但本项目提供的 `@iro/interaction` 是一个第三方增强型交互插件，旨在优化和统一事件处理逻辑。根据描述中的信息，该...