PixiJS教程(004):点击事件交互

1.6 事件交互

实现要求:点击宝剑,修改宝剑的颜色。

1️⃣实现代码:

js 复制代码
// 为精灵添加交互事件
sprite.interactive = true;
sprite.on('click', () => {
    // 点击精灵时,改变精灵的颜色
    sprite.tint = Math.random() * 0xFFFFFF;
});

说明:

  1. 在 PixiJS 中,sprite.tint 是一个用于改变精灵(Sprite)颜色的属性。它通过乘法混合的方式将指定的颜色应用到精灵的原始纹理上,从而实现变色效果。

2️⃣实现效果:

3️⃣完整代码:

js 复制代码
<template>
<div>

</div>
</template>

<script setup>
// 导入pixi.js
import * as PIXI from 'pixi.js';
// 创建应用
const app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 0x1099bb,
    resolution: window.devicePixelRatio || 1,
    // 设置抗锯齿
    antialias: true
})
// 将应用画布添加到DOM中
document.body.appendChild(app.view);

// 创建一个纹理
const texture = PIXI.Texture.from('./textures/mujian.png');
// 创建一个精灵
const sprite = new PIXI.Sprite(texture);
// 设置精灵的锚点
sprite.anchor.set(0.5, 0.5);
// 设置精灵的位置
sprite.position.set(window.innerWidth / 2, window.innerHeight / 2);
// 设置精灵的缩放
sprite.scale.set(0.5, 0.5);
// 设置精灵的旋转
sprite.rotation = 0.5;
// 将精灵添加到舞台
app.stage.addChild(sprite);

// ticker实现动画
app.ticker.add((delta) => {
    // 每帧旋转精灵
    sprite.rotation += 0.01 * delta;
});

// 为精灵添加交互事件
sprite.interactive = true;
sprite.on('click', () => {
    // 点击精灵时,改变精灵的颜色
    sprite.tint = Math.random() * 0xFFFFFF;
});

</script>

<style>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
canvas{
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
}
</style>
相关推荐
纳兹咩programmer18 小时前
uni-app踩坑记录-Canvas层级过高遮挡问题
canvas
吃饺子不吃馅3 天前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学
吃饺子不吃馅4 天前
Canvas高性能Table架构深度解析
前端·javascript·canvas
吃饺子不吃馅5 天前
Canvas实现协同电影选座
前端·架构·canvas
水星梦月6 天前
跨平台开发中的图形渲染:Canvas与View+CSS的性能分析与决策路径
前端·css·图形渲染·canvas
华仔啊11 天前
用 Vue3 + Canvas 做了个超实用的水印工具,同事都在抢着用
前端·vue.js·canvas
普兰店拉马努金11 天前
【Canvas与玻璃光】白铝圈中国制造圆饼
canvas·玻璃光·中国制造
敲敲敲敲暴你脑袋12 天前
Canvas绘制自定义流动路径
vue.js·typescript·canvas
linweidong13 天前
让低端机也能飞:Canvas/WebGL/Viz 分层、降级渲染与数据抽样策略
前端框架·webgl·canvas·前端动画·前端面经·css渲染·动画优化
海阔天空668816 天前
微信小程序添加水印功能
微信小程序·canvas·水印