I have a display object (not image) that I'm scaling down. It has the same jaggies and aliased edges that an image does when it's scaled. Is there a way to smooth that display object in the same way the image is smoothed?
Update
This is an interactive display object (sprite) with interactive child display objects. I can't draw it to a bitmap.
You can try forcing the display object into "3d" mode by adding a Matrix3D transform to it. The easiest way to do that is to simply give it a rotationX value:
myDisplayObject.rotationX = 0.0;
You can also try checking the "hinting" box on your shapes (sometimes this makes circles & ovals get sort of strange shaped, so it's a gamble), and you can try selecting "Cache as bitmap" from the render dropdown.
Do bicubic resampling on the sprite with Pixel Blender?
http://blog.onthewings.net/2009/08/25/bicubic-resampling-by-pixel-bender/
You can try to set the smoothed property of the bitmap object to true and than scale it:
look here
You Display object must contain a Bitmap, or is the Bitmap itself...
Have you tried setting stage.quality = stageQuality.High;?
Also if you did that and you want to set the smoothing manually you can try the Lanczos re-sampling function (I did not made it).
Warning: you don't want to use this function every frame since it's pretty performance heavy!
First you need to draw you displayObject to an Bitmap with BitmapData:
var bmd:BitmapData = new BitmapData(dispObject.width, dispObject.height, true, 0);
//Create new bitmapData with the same size as your object and with transparancy.
bmd.draw(dispObject);
//Draw you displayObject onto the empty Bitmap
var b:Bitmap = new Bitmap(bmd, true);
//Create the bitmap container and load the data, and the true turns smoothing on!
addChild(b);
//Add it to the stage and now you can use the scale and width variables like this
b.x = dispObject.x;
b.y = dispObject.y;
b.scaleX = dispObject.scaleX;
b.scaleY = dispObject.scaleY;
Related
I've got a big issue and it's almost a week trying to make it work so any help I would really appreciate - I am trying to create a simple image editor in html5, so I upload an image, load it into canvas and then paint on it -
I also want to be able to zoom in and zoom out- just that I can't figure out how should I save the canvas state - for the paint mouseevents I am using an array which saves canvas.toDataUrl, but this one will save only what it is visible in canvas, only a part of the scaled image, and not the entire one -
if anyone knows how can I un-scale the canvas together with the painting over it and save it in the stack from where I can retrieve it for other painting events, I'll appreciate a lot! Thanks
Saving state
The canvas' save() and restore() is not related to the pixels in the canvas at all. Save() only saves current pen color, fill color, transform, scale, rotation and so forth - parameter values only, not actual pixel data.
And so, the restore() will only restore these parameter values to the previous ones.
The canvas element is passive, meaning it only holds the pixels that you see on the screen. It does not keep a backup of anything so if you change its size, re-size browser window or open dialogs in the browser causing it to clear, you will need to update the canvas yourself.
This also applies when you change a parameter value such as scale. Nothing on the canvas will change setting a new value. The only thing that happens is that your next draw of what-ever will use these parameter values for the drawing (in other words: if you apply rotation nothing rotates, but the next thing you draw will be rotated).
Drawing on existing image
As you need to maintain the content it also means you need to store the image you draw on as well as what you draw.
When you draw for example lines you need to record every stroke to arrays. When the canvas needs an update (ie. zoom) you redraw the original image first at the new scale, then iterate through the arrays with lines and re-render them too.
Same for points, rectangles, circles and what have you..
Think of canvas as just a snapshot of what you have stored elsewhere (image object, arrays, objects) . Canvas is just a view-port for that data.
I would recommend to store as this:
var backgroundImage; //reference to your uploaded image
var renderStack = []; //stores all drawing objects (see below)
//example generic object to hold strokes, shapes etc.
function renderObject() {
this.type = 'stroke'; //or rectangle, or circle, or dot, ...
this.x1;
this.y1;
this.x2;
this.y2;
this.radius;
this.penWidth;
this.penColor;
this.fillColor;
this.points = [];
//... extend as you need or use separate object for each type
}
When you then draw a stroke (pseudo):
var currentRenderObject;
function mouseDown(e) {
//get a new render object for new shape/line etc.
currentRenderObject = new renderObject();
//get type from your selected tool
currentRenderObject.type = 'stroke'; //for example
//do the normal draw operations, mouse position etc.
x =..., y = ...
}
function mouseMove(e) {
//get mouse positions, draw as normal
x = ..., y = ...
//store the points to the array, here:
//we have a line or stroke, so we push the
//values to ourpoint-array in the renderObject
currentRenderObject.points.push(x);
currentRenderObject.points.push(y);
}
function mouseUp(e) {
//when paint is done, push the current renderObject
//to our render stack
renderStack.push(currentRenderObject);
}
Now you can make a redraw function:
function redraw() {
clearCanvas();
drawBackgroundImage();
for(var i = 0, ro; ro = renderStack[i]; i++) {
switch(ro.type) {
case 'stroke':
//... parse through point list
break;
case 'rectangle':
//... draw rectangle
break;
...
}
}
}
function zoom(factor) {
//set new zoom, position (scale/translate if you don't
//want to do it manually). Remember that mouse coords need
//to be recalculated as well to match the zoom factor.
redraw();
}
//when canvas is scaled for some reason, or the window
canvas.onresize = windows.onresize = redraw;
A bonus doing this here is you can use your render stack as a undo/redo stack as well...
Hope this helped to better understand how canvas works.
Without using BitmapData.draw(); is it possible to stop the display list from rendering, and perform a render when I see fit (whether that is of the entire display list or individual DisplayObjects).
If not, what is the best method to achieve this (inclusive of the option where I use BitmapData.draw() to render DisplayObjects that haven't been added to the stage)?
You can force a render after a mouse/keyboard event using e.updateAfterEvent(), but you cannot prevent the display list from redrawing to screen. Your best bet would be :
Add all your objects into one holder Sprite, which is off the stage display list.
Add a Bitmap and associated BitmapData to the stage.
Everytime you want to 'force' a render simply draw() the holder onto the BitmapData and it will be rasterized by the exact same renderer that typically operates. Just that you get more control over the rasterizing settings.
Try the following, or see this for more info:
function snapClip( clip:DisplayObject ):BitmapData
{
var bounds:Rectangle = clip.getBounds( clip );
var bitmap:BitmapData = new BitmapData( int( bounds.width + 0.5 ), int( bounds.height + 0.5 ), true, 0 );
bitmap.draw( clip, new Matrix(1,0,0,1,-bounds.x,-bounds.y) );
return bitmap;
}
I have this function:
public static function cloneDpObj(target:DisplayObject):Bitmap
{
var duplicate:Bitmap;
var tBitData:BitmapData = new BitmapData(target.width, target.height);
tBitData.draw(target);
duplicate = new Bitmap(tBitData);
return duplicate;
}
to clone target displayObject (MovieClip or Sprite) and return Bitmap Object.
It can get bitmap from the target object, but it seem don't get all the area of the image.
By give the width and height of target object, but the target object in design was applied by Glow Effect, so my question can we get the all view of bitmapdata from a displayobject?
BitmapData.draw() takes a snapshot of a given object removing all transformations and filters applied on the stage. Resulting image shows object as it is present in your movie library.
There are two basic options when drawing display objects with transformations and/or filters.
You can apply all transformations during drawing with matrix parameter for BitmapData.draw(). After drawing you can apply filters to resulting bitmap with BitmapData.applyFilter().
Just draw parent container, not the object itself.
I usually choose the latter. That's pretty straightforward. There are some disadvantages: if you choose the second method, your target has to have a display list parent and you may draw unwanted content that resides in parent container. (However, these drawbacks are easily eliminated.)
// bounds and size of parent in its own coordinate space
var rect:Rectangle = target.parent.getBounds(target.parent);
var bmp:BitmapData = new BitmapData(rect.width, rect.height, true, 0);
// offset for drawing
var matrix:Matrix = new Matrix();
matrix.translate(-rect.x, -rect.y);
// Note: we are drawing parent object, not target itself:
// this allows to save all transformations and filters of target
bmp.draw(target.parent, matrix);
You need compute the area/rectangle of your DisplayObject including the area taken by the filter applied. Luckily you can do that with with built-in functionality by using the generateFilterRect() method of the BitmapData class.
Also, for other reasons, if you need the transformation of your DisplayObject applied to the BitmapData snapshot, you can pass the source DisplayObject's .transform.concatenatedMatrix as the second parameter of BitmapData's draw() method.
Thank you very much to all of you that take valuable time answer my question. I improved that function, but I is better, but I notice that the width of result of capture is 1pixel offset, so I decided to add 1 pixel to width of the bitmapdata, I know that is not a good practice. because I have to do that now, I don't know the issue yet. Here is how our function now:
public static function cloneDpObj(target:DisplayObject, optWidth:Number = -1, optHeight:Number = -1):Bitmap
{
var duplicate:Bitmap;
if (!target.parent) {
var tempSprite:Sprite = new Sprite;
tempSprite.addChild(target);
}
var rect:Rectangle = target.parent.getBounds(target.parent);
var bmp:BitmapData = new BitmapData(rect.width + 1, rect.height, true, 0);
// offset for drawing
var matrix:Matrix = new Matrix();
matrix.translate( -rect.x, -rect.y);
// Note: we are drawing parent object, not target itself:
// this allows to save all transformations and filters of target
bmp.draw(target.parent, matrix);
duplicate = new Bitmap(bmp);
return duplicate;
}
I would actually go with Nox's first option as the easier approach, and modifying your function to do it should only take one extra line of code:
public static function cloneDpObj(target:DisplayObject):Bitmap
{
var duplicate:Bitmap;
var tBitData:BitmapData = new BitmapData(target.width, target.height);
tBitData.draw(target);
duplicate = new Bitmap(tBitData);
//add the filters
duplicate.filters = target.filters;
return duplicate;
}
i have a
dsgnArea----> a movieclip
dsgnArea is masked by dsgnAreaMask, which inturn is a movieclip
dsgnArea.mask=dsgnAreaMask;
the width,height and position of dsgnAreaMask and dsgnArea are same.
i dynamically added multiple movieclips and labels to dsgnArea;
like..
dsgnArea.addChild(movieClip1);
dsgnArea.addChild(movieClip2);
dsgnArea.addChild(label1);
dsgnArea.addChild(label2); and so on...
these movieclips (movieClip1,movieClip2,......) and labels(label1,label2,....) positions can be altered in runtime..
but as i masked the dsgnArea with dsgnAreaMask, only a portion of the added movieClips and labels are visible...
So, my problem is to grab that visible portion in dsgnArea into a bitmap,like a screenshot of that particular dsgnArea, and save it in my server.
please help me out in this problem.
Say s is the DisplayObject object you want to capture and m is the mask applied on it.
var maskRect:Rectangle = m.getRect(s);
var matrix:Matrix = new Matrix(1, 0, 0, 1, -maskRect.x, -maskRect.y);
var w:Number = Math.min(s.width, maskRect.right) - maskRect.x;
var h:Number = Math.min(s.height, maskRect.bottom) - maskRect.y;
var bd:BitmapData = new BitmapData(w, h);
bd.draw(s, matrix);
Does that work?
The BitmapData draw method is what you are looking for. You can use it's clipRect param to define what you would like to draw (the masked parts).
Quasimondo did a handy little method to do this (take a snapshot of the whole displayObject), it's available here: http://www.quasimondo.com/archives/000670.php
I don't know if it works with masked content though.
if it doesn't, the trick would be to translate the whole content by the size of the mask
var bounds:Rectangle = dsgnAreaMask.getBounds( dsgnAreaMask );
instead of using the content of the clip
var bounds:Rectangle = clip.getBounds( clip );
as far as saving file to server is concerned, the question was asked (answered?) here AS3 Save Media File to server
The title might be a little misleading. Look at my code and I will explain
public static function loadTile(tileDir:String = "empty"):void
{
if(tileDir != "empty")
{
tPoint = new Point(0,0);
tRect = new Rectangle(0,0,30,30);
//load in tile sheet image
loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT,tilesLoadInit);
loader.load(new URLRequest(tileDir));
}
}
private static function tilesLoadInit (e:Event):void {
tileImage = Bitmap(loader.content).bitmapData;
tileReady.dispatchEvent(new Event("TileReady"));
}
var tImage:BitmapData = new BitmapData(30,30);
tileNum = tileNumber;
tPoint.x = 0;
tPoint.y = 0;
tRect.x = 0;
tRect.y = 0;
tImage.copyPixels(tileImage,tRect,tPoint);
this.graphics.beginBitmapFill(tImage);
this.graphics.drawRect(0, 0,tWidth ,tHeight );
I create a empty bitMapData called tImage. I then take a predefined variable called tileImage which is a bitMapData as well and contains a picture of an image. tRect is predefined as well its width and height is 30x30. I copy a piece of the image and I put it in tImage. problem is that AS3 throws an error saying that tImage is a incorrect type
ArgumentError: Error #2015: Invalid BitmapData.
But clearly it isnt. my question is that is there something different about the data type of bitMapData and bitMapData type that the graphic object accepts ?
I am trying to do tiling with sprites. I want my tiles to be interactive, so that is why I am using the sprite object instead of using regular bitMaps to represent my tiles. You might be wondering why I wouldnt just use graphics.beginBitmapFill(tImage); and graphics.drawRect(0, 0,tWidth ,tHeight ); to pick out the tiles I want to use. Well reason being is because it turns out that drawRect() first and second parameters actually alter the location of where the actual sprite sits at.
So if I set the x and y properties of the sprite to x = 20, and y = 20. then I set my drawRect(20,20). it actually adds an extra 20 pixels to my x and y coords of my sprite. And I know the reason why, I just need to know a better way. Sorry for so much writing and thanks for your time!
It's not saying the type is wrong, it's saying the object is invalid. I expect you'd get a TypeError if the type was wrong.
You've also not stated where exactly the error is thrown, and are assuming the problem is with tImage on the 8th line. It looks more likely that the problem is with tileImage (which you've given no details about) on line 7.
This is probably because of Flash's inbuilt limit to the size of BitmapData objects. If the total number of pixels is larger than 16,777,215, Error #2015 is thrown.
You can read up on it in the docs: BitmapData, Right above "View the examples".
Here's a trick that used to work if you want to give it a shot: BitmapData workaround