as3 - установка альфа-значения текстур

Для «приложения для рисования» Actionscript 3 я хочу иметь возможность выбрать текстуру и установить ее прозрачность. Поэтому я стараюсь установить альфа-прозрачность текстуры. Но это не работает.

Чем я занимаюсь:

  1. Сначала я использую graphics.linestyle (), чтобы установить толщину линий и АЛЬФА-значение.
  2. После этого я (а) загружаю png, (б) читаю его bitmapData и (в) затем использую его с lineBitmapStyle.

Результат:

При рисовании линий (с помощью moveTo, lineTo и т. Д.) Линии используют текстуру, но ИГНОРИРУЮТ "Альфа", который был установлен с помощью lineStyle.

Что я делаю неправильно?

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)
Для установки / изменения альфа-канала загруженного изображения вы не используете "lineStyle", но ...

  1. Создайте НОВЫЙ объект colorTransform

  2. Затем установите атрибут alphaMultiplier на конкретный alphaChannel.

  3. А затем примените этот вновь созданный объект colorTransform к загруженным BitmapData, используя метод colorTransform загруженных BitmapData.

BUT :

This does NOT work with images that don't have an alpha-Channel or don't have their alpha-channel activated. Those images only get DARKER when lowering the alpha-Channel. In those cases you have to do this:

  1. Сначала я создаю НОВЫЙ BitmapData-Object с «новым», устанавливаю его ширину и высоту равными ширине и высоте загруженного изображения и устанавливаю для него 3-й аргумент TRUE (= прозрачность: ON). Итак, у вас есть «Контейнер» с АКТИВИРОВАННОЙ прозрачностью.
  2. Затем вы используете «copyPixels» для этого «Контейнерного» -объекта, чтобы заполнить его пикселями ЗАГРУЖЕННОГО объекта BitmapData.
  3. И сразу после этого описанный выше подход с помощью объекта «colorTransform» приносит ожидаемый результат.

So HERE'S THE WORKING CODE:

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!        
}

person Tina Testperson    schedule 29.10.2014    source источник
comment
Не могли бы вы опубликовать актуальный (соответствующий) код, который поможет нам намного лучше, имо.   -  person    schedule 29.10.2014
comment
В порядке! Выложу код (см. Выше)!   -  person Tina Testperson    schedule 29.10.2014
comment
Хорошо, думаю, проблема в следующем. Изменение альфа-значения myLoader.content не изменит свойства bitmapdata загруженного файла png. Вы просто меняете внутреннее альфа-значение вспышки объекта. Поэтому, когда вы передаете содержимое загруженного файла, он по-прежнему имеет те же растровые данные, что и раньше. Теперь у меня вопрос, почему бы просто не установить альфа-значение myDrawContainer непосредственно на нужное вам значение, например myDrawContainer.alpha = 0.6?   -  person    schedule 29.10.2014
comment
К сожалению, это не решает проблему, потому что дает вам только ОДНУ альфа-настройку для ВСЕГО чертежа. НО: при рисовании линии с нормальным цветом (с использованием lineStyle) вы можете нарисовать линию / путь с множеством РАЗЛИЧНЫХ альфа-настроек (применяя разные команды lineStyle-Commands для каждого сегмента линии непосредственно перед рисованием определенного сегмента. ). И это как раз то, что мне нужно здесь сделать. Мне нужно рисовать текстурированные линии / пути с РАЗНЫМИ альфа-настройками для РАЗНЫХ сегментов линии. Есть другие предложения?   -  person Tina Testperson    schedule 29.10.2014


Ответы (1)


А, я понимаю, это немного сложнее, чем я думал изначально.

Хорошо, смотрю документацию for lineBitmapStyle показывает, что функция ожидает следующие параметры: lineBitmapStyle(bitmap:BitmapData, matrix:Matrix = null, repeat:Boolean = true, smooth:Boolean = false)

Матрица, повтор и сглаживание здесь нам не помогут (матрица используется здесь для преобразования, то есть позиционирования, поворота и т. Д.), Но растровое изображение: BitmapData может. Что нам нужно сделать, так это манипулировать BitmapData загруженного файла PNG перед его передачей в lineBitmapStyle. К сожалению, мы не можем установить значение альфа непосредственно на BMD, поэтому мы можем попробовать 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, создав сначала Bitmap, установив там альфа-значение и вместо этого используя bitmapdata Bitmap. Нравится:

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

