pixi.js简单交互事件（点击、缩放、平移）
注意：本⽂代码使⽤的Pixi.js版本为PixiJS 5.3.3
pixi中常⽤的⿏标交互事件：
//兼容⿏标和触摸屏的共同触发
type InteractionPointerEvents = "pointerdown" | "pointercancel" | "pointerup" | "pointertap" | "pointerupoutside" | "pointermove" | "pointerover" | "pointerout";
//触摸屏触发事件
type InteractionTouchEvents = "touchstart" | "touchcancel" | "touchend" | "touchendoutside" | "touchmove" | "tap";
//⿏标触发事件
type InteractionMouseEvents = "rightdown" | "mousedown" | "rightup" | "mouseup" | "rightclick" | "click" | "rightupoutside" | "mouseupoutside" | "mousemove" | "mouseover" | "mouseout"；点击事件
⾸先，我们再Stage中添加⼀个圆形按钮，将其interactive属性设置为true，并给它绑定⼀个点击事件。
interactive默认为false，不会响应交互事件。buttonMode属性，默认为false，设置为true时，⿏标悬浮会变成⼿型。或者可以直接设置cursor来修改光标样式
const point = new Graphics();
point.beginFill(0x0bef47)
point.drawCircle(300, 300, 50)
point.interactive = true;//响应交互
point.buttonMode = true;//⿏标变⼿型
<("pointerdown", (event: PIXI.InteractionEvent) => {
console.log("graphics")
})
app.stage.addChild(point)
同样的还可以给舞台stage也添加⼀个点击事件，因为stage其实就是⼀个特殊的Container
app.stage.interactive = true;//这个不能忘记
("pointerdown", (event: PIXI.InteractionEvent) => {
console.log("stage")
})
先测试下，上⾯的点击事件。
点击point按钮，控制台输出graphics -> stage。由于点击事件传递，触发了按钮和舞台的点击事件。
点击stage空⽩处，控制台⽆输出。这个原因其实是因为Container本⾝是⽆法被点击的，需要有⼀个hitArea。graphics继承于Container，在设定了图形范围后，其实就是确定了hitArea。或者可以直接设定点击区域app.stage.hitArea = new PIXI.Rectangle(0, 0, 300, 300);
还可以在renderer上添加点击事件，这个就可以直接响应在stage空⽩处的点击事件。
console.log("renderer", event)
})
当然最外⾯还可以⽤window的点击事件。
window.addEventListener("pointerdown", (event: any) => {
console.log("window")
})
最后，点击point按钮就可以看到控制台依次输出的graphics -> stage -> renderer -> window。
平移事件（拖拽）
知道了全屏的点击事件后，拖拽平移就简单了。通过dragFlag判断当前是否处于拖拽状态，绑定mousemove事件，移动后修改stage的position即可。
let dragFlag = false;
let startPoint: any;
dragFlag = true
startPoint = { x: event.data.global.x, y: event.data.global.y }
})
if (dragFlag) {
const dx = event.data.global.x - startPoint.x;
const dy = event.data.global.y - startPoint.y;
app.stage.position.x += dx;
app.stage.position.y += dy;
startPoint = { x: event.data.global.x, y: event.data.global.y }
}
})
dragFlag = false
})
缩放事件
缩放就直接绑定到window上，每次⿏标滚动修改stage的scale即可。
window.addEventListener("mousewheel", (event: any) => {
const step = event.wheelDelta > 0 ? 0.1 : -0.1
if (app.stage.scale.x + step >= 0.1) {
app.stage.scale.x += step
app.stage.scale.y += step
}
})
总结
下⾯列举⼀些好⽤的pixi第三⽅插件
: ⼀个为了游戏准备的完整的2D碰撞函数集.
: 拖放, 按钮, ⼀个通⽤的指针和其他有⽤的交互⼯具集。
: 给Pixi精灵准备的简单易⽤的缓动动画效果。
: 创建像爆炸，⽕焰和魔法等粒⼦效果。
:
创建和使⽤Pixi精灵的⼀个更容易和更直观的做法，包括添加状态机和动画播放器。让Pixi的⼯作变得更有趣。
:⼀个加载，控制和⽣成声⾳和⾳乐效果的微型库。包含了⼀切你需要添加到游戏的声⾳。
: 使⽤真正的时间增量插值实现的超平滑精灵动画。它也允许为你的运⾏的游戏和应⽤指定 fps (帧率) ，并且把你的精灵图循环渲染完全从你的应⽤逻辑循环中分离出去。
>js制作简单的焦点图效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。