I have created a image cropping tool in flex using core copyPixel method.
croppedBitmapData.copyPixels(croppedBitmapData, clipCan, new Point(0, 0));
I have to crope area of dementions 20*20 and show this cropped area in an image of demention 250*350.
Every thing going well.
My problem is image distortion.
Even i am using this method for smoothing image contents on complete.
private function smoothImage(event:Event):void
{
var bitmap: Bitmap = ((event.target as Image).content as Bitmap);
if (bitmap != null)
{
bitmap.smoothing = true;
}
}
I want to get the result of this site. http://www.yourplayingcards.com/builder/
Please help me to get ride of image distortion.
Can we show bitmapdata of 20*20 into image of 250*350 without distotion?
What you call 'distortion' is probably what I think you mean by pixelation. The reason why that website can zoom in without pixelation is because it's using vector shapes, not bitmaps, to show the graphics. Vector shapes can be scale infinitely without loss of quality because it doesn't store pixel information, but spline information.
In essence, if you want to imitate the zooming of the the website you have shown, you will have to create your own vector shape. You can use Flex 4's built in FXG format or use something like Degrafa if you're still in Flex 3. You can also leverage Flash Catalyst to import vector graphics made in Illustration into Flex.
I am not sure about that but it is done in VectorMagic may be they are using server side too any ways, you may also interested in Actionscript SVG renderer
Hopes that helps
Related
I have created a react app Which is very similar to office whiteboard. I would like to generate a thumbnail or card preview of each whiteboard and wondering how to go about it.
My initial thought was to just create a card component and render the shapes to that the same way I do for the real whiteboard. However, the points for each shape will be outside the stage and I can't think of how I can scale it down.
Any ideas?
Take a look at the official canvas thumbnail demo from Konva.
You can use a similar approach with react-konva.
Create a special component for the preview.
I think this approach will work better and probably more performant (depending on your app). You just need to create another Stage and draw all objects into it. It will be better if you can draw simplified versions of the shape, because the drawing is much smaller, so not all details are visible.
You will have to calculate your own scale ratio.
Use image preview
Instead of making a full components tree for the whiteboard, you can just export the main stage into an image and show it. You have to do reexport from time to time.
Here's the issue at hand. I need to be able to pick a background (an image showing an object, let's say, a starship model). I want to be able to apply various previously prepared textures to various areas on it, as some kind of a "colour your own object" app, but without the need to prepare dozens of individual segments.
Ok, so this is one, newbie way to do it. We have those images:
Two kind of different versions, an original photo and a quickly Photoshopped one. Let's say we only want the Borg-ish green deflector and warp nacelle from the second picture, without the odd pink hull. You have to have a mask, basicly an image of an equal resolution (or at least the same aspect ratio, which you can reliably scale to image's resolution), with the area filled with color (or whatever else), and transparent area everywhere else. As the mask, I've used a few strokes of brush on an empty layer, set to overlay mode, and then saved as PNG, with transparency. And this is how the code went:
First, import images.
QPixmap background("orig.png"); //import base image
//import alt version/texture/whatever you want, anything will work with a good mask
QPixmap element("alt.png");
QPixmap mask("deflector.png"); //mask. Just nacelles and deflector.
Then, isolate the area that interests us from alt version
QPainter painter(&element);
painter.setCompositionMode(QPainter::CompositionMode_DestinationIn);
painter.drawPixmap(0, 0, mask.width(), mask.height(), mask);
And finally draw it onto the target object.
QPainter inter(&background);
inter.drawPixmap(0, 0, element);
ui->label->setPixmap(background);
The result:
This method respects any and all transparency you could've done in Photoshop or another image editing software.
Simple, but an effective solution, for when your app has to work with graphics prepared by someone else, elsewhere.
I have a flex application and am trying to show some animated vector shapes on a google map. To do this I load an external SWF (the content is dynamic, so I have to load at runtime and SWF was the only loadable format supporting animation AFAIK) and place it on the map using an overlay.
I then need to control the alpha of the SWF. Setting it is straightforward, but for some reason the alpha appears to be applied to the sub-shapes inside the SWF, and only after that is the image composited onto the map. This makes the yellow blob that is on top of the green blob appear yellow-green rather than just yellow.
I need to somehow tell flex/flash to "render/flatten the SWF, then apply the alpha", rather than "apply the alpha to the individual sub-shapes, then flatten to the map". Ideally without going via e.g. a BitmapData object or similar.
The containment hierarchy is Map -> BlobManager -> Loader -> Loader.content (the SWF) and I've tried applying the alpha to the BlobManager, Loader, and Loader.content separately, but no difference. I've tried cacheAsBitmap on the lower layers and then applying alpha higher up to no avail.
Any suggestions for what to try next? Thanks!
Try BlendMode.LAYER, it saved many lives.
I don't think you can do that without drawing the loaded content on a Bitmap and using that to display with alpha.
It is quite easy though, although you might run into security violations if the loaded content is from another domain and won't let you create bitmapData from it.
// content is the loaded external swf, or the Loader itself?
var bitmapData:BitmapData = new BitmapData(content.width, content.height);
bitmapData.draw(content);
var bitmap:Bitmap = new Bitmap(bitmapData);
bitmap.alpha = .5;
addChild(bitmap);
It may not even be necessary to display the loaded content (although I haven't tried that) and you can also take only part of it to use as bitmapData using a Matrix.
EDIT: for animation, another option is to load an animated gif as described here: http://www.bytearray.org/?p=95 (I have no experience with it so I can't say if it'd really work for you), or use video.
I'm scaling my application to fit the browser window. I'm also defining my own cursor using a bitmap and CursorManager.setCursor.
The problem: when my app scales, the cursor bitmap is jagged. Is there a way to smooth the bitmap that is use?
I believe your problem is that you're scaling your root display object(e.g., stage), which means the cursor also gets scaled. You probably want to scale a child container instead, which means the cursor won't scale. I'm guessing you don't want the cursor to change sizes anyway.
Otherwise, you can look at using an svg file (or a swf image) since they're based on vectors and scale properly. You can also look at trying to smooth the bitmap using the bitmapData draw function. (http://livedocs.adobe.com/flex/3/langref/flash/display/BitmapData.html#draw())
I have a Flex component with a background image. The image is sharp in the beginning, but is jagged whenever I scale the component using scaleX and scaleY. How would I make the image anti-alias so that, it it's scaled to 0.75, the lines are smooth, not jaggedy?
Here is the image
Here is the scaled version
And the unscaled (good) one
If you load the image with an Image component, you can cast the content property of the component to a Bitmap and then set smoothing to true. Unfortunately, the image component doesn't provide this functionality out of the box. However, it's rather easy to hack in.
Here is a tutorial to show you how to create such a component:
http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=4001
However, if this is set using the backgroundImage style of a component, you just might be out of luck unless you override updateDisplayList and perform the drawing of the bitmap yourself by using Graphics.beginBitmapFill (which does provide smoothing support).
Why smoothing of images doesn't have better support (such as different interpolation methods) in Flex (and subsequently, Flash) boggles my mind. At least pixel bender filters will help a bit by letting us implement such filters ourselves.
If the dimensions of your Bitmap are both either n^2 or n^8, then the Flash player will automatically use a technique called mip-mapping that will dramatically improve the look (and performance) of scaled bitmap images.