flitter

คนว่องไว

Flitter เป็นเอ็นจิ้นการเรนเดอร์จาวาสคริปต์ที่ทรงพลังและเฟรมเวิร์กที่ได้รับแรงบันดาลใจจาก Flutter รองรับทั้ง SVG และ Canvas เพื่อสร้างกราฟิกประสิทธิภาพสูงและอินเทอร์เฟซผู้ใช้ ในฐานะที่เป็นเอ็นจิ้นการเรนเดอร์มันให้การควบคุมอย่างละเอียดเกี่ยวกับกระบวนการเรนเดอร์ทำให้นักพัฒนาสามารถสร้างการสร้างภาพข้อมูลที่ซับซ้อนและโต้ตอบได้อย่างง่ายดาย มันถูกออกแบบมาเพื่อใช้การสร้างภาพข้อมูลข้อมูลแผนภูมิแบบโต้ตอบไดอะแกรมและตัวแก้ไขกราฟิกในเว็บแอปพลิเคชัน

คุณสมบัติที่สำคัญ

• เอ็นจิ้นการเรนเดอร์ขั้นสูง : ที่แกนกลาง Flitter เป็นเอ็นจิ้นการเรนเดอร์ที่มีความซับซ้อนซึ่งให้นักพัฒนาควบคุมได้อย่างแม่นยำว่าองค์ประกอบถูกดึงและอัปเดตบนหน้าจอได้อย่างไร

• RENDER OBJECT TREE : Flitter ใช้ทรีวัตถุเรนเดอร์สำหรับการเรนเดอร์ที่มีประสิทธิภาพช่วยให้การจัดการที่ง่ายและการจัดการเลย์เอาต์ที่ซับซ้อน วิธีการบนต้นไม้นี้ซึ่งเป็นศูนย์กลางของเอ็นจิ้นการเรนเดอร์ของ Flitter ช่วยให้การอัปเดตและการวาดใหม่ที่ดีที่สุด

• การเขียนโปรแกรมประกาศ : หลังจากกระบวนทัศน์ที่ประกาศออกมาหน้าจอจะอัปเดตโดยอัตโนมัติเมื่อค่าเปลี่ยนค่าลดความซับซ้อนของแอปพลิเคชันสถานะการจัดการและลดความซับซ้อนของการจัดการ DOM ด้วยตนเอง

• ไปป์ไลน์การเรนเดอร์ที่ได้รับการปรับปรุง : การแสดงซ้ำการวาดภาพและการคำนวณเค้าโครงใหม่ได้รับการจัดการโดยไปป์ไลน์เรนเดอร์พร้อมกับการปรับให้เหมาะสมเพื่อปรับปรุงส่วนที่จำเป็นเท่านั้น สิ่งนี้ทำให้มั่นใจได้ว่ามีประสิทธิภาพสูงแม้จะมีการสร้างภาพข้อมูลที่ซับซ้อนและมีข้อมูลอย่างหนัก

• การสนับสนุนการเรนเดอร์คู่ : ในฐานะเครื่องมือการเรนเดอร์ที่ยืดหยุ่น Flitter รองรับทั้ง SVG และ Canvas ซึ่งเป็นไปตามข้อกำหนดด้านกราฟิกต่างๆ นักพัฒนาสามารถเลือก Renderer ที่เหมาะสมได้ตามต้องการสลับระหว่างเวกเตอร์และกราฟิกบิตแมปได้อย่างราบรื่น

• เค้าโครงโมเดลกล่อง : ผู้ใช้สามารถเขียนเลย์เอาต์ได้อย่างง่ายดายโดยใช้โมเดลกล่องที่คุ้นเคยซึ่งเป็นวิธีที่ใช้งานง่ายในการจัดโครงสร้าง UIs ที่ซับซ้อนภายในเอ็นจิ้นการเรนเดอร์

• แอพพลิเคชั่นที่หลากหลาย : สามารถนำไปใช้ในสาขาต่าง ๆ เช่นแผนภูมิไดอะแกรมการสร้างภาพข้อมูลและตัวแก้ไขกราฟิกใช้ประโยชน์จากพลังของเอ็นจิ้นการเรนเดอร์พื้นฐาน

การแสดง

นี่คือตัวอย่างบางส่วนของสิ่งที่คุณสามารถสร้างด้วย Flitter: ERD แบบโต้ตอบ (ไดอะแกรมความสัมพันธ์เอนทิตี) [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' } ) } )
      } ) }
    />
  </ >
) ;

svelte

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?

1. เอ็นจิ้นการเรนเดอร์ที่ทรงพลัง : ความแข็งแกร่งหลักของ Flitter อยู่ในความสามารถในการเรนเดอร์ขั้นสูงทำให้สามารถจัดการกราฟิกและภาพเคลื่อนไหวที่ซับซ้อนได้อย่างราบรื่น

2. เส้นโค้งการเรียนรู้ง่าย : ใช้ไวยากรณ์คล้ายกับ Flutter ช่วยให้นักพัฒนามือถือสามารถปรับตัวเข้ากับสภาพแวดล้อมเว็บได้อย่างง่ายดายในขณะที่ใช้ประโยชน์จากเครื่องมือการเรนเดอร์บนเว็บที่ทรงพลัง

3. ประสิทธิภาพสูง : ไปป์ไลน์การเรนเดอร์ที่ดีที่สุดช่วยให้มั่นใจได้ว่าประสิทธิภาพที่ราบรื่นแม้จะมีการสร้างภาพข้อมูลที่ซับซ้อนและมีความซับซ้อน

4. ความยืดหยุ่น : บทคัดย่อการจัดการ SVG และ Canvas ช่วยให้นักพัฒนาสามารถมุ่งเน้นไปที่ตรรกะทางธุรกิจในขณะที่เอ็นจิ้นการเรนเดอร์จัดการการดำเนินการวาดระดับต่ำ

5. การเลือกเรนเดอร์ : สามารถเลือกระหว่าง SVG และ Canvas Renderers ได้ตามต้องการตอบสนองความต้องการกราฟิกที่หลากหลายและช่วยให้ประสิทธิภาพที่ดีที่สุดในสถานการณ์ต่าง ๆ

6. ความสามารถในการนำกลับมาใช้ใหม่ : เพิ่มความสามารถในการนำรหัสกลับมาใช้ใหม่ผ่านวิธีการที่ใช้ส่วนประกอบซึ่งเปิดใช้งานโดยสถาปัตยกรรมของเอ็นจิ้นการเรนเดอร์

การบริจาค

Flitter เป็นโครงการโอเพ่นซอร์ส เรายินดีต้อนรับการมีส่วนร่วมทุกรูปแบบรวมถึงรายงานข้อผิดพลาดคำแนะนำคุณสมบัติและคำขอดึง สำหรับรายละเอียดเพิ่มเติมกรุณาเยี่ยมชม Discord

ใบอนุญาต

Flitter มีให้ภายใต้ใบอนุญาต MIT

เรียนรู้เพิ่มเติม

สำหรับเอกสารและตัวอย่างโดยละเอียดเยี่ยมชมเอกสารทางการของ Flitter