apache-flex - Flex 着色器效果：将一个对象渲染到另一个对象

Question

我想做出这样的效果：可拖动的半透明对象（我们称之为“塑料条”）在带有任意对象的窗口上。塑料条应该是混浊的，即它会模糊它下面的内容（而不是本身模糊）。在 Flex 上使用 PixelBender 着色器的最佳方法是什么？

Answer 1

实际上，它变得很简单。要更新塑料条，我将窗口内容绘制到位图中，然后将其提供给着色器以绘制条（blurred此处称为）：

private function onBlurredUpdate():void {
    matrix.identity();
    matrix.translate(-blurred.x, -blurred.y);
    clipRect.width = blurred.width;
    clipRect.height = blurred.height;

    body.removeChild(blurred);
    bitmapData.draw(body, matrix, null, null, clipRect);
    body.addChild(blurred);

    shader.data.src.input = bitmapData;

    var graphics:Graphics = blurred.graphics;
    graphics.clear();
    graphics.lineStyle(2, 0xC0C0C0);
    graphics.beginShaderFill(shader);
    graphics.drawRoundRect(0, 0, blurred.width, blurred.height, 10, 10);
    graphics.endFill();
}

着色器是来自 PixelBender 示例的简单盒式过滤器。如果我在绘制之前跳过从窗口中删除条带，它会产生有趣的反馈效果 - 模糊的像素继续像墨水一样模糊。