flitter -Download - flitter herunterladen

Flitter

Flitter ist eine leistungsstarke JavaScript-Rendering-Engine und -Regeln, die von Flutter inspiriert ist und sowohl SVG als auch Canvas unterstützt, um Hochleistungsgrafiken und Benutzeroberflächen zu erstellen. Als Rendering-Engine bietet sie eine feinkörnige Kontrolle über den Rendering-Prozess, sodass Entwickler komplexe, interaktive Visualisierungen problemlos erstellen können. Es wurde entwickelt, um Datenvisualisierungen, interaktive Diagramme, Diagramme und grafische Redakteure in Webanwendungen effizient implementieren.

Schlüsselmerkmale

Advanced Rendering Engine : Im Kern ist Flitter eine hoch entwickelte Rendering -Engine, die den Entwicklern eine präzise Kontrolle darüber gibt, wie Elemente auf dem Bildschirm gezogen und aktualisiert werden.
Render -Objektbaum : Flitter verwendet einen Render -Objektbaum zum effizienten Rendering, das eine einfache Verwaltung und Manipulation komplexer Layouts ermöglicht. Dieser baumbasierte Ansatz, der für die Rendering-Engine von Flitter von zentraler Bedeutung ist, ermöglicht optimierte Updates und Wiederholungen.
Deklarative Programmierung : Nach einem deklarativen Paradigma aktualisiert der Bildschirm automatisch, wenn sich die Werte ändern, die Anwendungszustandsführung und die Verringerung der Komplexität der manuellen DOM -Manipulation vereinfachen.
Optimierte Rendering-Pipeline : Wiederholung, Malen und Layout-Neuberechnung werden von der Renderer-Pipeline verwaltet, wobei Optimierungen nur für die Aktualisierung der erforderlichen Teile angewendet werden. Dies gewährleistet eine hohe Leistung auch bei komplexen, datenlasteten Visualisierungen.
Doppelrenderer -Unterstützung : Als flexibler Rendering -Engine unterstützt Flitter sowohl SVG als auch Leinwand und erfüllt verschiedene grafische Anforderungen. Entwickler können nach Bedarf den entsprechenden Renderer auswählen und sich nahtlos zwischen Vektor- und Bitmap -Grafiken wechseln.
Box -Modelllayout : Benutzer können Layouts einfach mit dem vertrauten Box -Modell komponieren und eine intuitive Möglichkeit bieten, komplexe Benutzeroberflächen innerhalb der Rendering -Engine zu strukturieren.
Verschiedene Anwendungen : Sie können in verschiedenen Bereichen wie Diagramme, Diagrammen, Datenvisualisierung und grafischen Herausgebern verwendet werden, wodurch die Leistung der zugrunde liegenden Rendering -Engine nutzt.

Showcase

Hier sind einige Beispiele für das, was Sie mit Flitter erstellen können: Interactive ERD (Entity-Relationship Diagramm) [https://easyrd.dev]

Diese interaktive ERD zeigt die Fähigkeit von Flitter, komplexe interaktive Diagramme zu erstellen. Benutzer können Entitäten manipulieren, Beziehungen hinzufügen und Datenbankstrukturen in Echtzeit visualisieren. Dieses Präsentieren zeigt die Stärken von Flitter in:

Erstellen reaktionsschnell, draggierbarer Elemente, die komplexe Benutzerinteraktionen bearbeiten, die komplizierte Diagramme mit einfachen Echtzeit-Updates basierend auf der Benutzereingabe machen

Installationshandbuch

Flitter kann in verschiedenen JavaScript -Umgebungen verwendet werden. Hier finden Sie Installations- und Nutzungsmethoden für wichtige Umgebungen:

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

Reagieren

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

Sufle

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 ' }) })
  })}
/>

Nutzungsbeispiel

Beispiel für das Erstellen eines einfachen Diagramms mit 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' } ) } )
            ]
          } )
        } )
      ]
    } ) ;
  }
}

Warum flatterisch?

Leistungsstarke Rendering -Engine : Die Kernstärke von Flitter liegt in seinen fortschrittlichen Rendering -Funktionen und ermöglicht eine reibungslose Handhabung komplexer Grafiken und Animationen.
Einfache Lernkurve : Verwendet Syntax ähnlich wie Flutter, sodass sich mobile Entwickler einfach an die Webumgebung anpassen und gleichzeitig eine leistungsstarke webbasierte Rendering-Engine nutzen können.
Hohe Leistung : Die optimierte Rendering-Pipeline sorgt auch mit komplexen, datenintensiven Visualisierungen um eine reibungslose Leistung.
Flexibilität : Abstracts SVG und Canvas Manipulation, sodass Entwickler sich auf die Geschäftslogik konzentrieren, während die Rendering-Engine die Niveau-Zeichnungsvorgänge abwickelt.
Auswahl der Renderer : Kann nach Bedarf zwischen SVG- und Canvas -Renderern wählen, verschiedene grafische Anforderungen erfüllen und die beste Leistung in verschiedenen Szenarien ermöglichen.
Wiederverwendbarkeit : Erhöht die Wiederverwendbarkeit der Code durch einen komponentenbasierten Ansatz, der durch die Architektur der zugrunde liegenden Rendering Engine ermöglicht wird.

Beitragen

Flitter ist ein Open-Source-Projekt. Wir begrüßen alle Formen von Beiträgen, einschließlich Fehlerberichten, Feature -Vorschlägen und Anfragen. Weitere Informationen finden Sie unter Discord