تنزيل jscad text - تنزيل كود مصدر jscad text

jscad text

تحميل الخط

1.0.0

تنزيل

jscad-text

إنشاء مخططات تفصيلية للنص باستخدام خطوط TTF

يحتوي هذا المشروع على مجموعة من الوظائف التي تنتج مخططات ثنائية الأبعاد للنص باستخدام خطوط TTF.

ملخص

لا يوفر مشروع JSCAD القدرة على استخدام خطوط TTF عند إنشاء مخططات تفصيلية للنص (إنه يدعم خطوط SIMPLEX فقط.) لذلك، تم إنشاء مجموعة خاصة من الوظائف لتكملة JSCAD.

ملاحظة: نظرًا لطبيعة خطوط TTF، لا يمكن استخدام هذه المكتبة عبر JSCAD Web UI. واصل القراءة...

في الأساس، تعتمد هذه المكتبة على مكتبة 'opentype.js'. إنها مكتبة رائعة حقًا وتقوم ببعض الأشياء الرائعة؛ يقوم بفك ضغط الخط، وقراءة المحتويات، وإنتاج هياكل تشبه SVG.

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

هناك مثالان؛ أحدهما يقرأ ملفات الخطوط المحلية والآخر يقوم بتنزيل الخطوط من Google Fonts.

جدول المحتويات

تثبيت
أمثلة
المشاريع
ملاحظة خاصة
رخصة

تثبيت

بالنسبة للمشاريع القائمة على Node.js، يمكن تثبيت هذه الحزمة باستخدام NPM.

 npm install jscad-text

بالنسبة للمشاريع المستقلة، يمكن تنزيل هذه الحزمة وتضمينها كمكون.

قم بتنزيل الحزمة من جيثب
قم بفك ضغط المحتويات، مما سيؤدي إلى إنشاء دليل يسمى "jscad-text"
انسخ دليل "jscad-text" إلى المشروع الأكبر

أمثلة

كل واحدة من هذه المشاريع عبارة عن مشروع NPM صغير مستقل؛ الخط المحلي وجوجلفونت.

مشروع الخط المحلي

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

MacOS: راجع /Library/Fonts أو /System/Library/Fonts
ويندوز :
لينكس :

يثبت:

 npm install
cd localfont
ln -s ../../jscad-text ./jscad-text
cd ..

تنفيذ:

 npm run example

وافتح "localfont/index.svg" باستخدام أي متصفح.

يمكن تعديل محتويات "index.js" لتغيير المسار إلى ملف الخط، أو تغيير الخيارات إلى وظيفة textToPaths(). يعد هذا أيضًا تصميم JSCAD نموذجيًا، ويمكن تحديده للقيام بكل ما تريده بالمسارات.

مشروع خطوط جوجل

يحصل هذا المشروع على الخطوط من موقع Google Fonts. ما عليك سوى الذهاب إلى هناك، والعثور على خط لطيف "عائلي"، ثم كتابة الاسم.

يتم استخدام مكتبة رائعة أخرى تسمى "node-fetch" لتنزيل الخط من الإنترنت.

يثبت:

 cd googlefont
npm install
ln -s ../../jscad-text ./jscad-text

تنفيذ:

 npm run cli

وافتح "text.svg" باستخدام أي متصفح.

المشاريع

لا يزال هناك...

لذا، إليك كيفية استخدام هذه المكتبة داخل المشروع (تصميم JSCAD).

إذا لم يكن الأمر كذلك بالفعل، فقم بإنشاء مجلد جديد للمشروع. (يستخدم هذا المثال "newproject" كاسم للمجلد.)

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

الآن، ابحث عن الخط، وانسخه إلى مجلد المشروع.

داخل مجلد المشروع، قم بإنشاء ملف يسمى Index.js، وأضف الكود التالي.

 const { primitives } = require('@jscad/modeling')

const { loadFontFromData, textToPaths } = require('./jscad-text-master')

const fs = require('fs')

const main = (params) => {
  const data = fs.readFileSync('newproject/Habana.ttf') // CHANGE THIS TO THE FONT FILE NAME

  const font = loadFontFromData(data)

  const paths = textToPaths({font, segments: 144}, 'JSCAD ROCKS!!')

  return paths
}

module.exports = { main }

هناك تقريبا. الآن قم بتحميل مكتبة opentype.js من هنا؛ https://github.com/opentypejs/opentype.js قم بفك ضغط المحتويات، وانسخ opentype.js/dist/opentype.js إلى newproject/jscad-text-master/src/opentype.js

منتهي!

الآن، ما عليك سوى سحب وإسقاط مجلد المشروع على موقع JSCAD.