as3 - 设置纹理 alpha 值

Question

对于 Actionscript 3“绘图应用程序”，我希望能够选择纹理并设置其透明度。 因此，我尝试设置纹理的 alpha 透明度。 但它不起作用。

我的工作：

1. 首先我使用 graphics.linestyle() 来设置线条粗细和 ALPHA 值。
2. 之后，我 (a) 加载一个 png，(b) 读取它的 bitmapData，(c) 然后将它与 lineBitmapStyle 一起使用。

结果：

当绘制线条（使用 moveTo、lineTo 等）时，线条使用纹理，但忽略使用 lineStyle 设置的“Alpha”。

我做错了什么？

myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, setTexture);        

setTexture(e:Event):void 
{
  e.currentTarget.removeEventListener(e.type, arguments.callee);

  //Try 1: Trying to set the Alpha-Trasparency with "lineStyle"-Command:
  myDrawContainer.graphics.lineBitmapStyle(5, 0xFF0000, 0,6);

  //Try 2: Trying to set the Alpha-Transparency by changing the Alpha-Value of the loaded content:
  myLoader.content.alpha = 0.6;

  //Getting the BitmapData of the Image:
  BitmapDataOfMyTexture = Bitmap(LoaderInfo(e.target).content).bitmapData

  //"Using" the TBitmapData as "Color/Texture" for my Drawing:
  myDrawContainer.graphics.lineBitmapStyle( BitmapDataOfMyTexture );

  //Test-Drawing:
  myDrawContainer.graphics.moveTo( 0, 0 );
  myDrawContainer.graphics.moveTo( 500, 500 ); //-> RESULT: Textured Line WITHOUT Transparency! 

}

结果：我得到一条使用纹理但没有透明度的线。

（更新）解决方案：（感谢 DodgerThud）
对于设置/更改加载图像的 Alpha 通道，您不使用“lineStyle”，但...

1. 创建一个新的颜色变换对象

2. 然后将其设置为“alphaMultiplier”-属性到特定的 alphaChannel

3. 然后通过使用加载的 BitmapData 的“colorTransform”-Method 将这个新创建的 colorTransform-Object 应用到加载的 BitmapData。

但是：

这不适用于没有 alpha 通道或没有激活 alpha 通道的图像。这些图像只有在降低 alpha 通道时才会变暗。在这些情况下，您必须这样做：

1. 首先，我使用“new”创建新的 BitmapData-Object，将其宽度和高度设置为加载图像的宽度和高度，并将第三个参数设置为 TRUE（= 透明度：ON）。所以你得到了一个“容器”，它具有激活的透明度。
2. 然后在这个“Container”-Object 上使用“copyPixels”，用 LOADED BitmapData-Object 的像素填充它。
3. 在此之后，使用“colorTransform”-Object 的上述方法带来了预期的结果。

下面是工作代码：

myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, setTexture);

setTexture(e:Event):void 
{
  e.currentTarget.removeEventListener(e.type, arguments.callee);

  //Getting the BitmapData of the Image:
  BitmapDataOfMyTexture = Bitmap(LoaderInfo(e.target).content).bitmapData

  //Create an ADDITIONAL BitmapData-Object with 3rd  
  //argument set to TRUE and with same width and height
  //as the LOADED image:
  var BMDContainerWithAlphaActivated:BitmapData;
  BMDContainerWithAlphaActivated = new BitmapData(BitmapDataOfMyTexture.width, BitmapDataOfMyTexture.height, true, 0xFFFFFF);

  //Copy the pixels of the loaded image into the newly created 
  //"BitmapData-Container with activated AlphaChannel":
  BMDContainerWithAlphaActivated.copyPixels(BitmapDataOfMyTexture, new Rectangle(0, 0, BitmapDataOfMyTexture.width, BitmapDataOfMyTexture.height), new Point(0,0))

  //Modify the Alpha-Value (of the NEW BitmapData-Object):
  var colorChanges:ColorTransform = new ColorTransform();
      colorChanges.alphaMultiplier = 0.3;
  BMDContainerWithAlphaActivated.colorTransform(new Rectangle(0, 0, BitmapDataOfMyTexture.width, BitmapDataOfMyTexture.height), colorChanges);  


  //"Using" the (NEW) BitmapData as "Color/Texture" for my Drawing:
  myDrawContainer.graphics.lineBitmapStyle( BMDContainerWithAlphaActivated );

  //Test-Drawing:
  myDrawContainer.graphics.moveTo( 0, 0 );
  myDrawContainer.graphics.moveTo( 500, 500 ); //-> RESULT: Textured Line WITH Transparency 0.3!        
}

Answer 1

啊，我明白了，这比我最初想象的要复杂一些。

好的，查看lineBitmapStyle 的documentation 表明该函数需要以下参数：lineBitmapStyle(bitmap:BitmapData, matrix:Matrix = null, repeat:Boolean = true, smooth:Boolean = false)

现在，矩阵、重复和平滑在这里对我们没有帮助（矩阵在这里用于转换，即定位、旋转等），但 bitmap:BitmapData 可能。我们需要做的是在将加载的 PNG 文件的 BitmapData 传递给lineBitmapStyle 之前对其进行操作。遗憾的是我们不能直接在 BMD 上设置 alpha 值，所以我们可以尝试colorTransform 它。

这是未经测试的代码，但我认为这是正确的方法：

..
//store the bitmapdata in a seperate local variable
var bmd:BitmapData = LoaderInfo(e.target).content;
//create a ColorTransform Object to change the values of the BMD
var cTransform:ColorTransform = new ColorTransform();
//now here I am unsure, manipulating the alpha value of the BMD
cTransform.alphaMultiplier = 0.6;
//defining the rectangle dimensions of the bmd, we want it to be over the entire texture
var rect:Rectangle = new Rectangle(0,0,bmd.width,bmd.height);
//apply the colorTransformation on the BMD
bmd.colorTransform(rect,cTransform);
...
//the now manipulated BMD gets set as lineBitmapStyle
myDrawContainer.graphics.lineBitmapStyle(bmd);

现在我想了想，也许我们可以解决在 BMD 上设置 alpha 值的方法，首先创建一个 Bitmap，在那里设置 alpha 值，然后使用 Bitmap 的 bitmapdata。像这样：

var bmd:BitmapData = LoaderInfo(e.target).content;
var bm:Bitmap = new Bitmap(bmd);
bm.alpha = 0.6;
myDrawContainer.graphics.lineBitmapStyle(bm.bitmapData);

---

好吧，上面的第一个 sn-p 似乎是这样做的方法，但是 BitmapData 的 transparent 值需要为 true。鉴于您不是自己直接创建 BitmapData 并且值为 false，我们这里的情况相当棘手。

另一种方法是创建一个额外的位图数据，允许透明度和draw() 加载图像的位图数据：

var bmdSource:BitmapData = LoaderInfo(e.target).content;
var bmd:BitmapData = new BitmapData(bmdSource.width, bmdSource.height,true,0xffffffff);
var cTransform:ColorTransform = new ColorTransform();
cTransform.alphaMultiplier = 0.6;
var rect:Rectangle = new Rectangle(0,0,bmd.width,bmd.height);
bmd.colorTransform(rect,cTransform);
//now we have a completely white bitmapdata bmd, with an alpha value of 0.6
//we draw the contents of the bmdSource onto bmd, the alpha value effect should carry over
bmd.draw(bmdSource);