当前位置: 首页 > 科技观察

一起来学习Pixijs(一):常见图形的绘制

时间:2023-03-16 12:21:26 科技观察

大家好,我是前端西瓜哥。pixijs是一个功能强大的WebCanvas2D库,以其强大的性能而闻名。底层使用WebGL实现硬件加速。当然,如果不支持,也可以回退到Canvas。本文使用的pixijs版本为7.1.2。ApplicationApplication代表一个pixijs应用,对应一个Canvas。创建一个Application实例:constapp=newPIXI.Application({width:640,height:360});支持的构造参数有很多,这里列举一些常用的选项:width/height:设置Canvas的宽高。background:背景颜色,可以是数字或字符串,默认为0x000000,即黑色。view:指定要应用的Cavans元素,你可以不提供,pixijs会为你新建一个,添加到body元素下即可。resizeTo:适应容器元素的大小变化,比如window。宽/高配置项设置后无效。更多高级配置请查看官方API文档。这里我没有提供视图,所以我们需要在页面上挂上pixijs生成的Canvas元素:document.body.appendChild(app.view);接下来,我们开始绘制图形。GraphicsGraphics类常用于绘制一些基本图形,如矩形、圆形、线段等。除了绘制图形,你还可以用它来设置遮罩(mask)或命中区域(hitArea)。oneGraphics下不仅可以绘制一个图形,还可以绘制多个图形。绘制矩形绘制一个填充颜色为红色的矩形。constrect=newPIXI.Graphics();rect.beginFill(0xFF0044);//设置填充颜色rect.lineStyle(5,0xFFFFFF);//设置描边线宽和颜色rect.drawRect(100,100,200,100);//参数为x,y,width,height//添加到舞台app.stage.addChild(rect);app.stage是放置图形的地方,即“舞台”。这里我们需要通过addChild将创建好的图形添加到其中,然后pixijs渲染器会读取图形进行绘制。drawRect是一种古老的写作方式。看似直接在画布上画一个矩形,其实底层是创建一个Rect对象,添加到图形树中。不会先绘制,图形树准备好后在渲染阶段读取。对象的数据并绘制。这是一种与不维护图形树状态的CanvasRenderingContext2D.fillRect不同的绘图机制。Graphics的本质不是绘图工具,而是一种建树的工具,绘图的实现在别处。另一种写法是先创建一个PIXI.Rectangle实例。这个实例只描述了一个矩形的属性,不能直接添加到舞台上。需要通过Graphics的DrawShape添加到Graphics中。constrect=newPIXI.Graphics();rect.beginFill(0xFF0044);//设置填充颜色rect.lineStyle(5,0xFFFFFF);//设置描边线宽和颜色consts=newPIXI.Rectangle(100,100,200,100);rect.drawShape(s);//记得添加到舞台上app.stage.addChild(rect);画圆和画圆是一样的:constcircle=newPIXI.Graphics();circle。开始填充(0x00FF44);circle.lineStyle(5,0xFFFFFF);//参数:cx(中点),cy,radiuscircle.drawCircle(100,100,50);app.stage.addChild(圆圈);效果:kind锯齿严重,这是因为pixijs默认没有开启抗锯齿,因为抗锯齿处理会消耗额外的性能。可以开启全局抗锯齿能力:constapp=newPIXI.Application({antialias:true,/*其他配置项*/});开启抗锯齿后,圆圈肉眼可见变圆:画圆角矩形代码:constroundedRect=newPIXI.Graphics();roundedRect.beginFill(0xff0044);roundedRect.lineStyle(5,0xffffff);//参数为:x,y,width,height,radiusroundedRect.drawRoundedRect(100,100,200,100,16);//添加到舞台app.stage.addChild(roundedRect);Effect:drawingellipse代码:constellipse=newPIXI.Graphics();ellipse.beginFill(0xff0044);ellipse.lineStyle(5,0xffffff);//参数:cx,cy,width,heightellipse.drawEllipse(100),100,80,40);//添加到舞台app.stage.addChild(ellipse);效果:绘制线条代码:constline=newPIXI.Graphics();line.lineStyle(5,0xffffff);line.moveTo(100,100);line.lineTo(300,250);//添加到stageapp.stage.addChild(线);作用:绘制多边形的代码:constpolygon=newPIXI.Graphics();多边形.beginFill(0xff0044);polygon.lineStyle(5,0xffffff);//x1,y1,x2,y2,...polygon.drawPolygon(100,100,300,250,350,50);//添加到舞台app.stage.addChild(多边形);作用:绘制三阶贝塞尔曲线代码:constcurve=newPIXI.Graphics();curve.beginFill(0xff0044);curve.lineStyle(5,0xffffff);curve.moveTo(100,180)//cpX,cpY,cpX2,cpY2,toX,toYcurve.bezierCurveTo(90,100,210,100,300,180)//添加到app.stage.addChild(curve)下的stage中;作用:本文结尾??主要讲一下pixijs中一些基本图形的绘制和书写