文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >如何使用PIXI.js绘制透明路径？

问如何使用PIXI.js绘制透明路径？
EN

Stack Overflow用户
提问于 2016-05-25 14:00:17
回答 2查看 8.6K关注 0票数 2

我已经开始使用PIXI.js，并尝试移植这个基本的actionscript 3片段：

代码语言：javascript
运行
复制
import flash.display.Sprite;
import flash.events.Event;

var trails:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,true,0x00000000);//create a transparent bitmap to draw the trails into
var trailsFade:ColorTransform = new ColorTransform(1,1,1,0.25,0,0,0,1);//color transform: keep rgb the same(1,1,1), set alpha to 0.025 out of 1.0
var background:Bitmap = addChild(new Bitmap(trails,PixelSnapping.AUTO,true)) as Bitmap;//add the trails pixels/bitmap data into a Bitmap/display object at the bottom of the display list

var dot:Sprite = addChild(new Sprite()) as Sprite;
dot.graphics.lineStyle(3);
dot.graphics.drawCircle(-4, -4, 8);

addEventListener(Event.ENTER_FRAME,update);
function update(e:Event):void{
    dot.x = mouseX;
    dot.y = mouseY;
    //draw trails of the dot
    trails.draw(dot,dot.transform.concatenatedMatrix,trailsFade);//draw the dot into the bitmap data using the dot's transformation (x,y, rotation, scale)
}

它所做的是画一个圆圈，并将它的快照放到一个BitmapData对象中，并且有一个应用于一个小alpha/透明度值的ColorMatrix过滤器。

我注意到PIXI.js有很多相似之处，并且有一个可用的ColorMatrixFilter，但是我不知道BitmapData.draw()在PIXI.js中的等效值是什么。我发现的最接近的是RenderTexture演示

基于此，我尝试移植上面的as3代码：

​

代码语言：javascript
运行
复制
var renderer = PIXI.autoDetectRenderer(640, 480);
	document.body.appendChild(renderer.view);

	var stage = new PIXI.Container();
	
	var dot = new PIXI.Graphics();
	dot.beginFill(0xFF9900);
	dot.drawCircle(-8,-8,16);
	dot.endFill();
	stage.addChild(dot);

	var renderTexture = new PIXI.RenderTexture(renderer, renderer.width, renderer.height);
	var renderTexture2 = new PIXI.RenderTexture(renderer, renderer.width, renderer.height);
	var currentTexture = renderTexture;

	var outputSprite = new PIXI.Sprite(currentTexture);
	stage.addChild(outputSprite);


	animate();

	function animate() {
		var a = Date.now() * 0.001;
		dot.x = renderer.width * 0.5 + (Math.cos(a) * 200);
		dot.y = renderer.height * 0.5 + (Math.sin(a) * 200);

		// swap the buffers ...
	    var temp = renderTexture;
	    renderTexture = renderTexture2;
	    renderTexture2 = temp;

	    renderTexture2.render(stage, null, false);

	    renderer.render(stage);
	    requestAnimationFrame( animate );
	}
代码语言：javascript
运行
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js"></script>

​

如果您运行代码片段，您将注意到圆圈留下的痕迹，这是很好的。然而，我想控制这些路径的透明度。如何才能做到这一点？

使用PIXI.js绘制透明路径的最佳方法是什么？

