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' } ) } )
            ]
          } )
        } )
      ]
    } ) ;
  }
}