Question

我想使用pixi.js在多边形上渲染纹理，sprites只是为我提供了一个方形选项。我需要改变它（顶部，左侧），（顶部，右侧），（底部，左侧），（底部，右侧）以在其中渲染图像。

http://cl.ly/image/1s2Y2f331h0a/Screen%20Shot%202013-12-16%20at%203.11.02%20PM.png

我该如何解决这个问题？

类似于beginFillBitmap或其他任何方式？

Answer 1

同样在这里:)我正在调查pixi是否适合我的项目，我需要的最后一件事是在非矩形上渲染纹理。到目前为止，我发现的只有掩盖： http://www.goodboydigital.com/pixi-js-brings-canvas-and-webgl-masking/。也许这可以帮到你。

但这对我来说不够好。我还需要能够在X和Y轴上重复纹理。还有其他想法吗？或者是否有另一个具有该功能的js html5框架？

Answer 2

在Pixi v4上使用PIXI.mesh.Mesh，在Pixi v5上使用PIXI.SimpleMesh。

这是一个适用于所有渲染器的简单示例（您可以将其粘贴在“ Pixi示例”页面https://pixijs.io/examples-v4/?v=release中）：

var app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb });
document.body.appendChild(app.view);

// create 3 vertex 2D positions (x, y)
var meshv = new Float32Array(2*3);
var i = 0;
meshv[i++] = 0;   meshv[i++] = 0;
meshv[i++] = 100; meshv[i++] = 0;
meshv[i++] = 100; meshv[i++] = 100;

// create 3 vertex texture coordinate UV positions (u,v)
var meshuv = new Float32Array(2*3);
i = 0;
meshuv[i++] = 0; meshuv[i++] = 0;
meshuv[i++] = 1; meshuv[i++] = 0;
meshuv[i++] = 1; meshuv[i++] = 1;

// create 1 triangle indexes (i1, i2, i3) referencing indexes in the other two arrays
var meshi = new Uint16Array(1*3);
i = 0;
meshi[i++] = 0; meshi[i++] = 1; meshi[i++] = 2;

// create the mesh object
var mesh = new PIXI.mesh.Mesh(
  PIXI.Texture.fromImage('examples/assets/bunny.png'),
  meshv, meshuv, meshi, PIXI.DRAW_MODES.TRIANGLES
);

// attach to the stage, container...
app.stage.addChild(mesh);

您还可以将更新的Pixi v5功能用于更高级的示例，例如https://pixijs.io/examples/#/mesh/triangle-textured.js，但兼容性可能较低。

编辑：对于环绕模式（用于重复纹理），请检查http://pixijs.download/dev/docs/PIXI.BaseTexture.html环绕模式选项。

Pixi.js如何在多边形上渲染纹理

2 个答案: