React之PixiJS之渲染复杂SVG

React之PixiJS之渲染复杂SVG

一、概述

Pixi是一个超快的2D渲染引擎，这里主要使用PixiJS v6渲染复杂的SVG

二、总结

1. 使用

   • @pixi-essentials/svg给我们转换SVG提供了基础，不过还是不够完善，我们可以基于它按需拓展

   • pixi-viewport给我们提供了动态可视区域，移动，缩放等功能可以高效实现

2. 性能

   • 动态刷新

     • 如果渲染复杂的SVG，要将手动管理ticker，否则性能问题将带来灾难。对于渲染复杂SVG的需求来说，大多数情况下，可视区域都是静态的，但PixiJS默认开启ticker，对于复杂的SVG，严重影响性能，所以我们需要手动管理ticker:

       const ticker = app.ticker;
       // 关闭自动开启机制
       ticker.autoStart = false;
       // 关闭ticker
       ticker.stop()