flitter下载 - flitter源代码下载

flitter

Flitter是一种功能强大的JavaScript渲染引擎和框架，灵感来自Flutter，支持SVG和Canvas创建高性能图形和用户界面。作为渲染引擎，它对渲染过程提供了细粒度的控制，使开发人员可以轻松地创建复杂的交互式可视化。它旨在在Web应用程序中有效地实现数据可视化，交互式图表，图表和图形编辑器。

关键功能

高级渲染引擎：Flitter是一款复杂的渲染引擎，可为开发人员精确控制元素在屏幕上的绘制和更新。
渲染对象树：Flitter使用渲染对象树进行有效的渲染，从而轻松管理和操纵复杂的布局。这种基于树的方法是Flitter渲染引擎的核心，可实现优化的更新和重新绘制。
声明性编程：声明范式之后，屏幕会自动更新值时，简化了应用程序状态管理并降低了手动DOM操作的复杂性。
优化的渲染管道：重新渲染，绘画和布局重新计算由渲染器管道管理，并且对仅更新必要的部分进行了优化。即使使用复杂的数据可视化，这也可以确保高性能。
双渲染器支持：作为灵活的渲染引擎，Flitter支持SVG和画布，满足各种图形要求。开发人员可以根据需要选择适当的渲染器，在向量和位图图形之间无缝切换。
框模型布局：用户可以使用熟悉的框模型轻松地组成布局，从而提供了一种直观的方式来在渲染引擎中构造复杂的UI。
不同的应用程序：可以在各个领域（例如图表，图表，数据可视化和图形编辑器）中使用，利用基础渲染引擎的功能。

展示柜

