Pixi JS填充行为与SVG填充行为
Pixi JS填充行为与SVG填充行为
提问于 2021-04-27 10:23:33
我想知道是否有一种方法可以让Pixi.JS的Graphics API以与填充SVG路径相同的方式填充。我猜可能没有一种快速的方法来做到这一点。
基本上，在SVG中，当带有填充的路径交叉时，正空间将自动填充，而在Pixi.JS Graphics API中，如果路径交叉，它似乎会尝试填充最大的外部空间。
所以你可以看到代码，这是我的SVG：
<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" style="background-color:#5BBA6F">
<path style="fill: #E74C3C; stroke:black; stroke-width:3" d="M 200 200 L 700 200 L 600 400 L 500 100 z" />
</svg>下面是Pixi.js的实现：
import * as PIXI from "https://cdn.skypack.dev/pixi.js";
const app = new PIXI.Application({
width: 800,
height: 600,
backgroundColor: 0x5bba6f
});
app.start();
document.getElementById("root").appendChild(app.view)
const lineData = {
color: 0xe74c3c,
start: [200, 200],
lines: [
[700, 200],
[600, 400],
[500, 100],
]
};
const { start, lines, color } = lineData;
const g = new PIXI.Graphics();
if (g) {
g.clear();
g.lineStyle({width:3})
g.beginFill(color);
g.moveTo(start[0], start[1]);
lines.map((l) => g.lineTo(l[0], l[1]));
g.closePath();
g.endFill();
app.stage.addChild(g);
}谢谢你看一看。
Stack Overflow用户
发布于 2021-04-28 17:37:32
Here's our answer (it was right there in the Pixi.js issues)。
要获得此行为，您需要更改"PIXI.graphicsUtils.buildPoly.triangulate“函数并引入另一个名为"Tess2”的库。
import Tess2 from 'https://cdn.skypack.dev/tess2';
function triangulate(graphicsData, graphicsGeometry)
{
let points = graphicsData.points;
const holes = graphicsData.holes;
const verts = graphicsGeometry.points;
const indices = graphicsGeometry.indices;
if (points.length >= 6)
{
const holeArray = [];
// Comming soon
for (let i = 0; i < holes.length; i++)
{
const hole = holes[i];
holeArray.push(points.length / 2);
points = points.concat(hole.points);
}
console.log(points)
// Tesselate
const res = Tess2.tesselate({
contours: [points],
windingRule: Tess2.WINDING_ODD ,
elementType: Tess2.POLYGONS,
polySize: 3,
vertexSize: 2
});
if (!res.elements.length)
{
return;
}
const vrt = res.vertices;
const elm = res.elements;
const vertPos = verts.length / 2;
for (var i = 0; i < res.elements.length; i++ )
{
indices.push(res.elements[i] + vertPos);
}
for(let i = 0; i < vrt.length; i++) {
verts.push(vrt[i]);
}
}
}然后扩展Pixi.js图形类，如下所示：
class TessGraphics extends PIXI.Graphics {
render(r) {
PIXI.graphicsUtils.buildPoly.triangulate = triangulate;
super.render(r);
}
}我已经更新了代码，以包含损坏的版本和修复的版本。
这可不是一件非常容易的事情。但是，嘿，我很兴奋，它正在进行！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67276163
复制相关文章
相似问题
腾讯云开发者
