如何在PixiJS和Angular中绘制横跨矩形的虚线？

下面的代码片段在其自己的PixiJS应用程序中绘制了一个填充的实心笔划矩形<代码>笔划。图形不提供绘制虚线笔划的内置方式

导入{
组成部分，
奥尼特
}从“@angular/core”开始；
从“PIXI.js”导入*作为PIXI；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
ngOnInit（）：void{
//自动检测、创建渲染器并将其附加到body元素
让渲染器=PIXI.autodetectedrenderer（400400{
背景颜色：0xffffff，
反别名：对
});
document.getElementById（'demo'）.appendChild（renderer.view）；
//为显示对象创建主舞台
let stage=new PIXI.Container（）；
//初始化pixi图形类
让graphics=new PIXI.graphics（）；
//设置填充颜色
graphics.beginll（0x22222）；//红色
图形。线条样式（2，0xff0000）；
//画圈
graphics.drawRoundedRect（24015010010010）；//drawCircle（x，y，半径）
//将填充应用于自上次调用beginFill以来的线条和形状。
graphics.endFill（）；
//将子对象附加到阶段
stage.addChild（图形）；
//渲染
渲染器。渲染（舞台）；
}
}

我建议您将任何试图操纵html的代码移动到

ngAfterViewInit

方法

此外，您还可以使用

@ViewChild

装饰器获取对html模板中任何元素的引用。这样您就不必使用

document.getElementById（'demo'）

导入{
组成部分，
AfterViewInit，
ElementRef，
}从“@angular/core”开始；
从“PIXI.js”导入*作为PIXI；
@组成部分({
选择器：'应用程序根'，
模板：“”，
样式URL:['./app.component.css']
})
导出类AppComponent实现AfterViewInit{
@ViewChild（“演示”）el:ElementRef；
ngAfterViewInit（）：void{
让渲染器=PIXI.autodetectedrenderer（400400{
背景颜色：0xffffff，
反别名：对
});
this.demo.nativeElement.appendChild（renderer.view）；
//…代码的其余部分
}
}

你试过看吗？ 这是多边形代码

PIXI.Graphics.prototype.drawDashedPolygon = function(polygons, x, y, rotation, dash, gap, offsetPercentage){
        var i;
        var p1;
        var p2;
        var dashLeft = 0;
        var gapLeft = 0;
        if(offsetPercentage>0){
            var progressOffset = (dash+gap)*offsetPercentage;
            if(progressOffset < dash) dashLeft = dash-progressOffset;
            else gapLeft = gap-(progressOffset-dash);
        }
        var rotatedPolygons = [];
        for(i = 0; i<polygons.length; i++){
            var p = {x:polygons[i].x, y:polygons[i].y};
            var cosAngle = Math.cos(rotation);
            var sinAngle = Math.sin(rotation);
            var dx = p.x;
            var dy = p.y;
            p.x = (dx*cosAngle-dy*sinAngle);
            p.y = (dx*sinAngle+dy*cosAngle);
            rotatedPolygons.push(p);
        }
        for(i = 0; i<rotatedPolygons.length; i++){
            p1 = rotatedPolygons[i];
            if(i == rotatedPolygons.length-1) p2 = rotatedPolygons[0];
            else p2 = rotatedPolygons[i+1];
            var dx = p2.x-p1.x;
            var dy = p2.y-p1.y;
            var len = Math.sqrt(dx*dx+dy*dy);
            var normal = {x:dx/len, y:dy/len};
            var progressOnLine = 0;
            this.moveTo(x+p1.x+gapLeft*normal.x, y+p1.y+gapLeft*normal.y);
            while(progressOnLine<=len){
        progressOnLine+=gapLeft;
                if(dashLeft > 0) progressOnLine += dashLeft;
                else progressOnLine+= dash;
                if(progressOnLine>len){
                    dashLeft = progressOnLine-len;
                    progressOnLine = len;
                }else{
                    dashLeft = 0;
                }
                this.lineTo(x+p1.x+progressOnLine*normal.x, y+p1.y+progressOnLine*normal.y);
                progressOnLine+= gap;
                if(progressOnLine>len && dashLeft == 0){
                    gapLeft = progressOnLine-len;
          console.log(progressOnLine, len, gap);
                }else{
                    gapLeft = 0;
                    this.moveTo(x+p1.x+progressOnLine*normal.x, y+p1.y+progressOnLine*normal.y);
                }
            }
        }
    }


// create app
var app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    antialias: true,
    backgroundColor: 0x808080
});
document.body.appendChild(app.view);


var polygons = [];
polygons.push({x:-50, y:-50});
polygons.push({x:-50, y:50});
polygons.push({x:50, y:50});
polygons.push({x:75, y:0});
polygons.push({x:50, y:-50});


var body = new PIXI.Graphics();
body.x = 200;
body.y = 100;
app.stage.addChild(body);

function animate(time) {
    body.rotation += 0.005;
    body.clear();
    body.lineStyle(1, 0x00FF00, 0.7);
    var offsetInterval = 750;
    body.drawDashedPolygon(polygons, 0, 0, 0, 10, 5, (Date.now()%offsetInterval+1)/offsetInterval);
    requestAnimationFrame(animate);
}
animate();