以下是您可以使用Flitter创建的示例：Interactive ERD（实体 - 利用图）[https://easyrd.dev]

这种交互式ERD展示了Flitter创建复杂的，交互式图的能力。用户可以实时操纵实体，添加关系并可视化数据库结构。该展示凸显了Flitter的优势：

创建响应式，可拖动的元素处理复杂的用户交互，渲染基于用户输入的轻松实时更新复杂的图

安装指南

Flitter可以在各种JavaScript环境中使用。以下是主要环境的安装和使用方法：

纯JavaScript

npm install @meursyphus/flitter

 import { Container } from "@meursyphus/flitter" ;

/**
 * canvas style must be set to 100%, 100%
 * and you also must wrap div for canvas in order to calculate the size of the canvas
 */
document . querySelector < HTMLDivElement > ( "#app" ) ! . innerHTML = `
  <div style="width: 100vw; height: 100vh" id="container">
    <canvas style="width: 100%; height: 100%;" id="view" />
  </div>
` ;
// Note: SVG is also supported
// document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
//   <div style="width: 100vw; height: 100vh" id="container">
//     <svg style="width: 100%; height: 100%;" id="view"></svg>
//   </div>
// `;
const app = new AppRunner ( {
  view : document . querySelector < HTMLCanvasElement > ( "#view" ) ! ,
} ) ;
/**
 * you must set resizeTarget to calculate the size of the canvas
 */
app . onMount ( {
  resizeTarget : document . querySelector < HTMLDivElement > ( "#container" ) ! ,
} ) ;

app . runApp ( Container ( { color : 'lightblue' } ) ) ;

反应

npm install @meursyphus/flitter @meursyphus/flitter-react

 import { Container , Alignment , Text , TextStyle } from '@meursyphus/flitter' ;
import Widget from '@meursyphus/flitter-react' ;

const App = ( ) => (
  < >
    < Widget
      width = "600px"
      height = "300px"
      renderer = "canvas" // or svg
      widget = { Container ( {
        alignment : Alignment . center ,
        color : 'lightblue' ,
        child : Text ( "Hello, Flitter SVG!" , { style : TextStyle ( { fontSize : 30 , weight : 'bold' } ) } )
      } ) }
    />
  </ >
) ;

苗条

npm install @meursyphus/flitter @meursyphus/flitter-svelte

< script >
  import { Container , Alignment , Text , TextStyle } from ' @meursyphus/flitter ' ;
  import Widget from ' @meursyphus/flitter-svelte ' ;
</ script >

< Widget
  width = " 600px "
  height = " 300px "
  renderer = " canvas " <!-- or " svg " -->
  widget={ Container ({
    alignment: Alignment . center ,
    color: ' lightblue ' ,
    child: Text ( " Hello, Flitter SVG! " , { style: TextStyle ({ fontSize: 30 , weight: ' bold ' }) })
  })}
/>

用法示例

使用Flitter创建简单图表的示例：

 import {
  Container ,
  Animation ,
  Text ,
  TextStyle ,
  StatefulWidget ,
  State ,
  Alignment ,
  SizedBox ,
  Column ,
  MainAxisSize ,
  MainAxisAlignment ,
  Row ,
  CrossAxisAlignment ,
  FractionallySizedBox ,
  BoxDecoration ,
  BorderRadius ,
  Radius ,
  AnimationController ,
  Tween ,
  CurvedAnimation ,
  Curves
} from '@meursyphus/flitter' ;

export default function BarChart ( ) {
  return Container ( {
    alignment : Alignment . center ,
    color : 'lightgrey' ,
    child : Column ( {
      mainAxisSize : MainAxisSize . min ,
      crossAxisAlignment : CrossAxisAlignment . center ,
      children : [
        Text ( 'BarChart' , { style : new TextStyle ( { fontFamily : 'Intent' , fontWeight : '600' } ) } ) ,
        SizedBox ( {
          width : 200 ,
          height : 150 ,
          child : Row ( {
            mainAxisAlignment : MainAxisAlignment . spaceBetween ,
            children : [
              { label : 'S' , value : 60 } ,
              { label : 'M' , value : 20 } ,
              { label : 'T' , value : 30 } ,
              { label : 'W' , value : 90 } ,
              { label : 'T' , value : 70 } ,
              { label : 'F' , value : 50 } ,
              { label : 'S' , value : 40 }
            ] . map ( ( { label , value } ) => new Bar ( label , value ) )
          } )
        } )
      ]
    } )
  } ) ;
}

class Bar extends StatefulWidget {
  constructor ( public label : string , public value : number ) {
    super ( ) ;
  }

  createState ( ) : State < StatefulWidget > {
    return new BarState ( ) ;
  }
}

class BarState extends State < Bar > {
  animationController ! : AnimationController ;
  tweenAnimation ! : Animation < number > ;

  override initState ( ) : void {
    this . animationController = new AnimationController ( {
      duration : 10000
    } ) ;
    this . animationController . addListener ( ( ) => {
      this . setState ( ) ;
    } ) ;
    const tween = new Tween ( { begin : 0 , end : this . widget . value } ) ;
    this . tweenAnimation = tween . animated (
      new CurvedAnimation ( {
        parent : this . animationController ,
        curve : Curves . easeInOut
      } )
    ) ;
    this . animationController . forward ( ) ;
  }

  override build ( ) {
    return Column ( {
      mainAxisAlignment : MainAxisAlignment . end ,
      children : [
        FractionallySizedBox ( {
          heightFactor : this . tweenAnimation . value / 100 ,
          child : Column ( {
            children : [
              Container ( {
                width : 20 ,
                decoration : new BoxDecoration ( {
                  color : '#1a1a1a' ,
                  borderRadius : BorderRadius . only ( {
                    topLeft : Radius . circular ( 4 ) ,
                    topRight : Radius . circular ( 4 )
                  } )
                } )
              } ) ,
              SizedBox ( { height : 5 } ) ,
              Text ( this . widget . label , { style : new TextStyle ( { fontFamily : 'Intent' } ) } )
            ]
          } )
        } )
      ]
    } ) ;
  }
}