1.PIXIJS简介PixiJS是一个轻量级的二维渲染引擎，可以自动检测是使用WebGL还是Canvas来创建图形。开发者无需专门学习WebGL，即可感受到强大的硬件加速的威力。2.react+pixijspixi.js-legacy，这个包提供了一个适用于所有设备的快速轻量级二维库。此包与pixi.js相同，但为不支持WebGL或更现代的JavaScript功能的浏览器提供回退支持。npminstallpixi.js-legacyPixi有几个重要的ClassContainer(容器)Renderer(渲染器)Sprite(精灵)Loader(资源加载器)Texture(纹理)Ticker(定时器)importReact,{useState,useEffect}from"react";import*作为来自“pixi.js-legacy”的PIXI；从“../../assets/sprites.json”导入spriteJson；从“../../assets/sprites.png”导入imgSprite；constPixi=()=>{constBackground_URL="assests/background.png";useEffect(()=>{lettype="WebGL";if(!PIXI.utils.isWebGLSupported()){type="canvas";}PIXI.utils.sayHello(type);InitStage();},[]);constInitStage=()=>{constapp=newPIXI.Application({width:800,height:800,antialias:true,transparent:false,resolution:1,backgroundColor:0x1d9ce0,});document.body.appendChild(app.view);//创建一个半径为32px的圆constcircle=newPIXI.Graphics();circle.beginFill(0xfb6a8f);circle.drawCircle(0,0,32);circle.endFill();圆.x=130;圆.y=130;circle.interactive=true;circle.buttonMode=true;circle.on("点击",()=>{console.log("===绑定点击事件");});constrectangle2=newPIXI.Graphics();rectangle2.beginFill(0xffffff);rectangle2.drawRect(0,0,80,64);rectangle2.endFill();rectangle2.position.set(110,20);rectangle2.interactive=true;rectangle2.buttonMode=true;rectangle2.on("click",()=>{console.log("rectangle2circle");console.log("===绑定点击事件");});//添加到app.stage以便它可以被渲染app.stage.addChild(circle);constmyContainer=newPIXI.Container();//相对于根节点的偏移量myContainer.position.set(40,40);myContainer.addChild(rectangle2);//创建一个图像精灵constavatar=newPIXI.Sprite.from("http://anata.me/img/avatar.jpg");//图片宽高缩放0.5avatar.scale.set(0.5,0.5);头像.x=10;化身.y=10;//是否可以交互//交互avatar.interactive=true;avatar.anchor.set(0.5,0.5);//监听事件avatar.on("click",()=>{console.log("头像精灵");//透明度avatar.alpha=0.5;});app.stage.addChild(myContainer);应用程序。stage.addChild（头像）；app.ticker.add(()=>{//每秒调用此方法60次（60帧动画）avatar.rotation+=0.01;});const{Loader,Spritesheet,Sprite}=PIXI;constloader=Loader.shared;//Loader.shared内置单例加载器loader.add("imgSprite",imgSprite).load(setup);functionsetup(){console.log("==imgSpriteloader=");consttexture=loader.resources["imgSprite"].texture.baseTexture;constsheet=newSpritesheet(texture,spriteJson);console.log("----",sheet,texture);sheet.parse((textures)=>{console.log("--textures--",textures);//imgSprite中一张名为treasure.png的图片//constavatar=newPIXI.Sprite.from("http://anata.me/img/avatar.jpg");consttreasure=newSprite(textures[0]);console.log("----",textures["gtglrw.png"],treasure);treasure.position.set(500,100);//imgSprite中一张名为blob.png的图片constblob=newSprite(textures[2]);blob.position.set(400,400);app.stage.addChild(treasure);app.stage.addChild(blob);});}//离开页面时需要手动清理内存，否则无法释放WebGL内存//基础文字constbasicText=newPIXI.Text("6666666");//自定义文字样式conststyle=newPIXI.TextStyle({fontFamily:"Arial",fontSize:36,fontStyle:"italic",fontWeight:"bold",fill：[“#ffffff”，“#00ff99”]，中风：“#4a1850”，strokeThickness：5，dropShadow：真，dropShadowColor：“#000000”，dropShadowBlur：4，dropShadowAngle：Math.PI/6，dropShadowDistance：6,wordWrap:true,wordWrapWidth:440,});constrichText=newPIXI.Text("6666666",style);richText.x=100;richText.y=300;app.stage.addChild(richText);};返回
