I have created a subclass of Shape that contains paired GraphicsPath and GraphicsStroke objects. The class has a public method for retrieving the shape as a bitmap for passage to a Pixelbender kernel - the method is as follows:
public function GetBitmap():Bitmap{
var bmpData:BitmapData = new BitmapData(this.width, this.height, true, 0x00FFFFFF);
bmpData.draw(this);
return new Bitmap(bmpData);
}
To test these, I have the following code:
var v:Vector.<Number> = new <Number>[10,10,50,10,50,50]; //defines GraphicsPath.data to be used
var wave:CustomWave = new CustomWave(v,0xff0000); //constructor for the subclass
wave.Refresh(); //clears the Shape and redraws the GraphicsPath
//adds as shape
addChild(wave);
//adds as bitmap
var bmp:Bitmap = wave.GetBitmap()
addChild(bmp);
The visual output from both:
Any idea what could be causing the difference?
It's a long story, how to work with width and height, if you don't want any problems, draw your path from (0,0) or you can modify your function:
public function GetBitmap():Bitmap {
var bounds: Rectangle = getBounds(this);
var bmpData:BitmapData = new BitmapData(bounds.width, bounds.height, true, 0);
bmpData.draw(this, new Matrix(1, 0, 0, 1, -bounds.x, -bounds.y));
return new Bitmap(bmpData);
}
It may have something to do with the registration point of the Shape you're drawing into the Bitmap. Any chance you draw stuff above or to the left of the 0,0 coordinates? Then you'd have to add some params (perhaps a transformation Matrix) to the draw call, to get the right offset and such.
Related
I'm trying to draw a video(webcam) output on a Bitmapdata, it works if the position of the video is at (0,0) but when I shift the video to (200,0), the drawn output also shifted.
The code is pretty simple
// omitted for brevity
var videoContainer:Sprite = new Sprite();
// Video is added
videoContainer.addChild(video)
// position is offsetted
videoContainer.x = 200;
videoContainer.y = 200;
this.addChild(videoContainer)
// Generate Bitmap
var bd:BitmapData = new BitmapData(video.width, video.height, false, 0x0);
bd.x = video.x;
bd.y = video.y + video.height;
this.addChild(bd);
this.addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(e:Event):void {
// start drawing
bd.lock()
bd.draw(video);
bd.unlock();
}
I've tried to reposition it with a matrix, but apparently the entire original source had changed.
Is there a way to ensure that the output remains at (0,0) even if the videoContainer were offsetted from (0,0)?
First of all, it looks like you have a type in your code:
var bd:Bitmap = new BitmapData(video.width, video.height, false, 0x0);
It should throw an error, because an instance of BitmapData couldn't be assigned to a variable with the type Bitmap. But, I guess, it's just a type.
Secondly, it looks like your bitmap is shifted, because you shift it =)
bd.x = video.x;
I would advice to remove/comment this code.
Upd:
Also, please, could you try the next method for getting a BitmapData instance of the DisplayObject with applied transform changes:
function getBitmapDataFromDisplayObject(
displayObject:DisplayObject,
transparent:Boolean = true,
fillColor:uint = 0x00000000,
smoothing:Boolean = true,
customRect:Rectangle = null):BitmapData
{
var bitmapData:BitmapData;
try
{
var tempRect:Rectangle = displayObject.getRect(displayObject);
if (customRect)
{
tempRect = customRect;
}
var matrix:Matrix = new Matrix();
matrix.tx = -tempRect.x;
matrix.ty = -tempRect.y;
//bitmapData = new BitmapData(tempRect.right, tempRect.bottom, transparent, fillColor);
bitmapData = new BitmapData(tempRect.width, tempRect.height, transparent, fillColor);
bitmapData.draw(displayObject, matrix, null, null, null, smoothing);
}catch (error:Error)
{
bitmapData = null;
}
return bitmapData
}
I need to turn a MovieClip that I have on the stage into a Bitmap. The function I have made for this halfway works; it does make a Bitmap from the MovieClip with the correct image, but it does not rotate it.
Here is the function
function makeBitmapData(mov):BitmapData
{
var bmpData:BitmapData = new BitmapData(mov.width, mov.height, true, 0);
bmpData.draw(mov);
this.addChild(new Bitmap(bmpData)); //Shows the bitmap on screen purely for example
return bmpData;
}
Here is the output
How should I rotate the bitmap or just purely copy all the pixels in that bitmap, rotated and all?
Have you checked rotate() function and fl.motion.MatrixTransformer class? Also this question looks helpful.
In the function that implements your code.
var b:Bitmap = new Bitmap ( makeBitmapData(mov) );
addChild(b);
b.rotation = mov.rotation;
One way to accomplish this, is to draw from the items parent instead, that way any transformation/filters will be reflected in the bitmap data captured. So something like this:
function makeBitmapData(mov:DisplayObject):BitmapData
{
var rect:Rectangle = mov.getBounds(mov.parent); //get the bounds of the item relative to it's parent
var bmpData:BitmapData = new BitmapData(rect.width, rect.height, false, 0xFF0000);
//you have to pass a matrix so you only draw the part of the parent that contains the child.
bmpData.draw(mov.parent, new Matrix(1,0,0,1,-rect.x,-rect.y));
addChild(new Bitmap(bmpData)); //Shows the bitmap on screen purely for example
return bmpData;
}
I'm drawing bitmaps of movieclips which I then feed into my hittest function to test for collisions. However, I'm not quite sure how i would add to the code below to take into account and draw bitmaps for movieclips which have been scaled and/or rotated. The below code obviously only works for non-transformed movieclips. I've included in comments code which i've already tried but to no success.
When adding the drawn bitmap to the stage, no matter whether the movieclip in question is transformed or not, the drawn bitmap is "cut off" and incorrectly drawn - it appears to only draw a section of it. However, this does not particularly affect the collision testing for the non-transformed movieclips, but has an adverse effect on transformed movieclips.
All of the movieclips I want to be drawn have been created through the graphics property.
//for example:
var mymc:MovieClip = new MovieClip();
var g:Graphics = mymc.graphics;
g.moveTo(0,0);
g.lineTo(17.5,0);
g.lineTo(8.75,17.5);
g.lineTo(-8.75,17.5);
g.lineTo(0,0);
main code:
for each(var mc:MovieClip in impassable) {
//var bMatrix:Matrix = new Matrix();
//bMatrix.scale(mc.scaleX, mc.scaleY);
//bMatrix.rotate(mc.rotation * (Math.PI/180));
var bData:BitmapData = new BitmapData(mc.width, mc.height, true, 0);
//bData.draw(mc, bMatrix);
bData.draw(mc);
var bitmap:Bitmap = new Bitmap(bData);
bitmap.x = mc.x;
bitmap.y = mc.y;
var HitTest:Number = newCollision(bitmap, centerX, centerY, 13.7);
Any thoughts? thanks
This function will create a BitmapData clone of a DisplayObject, taking into account its transform matrix, though it doesn't take into account bitmap filters. (Based on this answer.)
function createBitmapClone(target:DisplayObject):BitmapData {
var targetTransform:Matrix = target.transform.concatenatedMatrix;
var targetGlobalBounds:Rectangle = target.getBounds(target.stage);
var targetGlobalPos:Point = target.localToGlobal(new Point());
// Calculate difference between target origin and top left.
var targetOriginOffset:Point = new Point(targetGlobalPos.x - targetGlobalBounds.left, targetGlobalPos.y - targetGlobalBounds.top);
// Move transform matrix so that top left of target will be at (0, 0).
targetTransform.tx = targetOriginOffset.x;
targetTransform.ty = targetOriginOffset.y;
var cloneData:BitmapData = new BitmapData(targetGlobalBounds.width, targetGlobalBounds.height, true, 0x00000000);
cloneData.draw(target, targetTransform);
return cloneData;
}
When you call successive transforms on a Matrix, the ordering is very important and can really mess things up.
Luckily there is a helper method that allows you to specify translation, rotation and scaling in one go and avoid those issues - createBox
For your case, something like this:
var matrix:Matrix = new Matrix();
matrix.createBox(mc.scaleX, mc.scaleY, mc.rotation*Math.PI/180, 0, 0);
(the two zeros are for x and y translation)
I am trying to compare the bitmap 1 to bitmap 2 and if they equal to 0 I want them to do something. so for sake of seeing what it's returning I added a trace. but it seems like it's tracing out something totally different from what I expected. This is the code:
var scratch_c : Scratch_card = new Scratch_card ();
var backgr: Background = new Background ();
var mouseclick:Number;
var masking:Sprite = new Sprite()
var bmd1:BitmapData = new BitmapData(742, 165);
var bm:Bitmap = new Bitmap(bmd1);
addChild (bm);
bm.x=20;
bm.y=40;
bmd1.draw(scratch_c);
var bmd2:BitmapData = new BitmapData(742, 165);
var bm2:Bitmap = new Bitmap(bmd2);
addChild (bm2);
bm2.x=20;
bm2.y=40;
bmd2.draw(backgr);
bm2.mask = masking;
addChild(masking);
stage.addEventListener(MouseEvent.MOUSE_DOWN, Pressing);
stage.addEventListener(MouseEvent.MOUSE_MOVE, Moving);
stage.addEventListener(MouseEvent.MOUSE_UP, Lifting);
function Pressing(event:MouseEvent):void {
mouseclick = 1;
}
function Moving(event:MouseEvent):void {
if (mouseclick == 1) {
masking.graphics.beginFill(0x000000);
masking.graphics.drawEllipse(mouseX, mouseY, 70, 60);
masking.graphics.endFill();
}
}
function Lifting(event:MouseEvent):void {
trace(bmd1.compare(bmd2));
mouseclick = 0;
}
This is what it is tracing out
How can I make it compare the pixels of bmd1 and bmd2?
Why is it not returning a number?
Not a percentage but it should return a new BitMapData object that you could assign as an image.
BitMapData.compare( )
Returns Object — If the two BitmapData objects have the same dimensions (width and height), the method returns a new BitmapData object that has the difference between the two objects (see the main discussion). If the BitmapData objects are equivalent, the method returns the number 0. If the widths of the BitmapData objects are not equal, the method returns the number -3. If the heights of the BitmapData objects are not equal, the method returns the number -4.
Taken from here
Result:
Your bitmaps are not equivalent, thats why you get an object made of 2 different bitmaps.
Have you tried
if(bmd1.compare(bmd2) == bmd2){
// complete
}
However after looking at your code a little more. i think you need to test on the masking not bmd1
So something like this.
var mymask:BitmapData = new BitmapData(742, 165, true,0x000000000);
mymask.draw(masking);
if(mymask.compare(bmd2) == bmd2){
// complete
}
untested code but should put you on the right path
I wrote application that lets people paint together via internet (using Adobe cirrus). Everything works great but when for example I run my application and paint something before my friend connects, he dont see that what I have painted. So I'm looking for the method, that would let me convert my canvas into something(object) that it is possible to send by internet (I cant send whole Sprite, it's not possible to copy its graphics on the friend's application, it's null).
So let's get this clear. The main question is: How to convert graphic's of Sprite into object, that would let me convert it back to Sprite and copy its canvas.
ANSWER:
I used DisplayConverter library from "www.Flextras.com" post with his mod to convert Sprite to BitmapData and then to ByteArray and it works. I couldn't receive BitmapData on the friend's app, but It worked with ByteArray.
Sprite -> BitmapData -> ByteArray;
ByteArray -> BitmapData -> Sprite;
//TO SEND
var bitmapdata:BitmapData = DisplayConverter.spriteToBitmapData(palette);
var bytearr:ByteArray = bitmapdata.getPixels(bitmapdata.rect);
//TO RECEIVE
var bmd:BitmapData = new BitmapData(530,430);
bmd.setPixels(bmd.rect, bytearr);
mysprite.graphics.beginBitmapFill(bmd);
mysprite.graphics.drawRect(0,0,530,430);
mysprite.graphics.endFill();
Hope this will help someone
I think you want to convert your Canvas into a BitMap or BitMapData (and back). A Flex Canvas extends Sprite, so you can use a library like this one. To copy the relevant code, this will convert a Sprite to a BitMap:
public static function spriteToBitmap(sprite:Sprite, smoothing:Boolean = false):Bitmap
{
var bitmapData:BitmapData = new BitmapData(sprite.width, sprite.height, true, 0x00FFFFFF);
bitmapData.draw(sprite);
return new Bitmap(bitmapData, "auto", smoothing);
} // END FUNCTION spriteToBitmap
This will convert a Bit Map to a Sprite:
public static function bitmapToSprite(bitmap:Bitmap, smoothing:Boolean = false):Sprite
{
var sprite:Sprite = new Sprite();
sprite.addChild( new Bitmap(bitmap.bitmapData.clone(), "auto", smoothing) );
return sprite;
} // END FUNCTION bitmapToSprite
In my own development, I have a mod to this library, which allows me to get the BitMapData instead of an actual BitMap. So, this will turn a Sprite into BitMapData:
public static function spriteToBitmapData(sprite:Sprite):BitmapData
{
var bitmapData:BitmapData = new BitmapData(sprite.width, sprite.height, true, 0x00FFFFFF);
bitmapData.draw(sprite);
return bitmapData;
} // END FUNCTION spriteToBitmapData
This will take BitMapData and turn it back into a Sprite:
public static function bitmapDataToSprite(bitmapData:BitmapData, smoothing:Boolean = false):Sprite
{
var sprite:Sprite = new Sprite();
sprite.addChild( new Bitmap(bitmapData.clone(), "auto", smoothing) );
return sprite;
} // END FUNCTION bitmapToSprite
You do want to keep in mind that when converting the BitMap or BitMapData back into a Sprite you will probably not be able to cast it as a Canvas. For information on sending BitMapData to a server; look at this question.
A better approach is, instead of going directly to pixels, have the user gestures create data, then reflect that data as a drawing on your canvas. Transmit the same data to the other user and he/she will get the same drawing.