flitter
vas and svg are supported with same code
Flitter는 Flut 렌더링 엔진으로서 렌더링 프로세스에 대한 세밀한 제어를 제공하여 개발자가 복잡하고 대화식 시각화를 쉽게 만들 수 있습니다. 웹 응용 프로그램에서 데이터 시각화, 대화식 차트, 다이어그램 및 그래픽 편집기를 효율적으로 구현하도록 설계되었습니다.
고급 렌더링 엔진 : 핵심에서 Flitter는 개발자가 화면에서 요소를 그리고 업데이트하는 방법을 정확하게 제어 할 수있는 정교한 렌더링 엔진입니다.
렌더링 객체 트리 : Flitter는 효율적인 렌더링을 위해 렌더 객체 트리를 사용하여 복잡한 레이아웃을 쉽게 관리하고 조작 할 수 있습니다. Flitter의 렌더링 엔진의 중심 인이 트리 기반 접근 방식을 통해 최적화 된 업데이트 및 다시 그리기가 가능합니다.
선언 프로그래밍 : 선언적 패러다임에 따라 화면은 값이 변경되면 자동으로 업데이트되어 응용 프로그램 상태 관리를 단순화하고 수동 DOM 조작의 복잡성을 줄입니다.
최적화 된 렌더링 파이프 라인 : 렌더링, 페인팅 및 레이아웃 재 계산은 렌더러 파이프 라인에 의해 관리되며 최적화가 필요한 부품 만 업데이트하기 위해 적용됩니다. 이를 통해 복잡하고 데이터가 많은 시각화로도 고성능을 보장합니다.
듀얼 렌더러 지원 : Flitter는 유연한 렌더링 엔진으로서 SVG와 캔버스를 모두 지원하여 다양한 그래픽 요구 사항을 충족합니다. 개발자는 필요에 따라 적절한 렌더러를 선택하여 벡터와 비트 맵 그래픽을 원활하게 전환 할 수 있습니다.
박스 모델 레이아웃 : 사용자는 친숙한 박스 모델을 사용하여 레이아웃을 쉽게 구성하여 렌더링 엔진 내에서 복잡한 UI를 구조화하는 직관적 인 방법을 제공 할 수 있습니다.
다양한 응용 프로그램 : 차트, 다이어그램, 데이터 시각화 및 그래픽 편집기와 같은 다양한 필드에서 기본 렌더링 엔진의 성능을 활용할 수 있습니다.
다음은 Flitter로 만들 수있는 것의 몇 가지 예입니다. Interactive ERD (Entity-Relationship Diagram) [https://easyrd.dev]
이 대화 형 ERD는 복잡한 대화식 다이어그램을 생성 할 수있는 Flitter의 기능을 보여줍니다. 사용자는 엔티티를 조작하고 관계를 추가하며 데이터베이스 구조를 실시간으로 시각화 할 수 있습니다. 이 쇼케이스는 다음에서 Flitter의 강점을 강조합니다.
복잡한 사용자 상호 작용을 처리하는 반응 형, 드래그 가능한 요소 만들기 사용자 입력을 기반으로 실시간 업데이트를 쉽게 렌더링합니다.
Flitter는 다양한 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' } ) } )
]
} )
} )
]
} ) ;
}
} 강력한 렌더링 엔진 : Flitter의 핵심 강도는 고급 렌더링 기능에있어 복잡한 그래픽 및 애니메이션을 원활하게 처리 할 수 있습니다.
Easy Learning Curve : Flut
고성능 : 최적화 된 렌더링 파이프 라인은 복잡하고 데이터 집약적 인 시각화를 통해서도 원활한 성능을 보장합니다.
유연성 : 초록 SVG 및 캔버스 조작을 통해 개발자는 비즈니스 로직에 집중할 수있는 반면 렌더링 엔진은 저수준 드로잉 작업을 처리합니다.
렌더러 선택 : 필요에 따라 SVG와 Canvas 렌더러 중에서 선택할 수 있으며 다양한 그래픽 요구 사항을 충족하며 다양한 시나리오에서 최상의 성능을 제공 할 수 있습니다.
재사용 성 : 기본 렌더링 엔진의 아키텍처에 의해 가능성이있는 구성 요소 기반 접근법을 통해 코드 재사용 성을 향상시킵니다.
Flitter는 오픈 소스 프로젝트입니다. 버그 보고서, 기능 제안 및 풀 요청을 포함한 모든 형태의 기여를 환영합니다. 자세한 내용은 Discord를 방문하십시오
Flitter는 MIT 라이센스에 따라 제공됩니다.
자세한 문서 및 예를 들어 Flitter 공식 문서를 방문하십시오.
