|
|
@@ -0,0 +1,160 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="ar">
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8" />
|
|
|
+ <base href="../../../../" />
|
|
|
+ <script src="page.js"></script>
|
|
|
+ <link type="text/css" rel="stylesheet" href="page.css" />
|
|
|
+ </head>
|
|
|
+ <body class="rtl">
|
|
|
+ [page:Curve] → [page:CurvePath] →
|
|
|
+
|
|
|
+ <h1>[name]</h1>
|
|
|
+
|
|
|
+ <p class="desc">
|
|
|
+ تمثيل مسار ثنائي الأبعاد. توفر الفئة طرقًا لإنشاء مسارات
|
|
|
+ ومحيطات الأشكال ثنائية الأبعاد المشابهة لواجهة برمجة التطبيقات Canvas 2D.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <h2>مثال الكود</h2>
|
|
|
+
|
|
|
+ <code>
|
|
|
+ const path = new THREE.Path();
|
|
|
+
|
|
|
+ path.lineTo( 0, 0.8 );
|
|
|
+ path.quadraticCurveTo( 0, 1, 0.2, 1 );
|
|
|
+ path.lineTo( 1, 1 );
|
|
|
+
|
|
|
+ const points = path.getPoints();
|
|
|
+
|
|
|
+ const geometry = new THREE.BufferGeometry().setFromPoints( points );
|
|
|
+ const material = new THREE.LineBasicMaterial( { color: 0xffffff } );
|
|
|
+
|
|
|
+ const line = new THREE.Line( geometry, material );
|
|
|
+ scene.add( line );
|
|
|
+ </code>
|
|
|
+
|
|
|
+ <h2>المنشئ (Constructor)</h2>
|
|
|
+
|
|
|
+ <h3>[name]( [param:Array points] )</h3>
|
|
|
+ <p>
|
|
|
+ points -- (اختياري) مصفوفة من [page:Vector2 Vector2s].<br /><br />
|
|
|
+
|
|
|
+ يُنشئ مسارًا من النقاط. يُعرِّف النقطة الأولى الإزاحة، ثُم
|
|
|
+ يتم إضافة النقاط المتتالية إلى مصفوفة [page:CurvePath.curves curves] كـ
|
|
|
+ [page:LineCurve LineCurves].<br /><br />
|
|
|
+
|
|
|
+ إذا لم يتم تحديد أي نقاط، يتم إنشاء مسار فارغ ويتم تعيين
|
|
|
+ [page:.currentPoint] على المنشأ.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <h2>الخصائص (Properties)</h2>
|
|
|
+ <p>انظر فئة [page:CurvePath] الأساسية للخصائص المشتركة.</p>
|
|
|
+
|
|
|
+ <h3>[property:Vector2 currentPoint]</h3>
|
|
|
+ <p>
|
|
|
+ الإزاحة الحالية للمسار. سيبدأ أي [page:Curve] جديد يتم إضافته
|
|
|
+ هنا.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <h2>الوظائف (Methods)</h2>
|
|
|
+ <p>انظر فئة [page:CurvePath] الأساسية للأساليب المشتركة.</p>
|
|
|
+
|
|
|
+ <h3>[method:this absarc]( [param:Float x], [param:Float y], [param:Float radius], [param:Float startAngle], [param:Float endAngle], [param:Boolean clockwise] )</h3>
|
|
|
+ <p>
|
|
|
+ x، y -- مركز القوس المطلق.<br />
|
|
|
+ radius -- نصف قطر القوس.<br />
|
|
|
+ startAngle -- زاوية البدء بالراديان.<br />
|
|
|
+ endAngle -- زاوية النهاية بالراديان.<br />
|
|
|
+ clockwise -- تدوير القوس في اتجاه عقارب الساعة. يعتمد على `false`.<br /><br />
|
|
|
+
|
|
|
+ يضيف [page:EllipseCurve EllipseCurve] مُوضَعًا مطلقًا إلى
|
|
|
+ المسار.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <h3>[method:this absellipse]( [param:Float x], [param:Float y], [param:Float xRadius], [param:Float yRadius], [param:Float startAngle], [param:Float endAngle], [param:Boolean clockwise], [param:Float rotation] )</h3>
|
|
|
+ <p>
|
|
|
+ x، y -- مركز القطع الناقص المطلق.<br />
|
|
|
+ xRadius -- نصف قطر القطع الناقص في المحور x.<br />
|
|
|
+ yRadius -- نصف قطر القطع الناقص في المحور y.<br />
|
|
|
+ startAngle -- زاوية البدء بالراديان.<br />
|
|
|
+ endAngle -- زاوية النهاية بالراديان.<br />
|
|
|
+ clockwise -- تدوير القطع الناقص في اتجاه عقارب الساعة. يعتمد على false.<br />
|
|
|
+ rotation -- زاوية دوران القطع الناقص بالراديان، عكس اتجاه عقارب
|
|
|
+ من المحور X الموجب. اختياري، يعتمد على 0.<br /><br />
|
|
|
+
|
|
|
+ يضيف [page:EllipseCurve EllipseCurve] مُوضَعًا مطلقًا إلى
|
|
|
+ المسار.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <h3>[method:this arc]( [param:Float x], [param:Float y], [param:Float radius], [param:Float startAngle], [param:Float endAngle], [param:Boolean clockwise] )</h3>
|
|
|
+ <p>
|
|
|
+ x، y -- مركز القوس المُزَوَّد من آخر استدعاء.<br />
|
|
|
+ radius -- نصف قطر القوس.<br />
|
|
|
+ startAngle -- زاوية البدء بالراديان.<br />
|
|
|
+ endAngle -- زاوية النهاية بالراديان.<br />
|
|
|
+ clockwise -- تدوير القوس في اتجاه عقارب الساعة. يعتمد على `false`.<br /><br />
|
|
|
+
|
|
|
+ يضيف [page:EllipseCurve EllipseCurve] إلى المسار، مُوضَعًا نسبيًا
|
|
|
+ إلى [page:.currentPoint].
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <h3>[method:this bezierCurveTo]( [param:Float cp1X], [param:Float cp1Y], [param:Float cp2X], [param:Float cp2Y], [param:Float x], [param:Float y] )</h3>
|
|
|
+ <p>
|
|
|
+ يُنشئ منحى بيزيه من [page:.currentPoint] مع (cp1X، cp1Y)
|
|
|
+ و(cp2X، cp2Y) كنقاط تحكم ويُحدِّث [page:.currentPoint] إلى x
|
|
|
+ و y.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <h3>[method:this ellipse]( [param:Float x], [param:Float y], [param:Float xRadius], [param:Float yRadius], [param:Float startAngle], [param:Float endAngle], [param:Boolean clockwise], [param:Float rotation] )</h3>
|
|
|
+ <p>
|
|
|
+ x، y -- مركز القطع الناقص المُزَوَّد من آخر استدعاء.<br />
|
|
|
+ xRadius -- نصف قطر القطع الناقص في المحور x.<br />
|
|
|
+ yRadius -- نصف قطر القطع الناقص في المحور y.<br />
|
|
|
+ startAngle -- زاوية البدء بالراديان.<br />
|
|
|
+ endAngle -- زاوية النهاية بالراديان.<br />
|
|
|
+ clockwise -- تدوير القطع الناقص في اتجاه عقارب الساعة. يعتمد على `false`.<br />
|
|
|
+ rotation -- زاوية دوران القطع الناقص بالراديان، عكس اتجاه عقارب
|
|
|
+ من المحور X الموجب. اختياري، يعتمد على `0`.<br /><br />
|
|
|
+
|
|
|
+ يضيف [page:EllipseCurve EllipseCurve] إلى المسار، مُوضَعًا نسبيًا
|
|
|
+ إلى [page:.currentPoint].
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <h3>[method:this lineTo]( [param:Float x], [param:Float y] )</h3>
|
|
|
+ <p>
|
|
|
+ يُربِط [page:LineCurve] من [page:.currentPoint] إلى x، y على
|
|
|
+ المسار.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <h3>[method:this moveTo]( [param:Float x], [param:Float y] )</h3>
|
|
|
+ <p>تحريك [page:.currentPoint] إلى x، y.</p>
|
|
|
+
|
|
|
+ <h3>[method:this quadraticCurveTo]( [param:Float cpX], [param:Float cpY], [param:Float x], [param:Float y] )</h3>
|
|
|
+ <p>
|
|
|
+ يُنشئ منحى رباعي من [page:.currentPoint] مع cpX و cpY كـ
|
|
|
+ نقطة تحكم ويُحدِّث [page:.currentPoint] إلى x و y.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <h3>[method:this setFromPoints]( [param:Array vector2s] )</h3>
|
|
|
+ <p>
|
|
|
+ points -- مصفوفة من [page:Vector2 Vector2s].<br /><br />
|
|
|
+
|
|
|
+ يتم إضافة النقاط إلى مصفوفة [page:CurvePath.curves curves] كـ
|
|
|
+ [page:LineCurve LineCurves].
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <h3>[method:this splineThru] ( [param:Array points] )</h3>
|
|
|
+ <p>
|
|
|
+ points - مصفوفة من [page:Vector2 Vector2s]<br /><br />
|
|
|
+
|
|
|
+ يُربِط منحى جديدًا من نوع SplineCurve على المسار.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <h2>المصدر (Source)</h2>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
|
|
|
+ </p>
|
|
|
+ </body>
|
|
|
+</html>
|
Omar Khalifa