تنزيل fragment - تنزيل رمز المصدر fragment

fragment

بيانات الموقع

v0.1.18

تنزيل

جزء

بيئة تطوير الويب للترميز الإبداعي

Screen capture of Fragment, splitted in two columns, the left one has a centered canvas displaying squares arranged in a grid, the right column contains various controls for colors, variables and exports

يوفر fragment واجهة برمجة تطبيقات بسيطة للعمل مع <canvas> .

سمات

أوضاع عرض متعددة: Canvas 2D ، P5.JS ، Three.JS ، Thares WebGL Prapment
واجهة المستخدم الرسومية المدمجة من ملفات Sketch
تصدير <canvas> إلى الصور (.png ، .webm ، .jpg) أو مقاطع الفيديو (.mp4 ، .webm ، .gif) على الذبابة
دعم التظليل الساخن ودعم glslify
رسومات تفاعلية باستخدام المشغلات
بناء ثابت لنشر الإنتاج

تثبيت

مع `npx`

npx fragment-tools sketch.js --new

تثبيت عالميا مع `--global`

npm install fragment-tools --global

يجب أن تكون قادرًا الآن على تشغيل fragment من سطر الأوامر الخاص بك.

fragment sketch.js --new

تثبيت محليا

npm install fragment-tools
npx fragment sketch.js --new

الاستخدام

 # create a new directory for your sketches
mkdir sketches

# move into that folder
cd sketches

# create a sketch from a template
npx fragment-tools ./sketch.js --new --template=2d

تعرف على المزيد حول خيارات العلم المتاحة في مستندات CLI.

مثال

هذا مثال على رسم رسم دائرة زرقاء على خلفية سوداء مع تحكم مخصص لنصف قطر الدائرة.

 export let props = {
  radius : {
    value : 10 ,
    params : {
      min : 4 ,
      max : 30 ,
    } ,
  } ,
} ;

export let update = ( { context , width , height } ) => {
  // draw background
  context . fillStyle = '#000000' ;
  context . fillRect ( 0 , 0 , width , height ) ;

  // draw circle
  const radius = props . radius . value ;

  context . fillStyle = '#0000ff' ;
  context . beginPath ( ) ;
  context . arc ( width * 0.5 , height * 0.5 , radius , 0 , 2 * Math . PI , false ) ;
  context . fill ( ) ;
} ;

تعرف على كيفية كتابة رسم الخاص بك باتباع دليل البدء ، وقراءة مستندات API أو الأمثلة.

المساهمة

إذا وجدت مشكلات ، يرجى تقديم واحدة مع تفاصيل حول كيفية إعادة إنتاجها.

لا تتردد في الوصول إلى Twitter إذا كنت ترغب في مناقشة المشروع.

تشغيله محليا

 # clone or fork the project
git clone https://github.com/raphaelameaume/fragment.git

# move to the root of the repository
cd fragment

# run the command line locally
node ./bin/index.js examples/shape-2d.js --dev

# or from your sketch folder
node [path-to-root]/bin/index.js sketch.js --dev

يتيح علامة --dev فقط تسجيل الدخول إلى Vite info ، مفيد للتطوير. وإلا فإنه سيعمل كما هو الحال عند الركض من حزمة NPM.

بدلاً من ذلك ، يمكنك إخبار NPM بتوجيه أمر fragment إلى المجلد الذي تم استنساخه حديثًا.

 # at the root of the repo
npm link

يجب أن تكون قادرًا على الأمر كما كان من قبل ، فقط هذه المرة سيشير إلى المستودع بدلاً من الحزمة المثبتة عالميًا.

 fragment sketch.js

إذا لم يكن هذا هو الحال ، فحاول إلغاء fragment-tools على مستوى العالم أولاً ، تأكد من عدم العثور على أمر fragment بعد الآن ، ثم أعد إعادة ربط المشروع من جذر الريبو.