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.
Related
I need create clickable component with custom shape. Appearance is set by svg file. Clickable area must be constrained by svg shape. I find great example of what I need, but it use pixel mask or circle mask. Can you help me find solution?
Most probably you will need to create a pixel mask yourself from the SVG shape.
The question is how to approach this. Qt does not offer a simple way of doing it. However, in Qt you can render the SVG offscreen into an image that you initialize with transparent pixels or a color key. You can then use this image as a mask.
If the size of your viewpoint changes frequently, you might want to do the mask rendering in a higher resolution first and then scale it down accordingly for performance. Also note that if your SVG is animated, you would have to accomodate for that.
Or you might use a different library than Qt to obtain the mask. Also, if your SVG contains only a single polygon, you might go for a point-polygon test. But I doubt it, and such a test is also not trivial when the polygon is non-convex (you typically end up with a scanline algorithm anyways).
I am loading a background image and then adding different texts/shapes on the canvas.
I am trying to implement a functionality for the user to change the orientation of the whole canvas in fabric js, from portrait to landscape and vice-versa.
I am not restricted on the exact functionality, but I don't have too many ideas on how to do it.
Changing the transform property from CSS, then changing the angle of all objects in canvas, doesn't seem good. Transform property messes up some functionalities of fabric js (selection, moving, scaling, etc...)
Any other ideas on how to do it?
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
I want to develop an image editing application in Flex 4. My initial requirement is to draw various shapes like Line, Rectablge, Triangle, Circle, Star etc in appication. I want to facilitate user to draw shapes using rubber banding like professional applications do.
All shapes would be vector and should look smooth in an size. So, can't use bitmap and scale them.
What are better methods to achieve this?
if you don't want to start from scratch with the basic shapes, there is this framework called degrafa: http://www.degrafa.org/
they have plenty of parametric shapes & curves and advanced features to organize them together.
Make shape editor with some control points. Control points are draggable sprites (circles or squares as you like). When control point is moved, editor must be updated - it may be resize or move action. On resize, draw your vector shape according to new size. The easiest way to make sprite draggable is startDrag() function - you can also set limits there (to stay in editor area or to disable negative sizes).
I have done such editors based on Sprites, added into Flex application with rawChildren.addChild, but you can try to use Canvases instead of Sprites if you wish.
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())