(此外，我在控制台中得到这个警告：

代码语言：javascript
运行
复制
[.CommandBufferContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: Source

绘制的目标纹理是相同的。

如何补救?)

更新

为了说明，下面是使用p5.js的相同想法

​

代码语言：javascript
运行
复制
function setup() {
  createCanvas(400,300);
  noStroke();
}

function draw() {
  //transparent rectangle
  fill(0,10);
  rect(0,0,width,height);
  //shape that will leave trails because buffer isn't cleared completely
  fill(255);
  ellipse(mouseX,mouseY,30,30);
}
代码语言：javascript
运行
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js"></script>

​

我以为我可以用ColorMatrixFilter实现这一点，但我找不到详尽的文档(因为它的参数与as3 ColorMatrixFilter不同)。我将尝试一个GLSL着色器作为一个CustomFilter下一步。使用PIXI.js的等效值是什么？理想情况下，什么东西将是有效的和规模很好(允许对数千个物体的简单跟踪)？

javascript
pixi.js
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-05-27 23:05:53

查看您的p5示例，您可以使用一个Graphics对象在PIXI中实现相同的结果。不确定这对成千上万个对象的效果有多好，但我无法想象p5 one的性能会更好，因为它做的是同样的事情。

​

代码语言：javascript
运行
复制
var renderer = PIXI.autoDetectRenderer(640, 480);
document.body.appendChild(renderer.view);

var stage = new PIXI.Container();
	
var graphics = new PIXI.Graphics();
stage.addChild(graphics);

animate();

function animate() {
	var a = Date.now() * 0.001;

	var x = renderer.width * 0.5 + (Math.cos(a) * 200);
   	var y = renderer.height * 0.5 + (Math.sin(a) * 200);

        //Draw a circle
	graphics.beginFill(0xFF9900);
	graphics.drawCircle(x-8, y-8, 16);
	graphics.endFill();

        //Draw background
	graphics.beginFill(0, 0.1);
	graphics.drawRect(0, 0, renderer.width, renderer.height);
	graphics.endFill();

  	renderer.render(stage);
	requestAnimationFrame( animate );
}
代码语言：javascript
运行
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js"></script>

​

另一种方法是使用RenderTextures将其与示例结合起来。对于1000个对象，这可能运行得更快。

​

代码语言：javascript
运行
复制
var renderer = PIXI.autoDetectRenderer(640, 480);
document.body.appendChild(renderer.view);

var stage = new PIXI.Container();

var renderTexture = new PIXI.RenderTexture(renderer, renderer.width, renderer.height);
var renderTexture2 = new PIXI.RenderTexture(renderer, renderer.width, renderer.height);
var outputSprite = new PIXI.Sprite(renderTexture);
stage.addChild(outputSprite);

var dot = new PIXI.Graphics();
dot.beginFill(0xFF9900);
dot.drawCircle(-8,-8,16);
dot.endFill();
dot.cacheAsBitmap = true;
stage.addChild(dot);

var bg = new PIXI.Graphics();
bg.beginFill(0, 0.1);
bg.drawRect(0, 0, renderer.width, renderer.height);
bg.endFill();
bg.cacheAsBitmap = true;
stage.addChild(bg);

animate();
function animate() {
    requestAnimationFrame( animate );

    var a = Date.now() * 0.001;
    dot.x = renderer.width * 0.5 + (Math.cos(a) * 200);
    dot.y = renderer.height * 0.5 + (Math.sin(a) * 200);

    // swap the buffers ...
    var temp = renderTexture;
    renderTexture = renderTexture2;
    renderTexture2 = temp;
    outputSprite.texture = renderTexture;

    renderTexture2.render(stage, null, false);
    renderer.render(stage);
}
代码语言：javascript
运行
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js"></script>

​

票数 3
EN

Stack Overflow用户

发布于 2016-05-25 15:28:20

PIXI.Graphics对象具有"alpha“属性。你的圆点可以通过添加

代码语言：javascript
运行
复制
dot.alpha = 0.25; // this is the value in the as3 script you shared

下面是它的样子：

​

代码语言：javascript
运行
复制
var renderer = PIXI.autoDetectRenderer(640, 480);
	document.body.appendChild(renderer.view);

	var stage = new PIXI.Container();
	
	var dot = new PIXI.Graphics();
	dot.beginFill(0xFF9900);
	dot.drawCircle(-8,-8,16);
	dot.endFill();
	stage.addChild(dot);

	var renderTexture = new PIXI.RenderTexture(renderer, renderer.width, renderer.height);
	var renderTexture2 = new PIXI.RenderTexture(renderer, renderer.width, renderer.height);
	var currentTexture = renderTexture;

	var outputSprite = new PIXI.Sprite(currentTexture);
	stage.addChild(outputSprite);


	animate();

	function animate() {
		var a = Date.now() * 0.001;
		dot.x = renderer.width * 0.5 + (Math.cos(a) * 200);
		dot.y = renderer.height * 0.5 + (Math.sin(a) * 200);
		dot.alpha = 0.25;
		// swap the buffers ...
	    var temp = renderTexture;
	    renderTexture = renderTexture2;
	    renderTexture2 = temp;

	    renderTexture2.render(stage, null, false);

	    renderer.render(stage);
	    requestAnimationFrame( animate );
	}
代码语言：javascript
运行
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js"></script>

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/37439468

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档