Хорошо, первый фрагмент сверху, похоже, подходит для этого, но значение transparent BitmapData должно быть истинным. Учитывая, что вы напрямую не создаете 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);
person Community    schedule 29.10.2014
comment
К сожалению, оба подхода не работают. Второй, похоже, не имеет НИКАКОГО эффекта. Первый делает текстуру ТЕМНЕЕ (меньшее значение альфа = более темная текстура). Есть идеи, почему. - person Tina Testperson; 29.10.2014
comment
Хм, извини, нет. Не могли бы вы отследить свойство transparent на bmd сразу после создания bmd из моего фрагмента. Это свойство только для чтения, но оно скажет нам, поддерживает ли растровые данные вообще прозрачность. - person ; 29.10.2014
comment
Кажется, мы подошли близко: когда я отслеживаю это, он возвращает FALSE. Таким образом, растровые данные, похоже, еще не поддерживают прозрачность. Но я не знаю, как активировать прозрачность. Я знаю, что могу применить прозрачность при создании объекта bitmapdata с помощью new (= ›new bitmapdata (width, height, true). Но, как вы можете видеть в моем коде, я не создаю объект bitmap-data-object с новым но путем возврата растровых данных из Bitmap (LoaderInfo (e.target) .content) .bitmapData. - ›И возвращение BitmapData ... - person Tina Testperson; 29.10.2014
comment
... имеет прозрачность ВЫКЛЮЧЕНА (возможно, изображения, которые я использую, ЕЩЕ не имеют прозрачности. Но, как я уже сказал: я хочу иметь возможность устанавливать прозрачность, даже на изображениях, у которых еще НЕТ прозрачности.) Итак, есть ли способ активировать прозрачность ?? Или я могу создать НОВОЕ (пустое) растровое изображение с новым, а затем ДОБАВИТЬ в него содержимое Bitmap (LoaderInfo (e.target) .content) .bitmapData без перезаписи активированного прозрачным объектом bitmapdata-объекта ?? - person Tina Testperson; 29.10.2014
comment
Вы можете попробовать добавить альфа-канал в png. Один из способов, который я обычно использую, - это программа Gimp, откройте изображение и нажмите layer - ›transparency -› add alpha channel. после этого сохраните файл с _4 _- ›export as и посмотрите, изменилось ли значение transparent на истинное. В противном случае я немного озадачен тем, как активировать прозрачность на загруженном растровом изображении, но я буду продолжать смотреть по сторонам. - person ; 29.10.2014
comment
Я добавил к своему ответу другой подход, попробуйте и посмотрите, решит ли это проблему. - person ; 29.10.2014
comment
Что ж, у меня есть хорошие новости и плохие новости! Плохая новость: ваш подход обычно работает, но не работает в моем конкретном случае: потому что, как я уже сказал, это приложение для рисования. Итак, ПОЛЬЗОВАТЕЛЬ этого приложения для рисования решит, какое изображение использовать. // ХОРОШИЕ НОВОСТИ: Я нашел решение: сначала я создаю НОВЫЙ BitmapData-Object с новым, устанавливаю его ширину и высоту равными ширине и высоте загруженного изображения и устанавливаю для него 3-й аргумент TRUE (= прозрачность: ON) . Итак, у меня есть Контейнер с АКТИВИРОВАННОЙ прозрачностью. = ›А затем я использую copyPixels на этом объекте-контейнере для заполнения ... - person Tina Testperson; 29.10.2014
comment
... это с пикселями ЗАГРУЖЕННОГО объекта BitmapData. = ›И сразу после этого ВАШ подход с colorTransform-Object приносит ожидаемый результат. Так что большое спасибо за то, что помогли мне. Я собираюсь дополнить свой вопрос решением и проголосовать за ваш ответ после этого !! Еще раз спасибо! - person Tina Testperson; 29.10.2014
comment
Нет проблем, я рад, что смог помочь. - person ; 29.10.2014