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>
相关推荐
德育处主任4 小时前
p5.js 3D模型(model)入门指南
前端·前端框架·canvas
VincentFHR1 天前
Three.js 利用 shader 实现 3D 热力图
前端·three.js·canvas
德育处主任1 天前
p5.js 加载 3D 模型(loadModel)
前端·数据可视化·canvas
用户2519162427112 天前
Canvas之颜色渐变
前端·javascript·canvas
德育处主任3 天前
p5.js 从零开始创建 3D 模型,createModel入门指南
前端·数据可视化·canvas
德育处主任3 天前
p5.js 三角形triangle的用法
前端·数据可视化·canvas
德育处主任4 天前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
德育处主任4 天前
p5.js 矩形rect绘制教程
前端·数据可视化·canvas
用户2519162427114 天前
Canvas之图像合成
前端·javascript·canvas
敲敲敲敲暴你脑袋5 天前
Cesium绘制3D热力山丘图
数据可视化·canvas·cesium