我开始玩PIXI.js并试图移植这个基本的动作脚本3片段：
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可用，但我无法弄清楚在PIXI中BitmapData.draw（）的等价物。 JS。我找到的最接近的是RenderTexture demo
基于此我尝试移植上面的as3代码：
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 );
}<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js"></script>
如果你运行代码片段，你会发现圆圈留下了痕迹，这很好。但是，我想控制这些小径的透明度。怎么能实现这一目标呢？
使用PIXI.js绘制透明轨迹的最佳方法是什么？
（另外，我在控制台中收到此警告：
[.CommandBufferContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: Source
并且绘图的目标纹理是相同的。
如何解决这个问题？）
更新
要说明，这里使用p5.js：
的想法相同
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);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js"></script>
我认为我可以使用ColorMatrixFilter实现这一点，但我找不到详尽的文档（因为它的参数与as3 ColorMatrixFilter不同）。接下来我将尝试使用GLSL着色器作为CustomFilter。 什么是使用PIXI.js的等价物？理想情况下，某些东西效率高，可以很好地扩展（允许容易跟踪数千个对象）？
答案 0 :(得分：1)
PIXI.Graphics对象具有“alpha”属性。通过添加
，您的点可以是透明的dot.alpha = 0.25; // this is the value in the as3 script you shared
以下是它的样子：
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 );
}<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js"></script>
答案 1 :(得分：1)
查看您的p5示例，您可以使用单个Graphics对象与PIXI实现相同的结果。不知道这对于成千上万的物体有多好，但我不会想象p5能够做得更好，因为它做同样的事情。
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 );
}<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js"></script>
另一种方法是使用RenderTextures将其与示例相结合。使用1000个对象可以更快地运行。
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);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js"></script>