郑州河北建设工程信息网站坪山网站建设

郑州河北建设工程信息网站,坪山网站建设,我自己做的网站上有图片宣传食品,网站建设服务费合同大家好#xff0c;我是jobleap.cn的小九。 你希望掌握Node.js生态下PixiJS库的常用用法#xff0c;同时获取一份基于Next.js 15整合PixiJS的详细教程#xff0c;要求串联PixiJS的核心常用API并落地成可运行的实战案例。 一、前置准备 1. 环境要求 Node.js 20#xff08;…大家好我是jobleap.cn的小九。你希望掌握Node.js生态下PixiJS库的常用用法同时获取一份基于Next.js 15整合PixiJS的详细教程要求串联PixiJS的核心常用API并落地成可运行的实战案例。一、前置准备1. 环境要求Node.js 20Next.js 15最低兼容版本npm/pnpm/yarn推荐pnpm性能更优基础JavaScript/React知识2. 项目初始化# 创建Next.js 15项目npx create-next-app15 pixi-next-tutorialcdpixi-next-tutorial# 安装PixiJS依赖npminstallpixi.js# 或 pnpm add pixi.js / yarn add pixi.js二、核心原理Next.jsPixiJS的关键注意事项PixiJS是客户端渲染的2D图形库依赖浏览器DOM/Canvas API而Next.js 15默认服务端渲染SSR。因此必须用use client标记组件为客户端组件在useEffect组件挂载后初始化PixiJS避免服务端执行DOM相关代码三、完整实战串联PixiJS核心API我们将创建一个客户端组件整合PixiJS所有高频API应用创建、容器管理、图形绘制、精灵加载、文本渲染、交互事件、动画循环、滤镜、资源加载与清理。步骤1创建PixiJS客户端页面组件在app目录下新建pixi-scene/Page.tsxNext.js 15 app router的路由页面// app/pixi-scene/Page.tsx use client; // 关键标记为客户端组件禁止服务端执行 import { useEffect, useRef } from react; import * as PIXI from pixi.js; export default function PixiScenePage() { // 挂载Pixi画布的DOM容器Ref const canvasContainerRef useRefHTMLDivElement(null); // 存储Pixi应用实例避免重复初始化 const appRef useRefPIXI.Application | null(null); useEffect(() { if (!canvasContainerRef.current || appRef.current) return; // 1. 核心API创建PIXI应用实例 const app new PIXI.Application({ width: 800, // 画布宽度 height: 600, // 画布高度 backgroundColor: 0x1099bb, // 背景色16进制 resolution: window.devicePixelRatio || 1, // 高清屏适配 autoDensity: true, // 自动适配像素密度 }); appRef.current app; // 将Pixi画布挂载到DOM canvasContainerRef.current.appendChild(app.view as HTMLCanvasElement); // 2. 容器APIContainer层级管理 // Container类似HTML的div用于分组管理显示对象 const mainContainer new PIXI.Container(); app.stage.addChild(mainContainer); // stage是Pixi的根容器 // 3. 绘图APIGraphics矢量图形 // 绘制红色半透明矩形 const rect new PIXI.Graphics(); rect.beginFill(0xff0000); // 填充色 rect.drawRect(50, 50, 100, 100); // x,y,宽,高 rect.endFill(); rect.alpha 0.7; // 透明度0-1 mainContainer.addChild(rect); // 绘制绿色圆形 const circle new PIXI.Graphics(); circle.beginFill(0x00ff00); circle.drawCircle(200, 100, 50); // x,y,半径 circle.endFill(); mainContainer.addChild(circle); // 4. 文本APIText文字渲染 const text new PIXI.Text(PixiJS Next.js 15, { fontFamily: Arial, fontSize: 32, fill: 0xffffff, // 文字颜色 stroke: 0x000000, // 描边颜色 strokeThickness: 2, // 描边宽度 }); text.x 300; text.y 50; mainContainer.addChild(text); // 5. 资源加载APILoader加载图片 app.loader.add(bunny, https://pixijs.io/examples/examples/assets/bunny.png) .load((loader, resources) { // 6. 精灵APISprite位图渲染 const bunny new PIXI.Sprite(resources.bunny.texture); // 精灵基础属性配置 bunny.x 400; bunny.y 200; bunny.anchor.set(0.5); // 锚点设为中心方便旋转/拖拽 bunny.scale.set(2); // 缩放2倍 bunny.interactive true; // 开启交互 bunny.buttonMode true; // 鼠标悬停显示手型 mainContainer.addChild(bunny); // 7. 交互APIPointer事件点击/拖拽 // 点击变色 bunny.on(pointerdown, () { bunny.tint 0xff00ff; // 品红色 }); // 松开恢复 bunny.on(pointerup, () { bunny.tint 0xffffff; }); // 拖拽功能 bunny.on(pointerdown, (e: PIXI.FederatedPointerEvent) { bunny.dragging true; bunny.data e; bunny.alpha 0.8; }); bunny.on(pointerup, () { bunny.dragging false; bunny.data null; bunny.alpha 1; }); bunny.on(pointerupoutside, () { bunny.dragging false; bunny.data null; bunny.alpha 1; }); bunny.on(pointermove, () { if (bunny.dragging bunny.data) { const newPos bunny.data.getLocalPosition(mainContainer); bunny.x newPos.x; bunny.y newPos.y; } }); // 8. 滤镜APIFilter视觉效果 const blurFilter new PIXI.filters.BlurFilter(); blurFilter.blur 0; bunny.filters [blurFilter]; // 悬停添加模糊 bunny.on(pointerover, () { bunny.isHovered true; }); bunny.on(pointerout, () { bunny.isHovered false; }); // 9. 动画APITicker帧循环 // Ticker替代requestAnimationFramedelta保证帧率无关 app.ticker.add((delta) { rect.rotation 0.01 * delta; // 矩形旋转 // 圆形缩放动画 circle.scale.x Math.sin(Date.now() / 1000) 1.5; circle.scale.y Math.sin(Date.now() / 1000) 1.5; // 兔子悬停模糊动画 if (bunny.isHovered) { blurFilter.blur Math.min(blurFilter.blur 0.1, 5); } else { blurFilter.blur Math.max(blurFilter.blur - 0.1, 0); } }); }); // 10. 适配API窗口缩放响应 const handleResize () { if (appRef.current) { appRef.current.renderer.resize( window.innerWidth * 0.8, window.innerHeight * 0.8 ); } }; window.addEventListener(resize, handleResize); // 资源清理避免内存泄漏 return () { window.removeEventListener(resize, handleResize); if (appRef.current) { appRef.current.destroy(true); // 销毁应用释放所有资源 appRef.current null; } }; }, []); return ( div style{{ width: 100vw, height: 100vh, display: flex, justifyContent: center, alignItems: center }} div ref{canvasContainerRef}/div /div ); }步骤2运行与验证npmrun dev# 启动后访问 http://localhost:3000/pixi-scene你将看到800x600蓝色画布适配窗口缩放红色旋转矩形 绿色缩放圆形白色带黑边的标题文字可拖拽、点击变色、悬停模糊的兔子精灵步骤3拓展常用API可选1. 位图文本BitmapText高性能文字渲染// 需提前准备字体位图文件.fnt .png app.loader.add(gameFont, assets/game-font.fnt).load((loader, res) { const bitmapText new PIXI.BitmapText(游戏得分100, { fontName: GameFont, fontSize: 48, }); bitmapText.x 500; bitmapText.y 50; mainContainer.addChild(bitmapText); });2. 粒子容器ParticleContainer高性能批量渲染// 适合粒子效果/大量精灵 const particleContainer new PIXI.ParticleContainer(1000, { scale: true, position: true, alpha: true, }); // 生成1000个随机粒子 for (let i 0; i 1000; i) { const dot new PIXI.Sprite(PIXI.Texture.WHITE); dot.x Math.random() * 800; dot.y Math.random() * 600; dot.scale.set(0.1); dot.tint Math.random() * 0xffffff; particleContainer.addChild(dot); } mainContainer.addChild(particleContainer);3. 遮罩Mask区域裁剪// 圆形遮罩只显示兔子圆形区域内的部分 const mask new PIXI.Graphics(); mask.drawCircle(400, 200, 80); mainContainer.addChild(mask); bunny.mask mask;总结Next.js 15整合PixiJS的核心是use client标记useEffect初始化避免服务端执行DOM代码。PixiJS高频API核心链路Application入口→ Container管理→ Graphics/Sprite/Text渲染→ Loader加载→ Ticker动画→ 交互事件滤镜交互/视觉。生产环境需注意资源清理destroy、高性能渲染ParticleContainer、窗口适配避免内存泄漏。