javascript - PixiJS用图像填充形状(PixiJS filling shape with image)

Question

I can't seem to be able to get a quality filling of the shapes i build in PixiJS.

(我似乎无法很好地填充在PixiJS中构建的形状。)

https://codepen.io/mvalentin06-the-sasster/pen/oNgvvqo

(https://codepen.io/mvalentin06-the-sasster/pen/oNgvvqo)

function setup() { //building the shapes

var mid_x = renderer.width / 2; //middle X axis
var mid_y = renderer.height / 2;//middle Y axis
var maxAngle = 2 * Math.PI / 3; //120 degrees angle
var lastAngle = 0;  //sum of prev angles
var cnt = 0;  //counting the current image

while (lastAngle < Math.PI * 2) {  //while it aint a full circle
    var g = new PIXI.Graphics();    //new shape

    g.beginTextureFill(imgs[cnt]);//fill with image

    g.lineStyle(4, 0x000000);       //line style
    g.moveTo(mid_x, mid_y);         //move everything on center
    sections.push(g);               //add to the half-circle list

    g.arc(mid_x, mid_y, radius, lastAngle, lastAngle + maxAngle, false);    //draw half-circle
    cnt += 1;
    stage.addChild(g);  //add to stage
    lastAngle += maxAngle;  //add the angle to the angle sums
}

i have 3 thirds of a circle togheder and want to give each an image to fill with but it's never a quality looking aspect.

(我有一个三分之三的圆形轮胎，想要给每个图像填充一个图像，但这从来都不是高质量的外观。)

It's either off center or bugging when the image gets too close to the circle size.

(当图像太接近圆形大小时，它要么偏离中心要么错误。)

So resizing the image itself didn't show any sign of improvement.

(因此，调整图像大小本身并没有任何改善的迹象。)

I also tried something like how masking works in the adobe suite but i couldn't even get the edge coordinates of the shapes.

(我还尝试了诸如Adobe套件中的蒙版工作原理之类的方法，但是我什至无法获得形状的边缘坐标。)

I've always got -infinity to +infinity.

(我总是从-infinity到+ infinity。)

Any ideas?

(有任何想法吗？)

Thank you in advance!

(先感谢您！)

  ask by MValentin06 translate from so

Answer 1

等待大神答复