Pixi.js: الميزة المفقودة: خط الشرطة

+1 لهذه الميزة. سيكون من الرائع أن يكون لديك.

يمكن للدالة التي تقوم بالكثير من عمليات lineTo + moveTo أن تحقق خطًا متقطعًا.

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

IMHO لا يلزم أن يكون هذا جزءًا من Pixi ، نظرًا لوجود العديد من الطرق التي يمكن تنفيذها وأي حل تختاره بالضبط قد يعتمد بشكل كبير على التطبيق الخاص بك.

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

بعد الإعلان عن الأوليات لـ pixi ، قالGoodBoyDigital أنه مدرج في قائمة المهام (هنا في تعليق: http://www.goodboydigital.com/pixi-webgl-primitives/). لذلك كنت آمل حقًا أن يصل قريبًا.

وأعتقد أيضًا أنه سيكون من الجيد أن تدعم pixi على الأقل عمليات الرسم المتوفرة للقماش.

أغلق هذا الآن لأنه ليس لدينا أي خطط لتنفيذ الخطوط المنقطة حتى الآن. شكرا!

لقد قابلت هذه المشكلة أيضًا ، وقمت بحلها بطريقة بسيطة.
ها هو الكود:

function drawdash(x0,y0,x1,y1,linewidth){
        var dashed = new PIXI.Graphics();
        dashed.lineStyle(1, 0x59e3e8, 1); // linewidth,color,alpha
        dashed.moveTo(0, 0);
        dashed.lineTo(linewidth,0);
        dashed.moveTo(linewidth*1.5,0);
        dashed.lineTo(linewidth*2.5,0);
        var dashedtexture = dashed.generateCanvasTexture(1,1);
        var linelength=Math.pow(Math.pow(x1-x0,2) + Math.pow(y1-y0,2) , 0.5);
        var tilingSprite = new PIXI.extras.TilingSprite(dashedtexture, linelength, linewidth);
        tilingSprite.x=x0;
        tilingSprite.y=y0;
        tilingSprite.rotation = angle(x0,y0,x1,y1)*Math.PI/180;
        tilingSprite.pivot.set(linewidth/2, linewidth/2);
        return tilingSprite;
        function angle(x0,y0,x1,y1){
                var diff_x = Math.abs(x1 - x0),
                    diff_y = Math.abs(y1 - y0);
                var cita;
               if(x1>x0){
                    if(y1>y0){
                        cita= 360*Math.atan(diff_y/diff_x)/(2*Math.PI);
                    }else
                   {
                        if(y1<y0){ 
                            cita=-360*Math.atan(diff_y/diff_x)/(2*Math.PI);
                        }else{  
                            cita=0;
                        }
                    }
                }else
                {
                    if(x1<x0){
                        if(y1>y0){
                            cita=180-360*Math.atan(diff_y/diff_x)/(2*Math.PI);
                        }else
                        {
                            if(y1<y0){ 
                                cita=180+360*Math.atan(diff_y/diff_x)/(2*Math.PI);
                            }else{  
                                cita=180;
                            }
                        } 
                    }else{ 
                        if(y1>y0){ 
                            cita=90;
                        }else
                        {
                            if(y1<y0){ 
                                cita=-90;
                            }else{  
                                cita=0;
                            }
                        }
                    }
                }
                return cita;
        }
}

usage:

var linewidth=5;
var tilingSprite = drawdash(100,100,100,400,linewidth);
app.stage.addChild(tilingSprite);
app.ticker.add(function(delta) {
    tilingSprite.tilePosition.x += 0.5*delta;
});

هل يمكن ان تساعد؟

هل هناك أي خطة لإعادة النظر في هذه الميزة؟ سيكون من الجيد الحصول على التكافؤ الوظيفي مع CanvasRenderingContext2D.

إذا كان أي شخص يبحث عن هذه الميزة ، فإليك تطبيق الخط المتقطع لرسم المضلعات.
https://codepen.io/unrealnl/pen/aYaxBW

مثال بسيط آخر للخط المتقطع:

https://codepen.io/bokos/pen/EeBXgR

PIXI.Graphics.prototype.drawDashLine = function(toX, toY, dash = 16, gap = 8) {
  const lastPosition = this.currentPath.shape.points;

  const currentPosition = {
    x: lastPosition[lastPosition.length - 2] || 0,
    y: lastPosition[lastPosition.length - 1] || 0
  };

  const absValues = {
    toX: Math.abs(toX),
    toY: Math.abs(toY)
  };

  for (
    ;
    Math.abs(currentPosition.x) < absValues.toX ||
    Math.abs(currentPosition.y) < absValues.toY;
  ) {
    currentPosition.x =
      Math.abs(currentPosition.x + dash) < absValues.toX
        ? currentPosition.x + dash
        : toX;
    currentPosition.y =
      Math.abs(currentPosition.y + dash) < absValues.toY
        ? currentPosition.y + dash
        : toY;

    this.lineTo(currentPosition.x, currentPosition.y);

    currentPosition.x =
      Math.abs(currentPosition.x + gap) < absValues.toX
        ? currentPosition.x + gap
        : toX;
    currentPosition.y =
      Math.abs(currentPosition.y + gap) < absValues.toY
        ? currentPosition.y + gap
        : toY;

    this.moveTo(currentPosition.x, currentPosition.y);
  }
};

تم قفل سلسلة الرسائل هذه تلقائيًا نظرًا لعدم وجود أي نشاط حديث بعد إغلاقه. الرجاء فتح قضية جديدة للأخطاء ذات الصلة.