PIXI.Graphics.prototype.drawDashedPolygon=函数（多边形、x、y、旋转、虚线、间隙、偏移百分比）{
var i；
var-p1；
var-p2；
var-dashLeft=0；
var-gapLeft=0；
如果（抵销百分比>0）{
var progressOffset=（破折号+缺口）*抵销百分比；
如果（progressOffset<短划线）dashLeft=短划线progressOffset；
else gapLeft=间隙-（进度偏移破折号）；
}
var rotatedPolygons=[]；
对于（i=0；ilen&&dashLeft==0）{
gapLeft=progressOnLine len；
console.log（progressOnLine、len、gap）；
}否则{
间隙=0；
此.moveTo（x+p1.x+progressOnLine*normal.x，y+p1.y+progressOnLine*normal.y）；
}
}
}
}
//创建应用程序
var app=新的PIXI.Application({
宽度：window.innerWidth，
高度：window.innerHeight，
反别名：是的，
背景颜色：0x8080
});
document.body.appendChild（app.view）；
var=[]；
push（{x:-50，y:-50}）；
push（{x:-50，y:50}）；
多边形。推（{x:50，y:50}）；
push（{x:75，y:0}）；
push（{x:50，y:-50}）；
var body=new PIXI.Graphics（）；
体x=200；
主体y=100；
app.stage.addChild（body）；
函数动画（时间）{
本体旋转+=0.005；
body.clear（）；
主体线条样式（1，0x00FF00，0.7）；
var offsetInterval=750；
body.drawDashedPolygon（多边形，0,0,0,10,5，（Date.now（）%offsetInterval+1）/offsetInterval）；
请求动画帧（动画）；
}
制作动画（）；

另一个简单的解决方案是使用虚线。我也回答了

PIXI.Graphics.prototype.drawDashLine=函数（toX，toY，dash=16，gap=8）{
const lastPosition=this.currentPath.shape.points；
常数当前位置={
x:lastPosition[lastPosition.length-2]| | 0，
y:lastPosition[lastPosition.length-1]| | 0
};
常量值={
toX:Math.abs（toX），
玩具：数学。abs（玩具）
};
为了(
;
数学abs（currentPosition.x）

PIXI.Graphics.prototype.drawDashedPolygon = function(polygons, x, y, rotation, dash, gap, offsetPercentage){
        var i;
        var p1;
        var p2;
        var dashLeft = 0;
        var gapLeft = 0;
        if(offsetPercentage>0){
            var progressOffset = (dash+gap)*offsetPercentage;
            if(progressOffset < dash) dashLeft = dash-progressOffset;
            else gapLeft = gap-(progressOffset-dash);
        }
        var rotatedPolygons = [];
        for(i = 0; i<polygons.length; i++){
            var p = {x:polygons[i].x, y:polygons[i].y};
            var cosAngle = Math.cos(rotation);
            var sinAngle = Math.sin(rotation);
            var dx = p.x;
            var dy = p.y;
            p.x = (dx*cosAngle-dy*sinAngle);
            p.y = (dx*sinAngle+dy*cosAngle);
            rotatedPolygons.push(p);
        }
        for(i = 0; i<rotatedPolygons.length; i++){
            p1 = rotatedPolygons[i];
            if(i == rotatedPolygons.length-1) p2 = rotatedPolygons[0];
            else p2 = rotatedPolygons[i+1];
            var dx = p2.x-p1.x;
            var dy = p2.y-p1.y;
            var len = Math.sqrt(dx*dx+dy*dy);
            var normal = {x:dx/len, y:dy/len};
            var progressOnLine = 0;
            this.moveTo(x+p1.x+gapLeft*normal.x, y+p1.y+gapLeft*normal.y);
            while(progressOnLine<=len){
        progressOnLine+=gapLeft;
                if(dashLeft > 0) progressOnLine += dashLeft;
                else progressOnLine+= dash;
                if(progressOnLine>len){
                    dashLeft = progressOnLine-len;
                    progressOnLine = len;
                }else{
                    dashLeft = 0;
                }
                this.lineTo(x+p1.x+progressOnLine*normal.x, y+p1.y+progressOnLine*normal.y);
                progressOnLine+= gap;
                if(progressOnLine>len && dashLeft == 0){
                    gapLeft = progressOnLine-len;
          console.log(progressOnLine, len, gap);
                }else{
                    gapLeft = 0;
                    this.moveTo(x+p1.x+progressOnLine*normal.x, y+p1.y+progressOnLine*normal.y);
                }
            }
        }
    }


// create app
var app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    antialias: true,
    backgroundColor: 0x808080
});
document.body.appendChild(app.view);


var polygons = [];
polygons.push({x:-50, y:-50});
polygons.push({x:-50, y:50});
polygons.push({x:50, y:50});
polygons.push({x:75, y:0});
polygons.push({x:50, y:-50});


var body = new PIXI.Graphics();
body.x = 200;
body.y = 100;
app.stage.addChild(body);

function animate(time) {
    body.rotation += 0.005;
    body.clear();
    body.lineStyle(1, 0x00FF00, 0.7);
    var offsetInterval = 750;
    body.drawDashedPolygon(polygons, 0, 0, 0, 10, 5, (Date.now()%offsetInterval+1)/offsetInterval);
    requestAnimationFrame(animate);
}
animate();