Pixi.js: अनुपलब्ध विशेषता: डैश लाइन

इस सुविधा के लिए +1। होना बहुत अच्छा होगा।

एक फ़ंक्शन जो बहुत अधिक लाइन टू + मूव टू ऑपरेशंस करता है, एक धराशायी रेखा प्राप्त कर सकता है।

आंतरिक रूप से, यह संभवतः कैनवास 2 डी में कैसे किया जाएगा। WebGL में आप भी ऐसा ही कर सकते हैं, या आप फ़्रैगमेंट शेडर में डैश लगा सकते हैं। उत्तरार्द्ध अधिक जटिल है और कुछ अनावश्यक भरण-दर की ओर भी ले जाता है, लेकिन शीर्ष बैंडविड्थ के मामले में लागत कम होती है। एक अन्य तरीका स्टिपलिंग बनाने के लिए दोहराए जाने वाले बनावट पैटर्न का उपयोग करना है।

आईएमएचओ को पिक्सी का हिस्सा बनने की आवश्यकता नहीं है, क्योंकि इसे लागू करने के कई तरीके हैं और वास्तव में आप जो समाधान चुनते हैं वह आपके आवेदन पर बहुत अधिक निर्भर हो सकता है।

मैं @mattdesl दृष्टिकोण को समझ सकता हूं और डैश लाइन को लागू करना बहुत कठिन नहीं है, उदाहरण के लिए एक सीधी रेखा। लेकिन जैसा कि मैं वक्र और स्प्लिन सहित बहुत जटिल ग्राफिक्स वाले प्रोजेक्ट पर काम कर रहा हूं, इस सुविधा को पिक्सी में शामिल करना बहुत अच्छा होगा।

पिक्सी के लिए आदिम की घोषणा के बाद @GoodBoyDigital ने कहा कि यह टूडू सूची में है (यहां एक टिप्पणी में: http://www.goodboydigital.com/pixi-webgl-primitives/)। इसलिए मुझे वास्तव में इसके जल्द आने की उम्मीद थी।

और मुझे यह भी लगता है कि पिक्सी के लिए अच्छा होगा कि वह कम से कम कैनवास के लिए उपलब्ध ड्राइंग ऑपरेशंस का समर्थन करे।

इसे अभी के लिए बंद कर रहे हैं क्योंकि हमारे पास अभी तक बिंदीदार रेखाओं को लागू करने की कोई योजना नहीं है। धन्यवाद!

मैं भी इस समस्या से मिला, और इसे सरल तरीके से हल किया।
यहाँ कोड है:

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);
  }
};

इस थ्रेड को स्वचालित रूप से लॉक कर दिया गया है क्योंकि इसे बंद करने के बाद हाल ही में कोई गतिविधि नहीं हुई है। कृपया संबंधित बग के लिए एक नया मुद्दा खोलें।