How can I implement an eraser in Flex so that when it erases on an mx:Image, it makes the area transparent?
protected function myImage_completeHandler(event:Event):void
{
// TODO Auto-generated method stub
trace("file loaded");
var tempBdData:BitmapData = new BitmapData(myImage.contentWidth,myImage.contentHeight,true);
tempBdData.draw(myImage);
(myImage.content as Bitmap).bitmapData = tempBdData;
}
]]>
</mx:Script>
<mx:Image
id="myImage"
source="http://www.google.com/images/logos/ps_logo2.png"
complete="myImage_completeHandler(event)"
mouseDown="(myImage.content as Bitmap).bitmapData.setPixel32(event.localX,event.localY,0x00000000)"/>
Maybe you can try to draw your image in a BitmapData object then use the function setPixel32 :
Example :
setPixel32 (coordX, coordY, 0x60FF0000);
where 0x60FF0000 is :
60 (alpha)
FF (red)
00 (green)
00 (blue)
From most erase functions I've seen, not that many I'll admit, it doesn't turn something transparent, ( changing alpha ) , instead it paints with the background color.
YMMV
My approach would be to add a black mask image to your Image component (via the "mask" property), which will have no effect on the image initially, and then paint white into the mask image wherever the user clicks/drags within the image. Hope that helps.
Related
I need to do something similar to QPainter::drawImage, but drawing a triangle part of the given picture (into a triangular region of my widget) instead of working with rectangles.
Any idea how I could do that, besides painfully trying to redraw every pixel?
Thanks for your insights!
If it is feasible for you to use a QPixmap instead of a QImage, you can set a bitmap mask for the QPixmap which defines which of the pixels are shown and which are transparent:
myPixmap->setMask(myTriangleMask);
painter->drawPixmap(myPixmap);
Here is another solution based on QImage:
MaskWidget::MaskWidget(QWidget* parent) : QWidget(parent) {
img = QImage("Sample.jpg"); // The image to paint
mask = QImage("Mask.png"); // An indexed 2-bit colormap image
QPainter imgPainter(&img);
imgPainter.drawImage(0, 0, mask); // Paint the mask onto the image
}
void MaskWidget::paintEvent ( QPaintEvent * event ) {
QPainter painter(this);
painter.drawImage(10, 10, img);
}
Mask.png is an image file with the same size as Sample.jpg. It contains an alpha channel to support transparency. You can create this file easily with The GIMP, for example. I added an alpha channel, changed all areas I want to have painted to transparent and all other areas to white. To reduce the size, I finally converted it to an indexed 2-bit image.
You could even create the mask image programmatically with Qt, if you need your triangle be computed based on various parameters.
I'm working on a game using PlayN, and there's a bit where I would like to take an image (which is currently in PNG format, with 8-bit alpha already) and I would like to multiply the image by an additional alpha factor, based on a value from my code.
Specifically, I have a picture of a face that currently lives in an ImageLayer, and the effect that I would like would be to have something like this:
void init() {
faceImage = assetManager().getImage("images/face.png");
graphics().rootLayer().add(faceImage);
}
void update(float deltaMilliseconds) {
// start at fully transparent, fade to fully opaque
float transparency = calcTransparency(deltaMilliseconds);
faceImage.setTransparency(transparency);
}
I expect that there's some way to do some trickiness with GroupLayers and blend modes, perhaps blending the image with a CanvasLayer painted with a solid white rectangle with transparency controlled by my code, but it's not obvious to me if that's the best way to achieve what seems like a pretty common effect.
If you just want to fade the image in from fully-transparent to fully-opaque, then just do the following:
ImageLayer faceLayer;
void init() {
Image faceImage = assetManager().getImage("images/face.png");
faceLayer = graphics().createImageLayer(faceImage);
graphics().rootLayer().add(faceLayer);
}
void update(float delta) {
float alpha = calcAlpha(delta);
faceLayer.setAlpha(alpha);
}
Where alpha ranges from 0 (fully transparent) to 1 (fully opaque).
I am searching for a way to have my spritevisualelement have round corners so that it is displayed in a circular shape.
The SpriteVisualElement contains a Video Stream from FMS to display but I do not want it to be rectangular.
Somebody got a hint for me?
<s:BorderContainer
borderColor="0x000000"
borderAlpha="50"
cornerRadius="150"
borderWeight="3"
x="161"
y="10"
>
<s:SpriteVisualElement id="vid" width="480" height="320"/>
</s:BorderContainer>
<s:SpriteVisualElement id="vid_self_preview" x="710" y="373" width="90" height="60"/>
But the Container keeps being in the background and the whole remote Video which is displayed in the "vid" (=id) is in the foreground.
How can I set the Container to be in Foreground? then just setting whole application background would do the job.
Sounds like a perfect use case for an Alpha Mask.
Try this:
import spark.core.MaskType;
private function addMask():void {
var vidMask:SpriteVisualElement = new SpriteVisualElement();
// first mask the entire thing transparent
vidMask.graphics.beginFill(0x000000, 0);
vidMask.graphics.drawRect(0,0,480,320);
vidMask.graphics.endFill();
// then draw the rounded rectangle (or whatever) that you want to show
vidMask.graphics.beginFill(0x000000, 1); //color doesn't matter
vidMask.graphics.drawRoundRect(0,0,480, 320, 200, 200); // choose
vidMask.graphics.endFill();
addElement(vidMask); //the mask has to be on the Display List
vid.mask = vidMask; // attach the mask to the sve
vid.maskType = MaskType.ALPHA; // choose alpha masking
}
And in your MXML:
<s:SpriteVisualElement id="vid" width="480" height="320" addedToStage="addMask()">
UPDATE
Actually, now that I thought about it some more, my initial answer is misleading. You really only need to have a Clipping Mask (not an Alpha one), since there is no gradation in the opacity. You can update the addMask function as follows:
private function addMask():void {
var vidMask:SpriteVisualElement = new SpriteVisualElement();
// draw the rounded rectangle (or whatever) that you want to show
vidMask.graphics.beginFill(0x000000, 1); //color doesn't matter
vidMask.graphics.drawRoundRect(0,0,480, 320, 200, 200); // the last two effect the roundness
vidMask.graphics.endFill();
addElement(vidMask); //the mask has to be on the Display List
vid.mask = vidMask; // attach the mask to the sve
vid.maskType = MaskType.CLIP; // choose clip masking
}
Unless you do end up using a graded opacity in your mask, this method would be preferable, since it should simplify the compositing the player has to carry out.
I have a question that might seem "basic" but I just cannot figure out how to do it...
I have a box and I'd like to change the borderColor. Till there, nothing special. Just a box.bordercolor = xxxxxx...
BUT, I'd like to have the top and bottom border with one color, and the left and right border with another color... And that's the part where I'm stuck.
Any tips? Suggestions?
Thanks for your help and time! ;)
Regards,
BS_C3
#Senz
Hi!
Unfortunately, I won't be able to share the code without making it "incomprehensible"...
But this is the idea... We have 2 main components: ArrowButton and Navigator.
ArrowButton is a hbox containing a label and an image (this image is the arrow tip and it changes depeding on the state of the ArrowButton).
Navigator is a hbox containing a series of ArrowButton. An ArrowButton overlaps the arrowButton on its right in order to create the pointed end of the button.
And then you just create a whole bunch of functionnalities around these components.
I hope this helps... Do not hesitate if you have some more questions =)
Regards.
I noticed you are asking about the Flex 3 SDK. Skins are a good approach. They have changed somewhat in Flex 4(for the better IMHO). If you are wanting to use the Flex Drawing API, then just extend the Box class into a custom class that would look something like this:
public class MultiColorBorderBox extends Box
{
// You could add getters/setters or constructor parameters to be able to change these values.
private var topColor:uint = 0xFF0000;
private var rightColor:uint = 0x00FF00;
private var bottomColor:uint = 0x0000FF;
private var leftColor:uint = 0xFF00FF;
private var borderWidth:Number = 20;
public function MultiColorBorderBox()
{
super();
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
// This just ensures you dont have content under your border
this.setStyle("paddingLeft", borderWidth);
this.setStyle("paddingRight", borderWidth);
this.setStyle("paddingTop", borderWidth);
this.setStyle("paddingBottom", borderWidth);
var g:Graphics = this.graphics; // This creates a new Graphics object and sets it to the MultiColorBorderBox graphics object. Since Box (superclass) descends from a Sprite object, it has a graphics object automatically.
g.clear();
g.moveTo(0,0); // Moves the position to the top left corner
g.lineStyle(borderWidth, topColor); // Sets the line style with the width and color
g.lineTo(unscaledWidth, 0); // Draws the top border from top left to top right corners
g.lineStyle(borderWidth, rightColor); // Changes the line style
g.lineTo(unscaledWidth, unscaledHeight); // Draws the line from top right to bottom right
g.lineStyle(borderWidth, bottomColor); //Changes the bottom border style
g.lineTo(0, unscaledHeight); // Draws the line from bottom right to bottom left
g.lineStyle(borderWidth, leftColor); // Changes the border color
g.lineTo(0,0); // Closes the box by drawing from bottom left to top left
}
I'm pretty sure you're going to have to create a borderSkin to accomplish this. I believe these are created in an external program, such as Flash Professional; but more info is in the docs.
I don't think that Flex makes any distinction between top/bottom borders and left/right borders. Creating a skin would certainly be the nifty-slick way to do it. A programmatic way might be to use box.graphics to draw your border by hand. I'd start by trying to override the updateDisplayList() function to draw your border...
I finally did a pretty simple thing.
I guess I wasn't detailed enough regarding the specifications.
The actual aim was to create a navigator with arrow shaped buttons.
Each button had to be highlighted when it was selected. And this http://www.freeimagehosting.net/uploads/bcd0d762d7.jpg is how the navigator looked like.
Each button is actually an HBox containing a Box (with a label) and an Image (for the arrow tip), with a horizontalGap = 0.
I didn't think about adding a glowfilter to the button. So I was trying to just change the colors of the top and bottom part of the Box...
So, the glowfilter in the button worked pretty well.
Sorry for the lack of explanations about the context >_< And thanks for your answers!!
Regards.
Is there any way to draw text in a DisplayObject or Shape using only ActionScript? The only way I can find on the web is by creating a TextField, but I can't add a TF to a DisplayObject or Shape.
Edit:
Solved thanks to viatropos.
For anyone that's interested:
DisplayObject implements IBitmapDrawable which can be passed as an argument to the draw function of a BitmapData object, which then can be drawn using graphics.beginBitmapFill.
var textfield:TextField = new TextField;
textfield.text = "text";
var bitmapdata:BitmapData = new BitmapData(theWidth, theHeight, true, 0x00000000);
bitmapdata.draw(textfield);
graphics.beginBitmapFill(bitmapdata);
graphics.drawRect(0, 0, theWidth, theHeight);
graphics.endFill();
Good question. This is beyond anything I've ever needed to do, but I think I know how to do it.
Shape extends DisplayObject, but not DisplayObjectContainer, so you can't add anything to it. But it does have the graphics property, so you can draw things into it. The best way I can think of is to take a Bitmap snapshot of the TextField, and draw that into the Shape. I know this is what Degrafa does for their RasterText (check out the source, it's really helpful).
If you changed your Shape to a Sprite instead, it's a lot easier. Sprite extends DisplayObjectContainer, so you could add your TextField there.
Hope that helps,
Lance