Question

我正在尝试使用SVG图像制作游戏以实现可伸缩性并从程序上制作物理对象（请参阅matter.js了解相关信息）。

我遇到的问题是，如果我加载2个不同的SVG纹理然后再渲染它们，第二个就是第一个层叠在它下面。

光栅图像不会发生这种情况，只有使用WebGL才会出现画布选项。

有没有办法阻止这种情况，还是我做错了SVG？

	var renderer = PIXI.autoDetectRenderer(
		window.innerWidth, 
		window.innerHeight, 
		{
			backgroundColor : 0xffffff,
			resolution:2
		}
	);
	
	// add viewport and fix resolution doubling
	document.body.appendChild(renderer.view);
	renderer.view.style.width = "100%";
	renderer.view.style.height = "100%";
	
	var stage = new PIXI.Container();
	
	//load gear svg
	var texture = PIXI.Texture.fromImage('https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Gear_icon_svg.svg/2000px-Gear_icon_svg.svg.png');
	var gear = new PIXI.Sprite(texture);

	//position and scale
	gear.scale = {x:0.1,y:0.1};
	gear.position = {x:window.innerWidth / 2,y:window.innerHeight / 2};
	gear.anchor = {x:0.5,y:0.5};

	//load heart svg
	var texture2 = PIXI.Texture.fromImage('https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Love_Heart_SVG.svg/2000px-Love_Heart_SVG.svg.png');
	var heart = new PIXI.Sprite(texture2);

	//position and scale
	heart.scale = {x:0.1,y:0.1};
	heart.position = {x:window.innerWidth/4,y:window.innerHeight / 2};
	heart.anchor = {x:0.5,y:0.5};

	//add to stage
	stage.addChild(gear);
	stage.addChild(heart);

    // start animating
	animate();
	function animate() {
		gear.rotation += 0.05;

		// render the container
		renderer.render(stage);
		requestAnimationFrame(animate);

	}

<script src="https://github.com/pixijs/pixi.js/releases/download/v4.8.2/pixi.min.js"></script>

Answer 1

好吧，这个例子似乎运行得很好！

.context

更多信息，请访问：https://codepen.io/osublake/pen/ORJjGj

Answer 2

所以我认为您正在混淆一些概念。

SVG是一回事，而WebGL是另一回事。 SVG由浏览器呈现，您可以放大或缩小它们，而不会损失质量/分辨率或任何您想调用的名称。

但是，此特征在WebGL中是不可能的，因为WebGL光栅化图像。有点像截屏并将其放在Photoshop的一个图层中。您可以操纵该图像，但是如果不开始查看像素就无法缩放它。

这么短的答案是，您不能在WebGL中使用SVG来希望使图形“缩放”。

对于上面的示例，结果是预期的。

您正在加载2个png纹理并将其覆盖。

如何使用PixiJS渲染SVG？

2 个答案: