Image control + rounded + border

I have extended the image control to get it rounded with a
border.In this code i get rounded images but no border.
Any idea on what is missing? Or do you know any good tutorial
about masking etc...
Thanks
Phil
override protected function
updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
super.updateDisplayList(unscaledWidth, unscaledHeight);
//BORDER PART
graphics.beginFill(0x000000);
graphics.drawRoundRectComplex(2, 2, unscaledWidth-4,
unscaledHeight-4, cornerRad, cornerRad, cornerRad, cornerRad);
graphics.endFill();
//ROUND PART
roundedMask.graphics.clear();
roundedMask.graphics.beginFill(0x000000);
roundedMask.graphics.drawRoundRectComplex(2, 2,
unscaledWidth-4, unscaledHeight-4, cornerRad, cornerRad, cornerRad,
cornerRad);
roundedMask.graphics.endFill();
this.mask = roundedMask;
}

Did you tried out same by overriding paintBorder() Method??

Similar Messages

Open a disk image file and crop it to an Image control

Hi Folks,
I am trying to allow my users (in a browser) to select/open a disk file (image type) so that they can see it and then save it to the server. I can use the FileReference object just fine, and load its 'result' directly into a MX:Image control. However, before I do that I would like to crop the selected imaged to a square shape. I'd also like to resize the image down, but that will come later, once I get the cropping working.
I am essentially taking the FileReference result bytearray and converting that to a BitmapData object. Then, I 'extract' a square of data from that BitmapData object into a new BitmapData object. Then I need to get *that* BitmapData object into the mx:image control. I tried using a Bitmap to do so, however the resulting mx:image, while 'sized' correctly, displays as a blank white region. All along, the variables seem to be 'full' of data and seem to have properly set attributes. I've looked up quite a few sites that demonstrate cropping, and copying images, but they always start out with 'pre-loaded' images. I have modeled my code after theirs, where appropriate.
Here is my code:
          //this gets called when the user clicks a button to 'look for a disk file'
            private function setPhoto():void
                //create the FileReference instance
                _fileRef = new FileReference();
                _fileRef.addEventListener(Event.SELECT, onFileSelected);
                //listen for the file has been opened
                _fileRef.addEventListener(Event.COMPLETE, onFileLoaded);
                var arr:Array = [];
                arr.push(new FileFilter("Images", ".gif;*.jpeg;*.jpg;*.png"));
                _fileRef.browse(arr); //then let go and let the event handlers deal with the result...
            private function onFileSelected(evt:Event):void
                _fileRef.load(); //the result of the 'load' will be handled by the 'complete' handler
            private function onFileLoaded(evt:Event):void
                var tempLoader:Loader = new Loader();
                tempLoader.loadBytes(_fileRef.data);
                tempLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderComplete);
                //imgPhoto.source = _fileRef.data; //this would work just fine, though, it wouldn't be cropped
            private function onLoaderComplete(event:Event):void
                var loaderInfo:LoaderInfo = LoaderInfo(event.target);
                var loadBD:BitmapData = new BitmapData(loaderInfo.width,loaderInfo.height);
                //ok, now that we have the 'original' file in the bitmap data, we can crop it and then later resize it
                //so, we need a 'square' of image cropped out of the original
                //so...first we get a square of the 'full size' image
                //if the image is taller than wide, we will take a square as wide as the image, and as tall as it is wide, starting 5% down from the top
                //if the image is wider than tall, we will take a square as tall as the image, and as wide as it is tall, from the horizontal middle
                var curW:int = loadBD.width;
                var curH:int = loadBD.height;
                var cropX:int = 0;
                var cropY:int = 0;
                var cropW:int = curW;
                var cropH:int = curH;
                var needCrop:Boolean = true; //default is to crop
                var croppedBD:BitmapData;
                if (curH > curW)
                    cropY = Math.round(curH * .05); //start at 5% down
                    cropH = cropW;
                else if (curW > curH)
                    cropX = Math.round(curW/2) - Math.round(curH/2); //start at the middle, go 'back' by half the height
                    cropW = cropH;
                else
                    needCrop = false; //it's already a square! nothing to do (aside from the resize)
                if (needCrop)
                    croppedBD = new BitmapData(cropW, cropH); //at this point it is 'empty', so fill it up
                    var fillPoint:Point = new Point(0,0); //since we're gonna fill into the top, left pixel on down and over
                    var fillRect:Rectangle = new Rectangle(cropX,cropY,cropW,cropH);
                    croppedBD.copyPixels(loadBD,fillRect,fillPoint);
                else
                    croppedBD = loadBD;
                imgPhoto.source = new Bitmap(croppedBD); //this produces a properly sized, but blank-white image
And here is the mxml for the image:
<mx:Image id="imgPhoto" x="40" y="126" maxWidth="200" maxHeight="200" />
Thanks!
-David

Hi,
You were close to the solution.
In "onLoaderComplete(event:Event):void", at the begining you create a BitmapData called "loadBD", you just forgot to fill it with the content from the loaderInfo.
private function onLoaderComplete(event:Event):void {
     var loaderInfo:LoaderInfo = LoaderInfo(event.target);
     var loadBD:BitmapData = new BitmapData(loaderInfo.width,loaderInfo.height);
     loadBD.draw(loaderInfo.content);
Kind regards,
Mich

Flash movies in image-control

When I load different flash movies in the same image-control
(e.g. via a button-click), the browser-cursor starts switching from
a busy-cursor (the little round clock-cursor) to an arrow (or
hand)-cursor intermittingly, without stopping.
When I load the same movie over the existing one in the
image-control this does not happen.
Seems like I have to unload the old movie first? I don't know
how to do that.
Any suggestions are welcome.
Thanx in advance.
Rui Rosado

Hi,
Take a look at this
http://swforum.sun.com/jive/thread.jspa?forumID=123&threadID=62416
MJ

Correct "clip" for background with round border

Hi all. I'm having a problem with a round border and a round background. If you look at the code below you will see that I have a border specified with a radius of 5. If I run this, the background sticks outside of the border. If I also set the background to have a radius of 5, it still doesn't look correct as the outside of the border turns purple whereas I would expect it to be light red. If I change the background radius to 4 then the inside of the border doesn't quite match up to the background.
How do I set a border and just say the background should be "clipped" by it?
Thanks, Nick.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;
public class RoundTest extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        FlowPane flowPane = new FlowPane();
        Scene scene = new Scene(flowPane, 500, 500);
        flowPane.setStyle("-fx-padding: 10;");
        Label label = new Label("Hello");
        label.setStyle("-fx-border-color: red; -fx-border-radius: 5; -fx-background-color: blue;");
//        label.setStyle("-fx-border-color: red; -fx-border-radius: 5; -fx-background-color: blue; -fx-background-radius: 5;");
        flowPane.getChildren().add(label);
        stage.setScene(scene);
        stage.show();
    public static void main(String[] args) {
        launch(args);
}

This is actually a kind of tricky question to answer well.
The standard caspian.css stylesheet for JavaFX 2.2 makes almost no use of borders.
The standard caspian controls have things that look like borders or highlighted edges, but these are almost always implemented by layered backgrounds.
For instance a focus ring around a button is a blue background which is layered underneath the button background, making the ring look like a border, even though it's not.
I don't really know why the layered background approach was chosen over a border + background approach. Possible reasons are:
- it's easier.
- it performs better.
- it provides a better visual experience.
Maybe it is one or all of the above.
Regardless, I think there was likely some good reason why the layered background approach was chosen, so you'd probably best stick to it.
One advantage of using this approach is there are lots of similar examples in caspian.css that you can copy from and use.
A sample css style string for your sample app using layered borders, might be something like:
-fx-padding: 1; -fx-background-insets: 0, 1; -fx-background-radius: 5, 5; -fx-background-color: firebrick, forestgreen;By playing around with combinations of layered backgrounds, padding and background-insets you can achieve, borders around your controls which can be either entirely enclosed within your control's standard layout or outside of it (like the focus ring), so that when you add something like a focus ring around your control it doesn't shift the control's onscreen position - it really just surrounds the control.
An updated version of your sample app which uses this is below:
import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class RoundTest extends Application {
@Override public void start(Stage stage) throws Exception {
//    System.setProperty("prism.lcdtext", "false");
    StackPane stackPane = new StackPane();
    Scene scene = new Scene(stackPane, 500, 500, true);
    stackPane.setStyle(
        "-fx-background-color: cornsilk;"
      + " -fx-border-insets: 10;"
      + " -fx-border-color: rgba(128, 128, 128, 0.5)"
    Label label = new Label("Hello");
    label.setStyle(
//        "-fx-padding: 5;"
//      + " -fx-background-insets: 0, 5;"
//      + " -fx-background-radius: 5, 5;"
        "-fx-padding: 1;"
      + " -fx-background-insets: 0, 1;"
      + " -fx-background-radius: 5, 5;"
      + " -fx-background-color: firebrick, forestgreen;"
      + " -fx-text-fill: whitesmoke;"
//    label.setScaleX(5);
//    label.setScaleY(5);
    stackPane.getChildren().add(new Group(label));
    stage.setScene(scene);
    scene.setCamera(new PerspectiveCamera());
    stage.show();
public static void main(String[] args) { launch(args); }
}Now for some other questions you raise:
If I run this, the background sticks outside of the borderYeah the background radius and border radius properties are independent, so if you use a rounded border, you also need to use a rounded background or the background will overflow the border corners.
If I also set the background to have a radius of 5, it still doesn't look correct as the outside of the border turns purple whereas I would expect it to be light redJavaFX 2.2 uses anti-aliasing in pretty much all of it's rendering (and even another trick for lcd called sub-pixel rendering of text in some cases). Your border is only one pixel wide. If the border isn't sitting exactly on a pixel boundary, it's going to be blended with the background. Even if the straight sides of the border sit exactly on the pixel boundary, when the border turns the corners, the anti-aliasing algorithms will kick in blending the border corner and the background around the inside edge of the corner.
You chose a green background and a red border. When you mix those two colors, you get purple (which is what is happening).
I don't know of anyway to enable or disable anti-aliased rendering for JavaFX scene graph objects (perhaps something to do that might come along for the ride with the 3D scene graph support in Java 8).
Regardless, you probably want anti-aliasing engaged for your rendering anyway. So you should develop your app knowing that anti-aliasing will happen. To do this, choose colors which blend well when anti-aliased. Caspian does this by deriving a lot of the outer background colors from the inner background colors (i.e. just lightening or darkening the border). This works well because they have the same base rgb component mixture, just in different portions, so the anti-aliasing mixes them seamlessly. Choosing full colors at opposite ends of the rgb spectrum such as red and blue result in jarring mixtures like purple. Even if the anti-aliasing wasn't involved, your eyes can play tricks on you and have difficulty clearly seeing the border between these kind of colors due to the weird optics of the eyes.
Another strategy to alleviate nasty blending is to use more pixels, e.g. instead of a one pixel border, use a two pixel border - the anti-aliasing blending will be far less noticeable. Using the greater pixel strategy works very well in conjunction with newer higher resolution screens (so called retina displays), where the pixels themselves are so small that the human eye is unable to distinguish the pixels and the way they blend.
All that said - your original example with the rounded borders and background doesn't look too bad to me :-)
One other issue I came across when testing this is that there is a -fx-border-style css attribute which can have values of centered, inside and outside, and when I tried to set it I got messages like:
WARNING: com.sun.javafx.css.parser.CSSParser declaration CSS Error parsing in-line style '-fx-padding: 1; -fx-background-insets: 0, 1; -fx-background-radius: 5, 5; -fx-background-color: firebrick, forestgreen; -fx-border-style: inside; -fx-text-fill: whitesmoke;' from javafx.scene.Node$22@1bd5d8ab: Unsupported <border-style> 'inside' while parsing '-fx-border-style' at [1,138]
The css reference guide notes that the border functionality copies from the w3c backgrounds and border functionality, but there is no inside, outside, centered border style in the w3c css reference, so I guess there is some error in the JavaFX 2 css documentation there around what is supported and what is implemented from the w3c css reference. Note that I'm not really advocating that the JavaFX css processing should match the w3c css reference as I find the w3c system complicated and difficult to understand.
http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#region
http://www.w3.org/TR/css3-background/#border-style
Perhaps as borders in css don't seem to be used much in JavaFX, the documentation issue isn't such a big one.

How to use an Event Structure responding to an image control that belongs to a parent VI.

Hi
I am loading a subpanel vi by pressing a button located in the user interface of the main vi which also contains an image display. Subpanel vi opens up on the side and doesn't hide the image display of the main vi. Subpanel vi contains an event structure that needs to respond to user clicking on the image display of main vi.
Since the bug that occured while creating an image reference control isn't fixed, I am passing the main vi pane reference onto the subpanel vi. From that point I've tried to edit event structure and have it respond to the image control/pane that belongs to main vi but I don't know how.
Any help would be appreciated.
Thanks

Post a screenshot of your subVI code where you register the events.
André
Regards,
André
Using whatever version of LV the customer requires. (LV5.1-LV2012) (www.carya.nl)

How to use radioButton(s) and image controls on windows phone 8.1

how to use radioButton(s) and image controls on windows phone 8.1

Hi aspirantme,
>>how to use radioButton(s) and image controls on windows phone 8.1
Which version of your app is? Runtime or Silverlight?
For Runtime version, please see the following articles:
#RadioButton class
https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.radiobutton(v=win.10).aspx
#How to add radio buttons (XAML)
https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh868200.aspx
#Image class
https://msdn.microsoft.com/library/windows/apps/br242752.aspx
For Silverlight version, please refer to the following documents and guidelines:
#RadioButton Class
https://msdn.microsoft.com/en-us/library/windows/apps/system.windows.controls.radiobutton(v=vs.105).aspx
#RadioButton control design guidelines for Windows Phone
https://msdn.microsoft.com/en-us/library/windows/apps/hh202881(v=vs.105).aspx
#Image Class
https://msdn.microsoft.com/en-us/library/windows/apps/system.windows.controls.image(v=vs.105).aspx
#Quickstart: Images for Windows Phone
https://msdn.microsoft.com/en-us/library/windows/apps/jj206957(v=vs.105).aspx
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click
HERE to participate the survey.

How to add an image to an IMAGE control in Java WebDynpro

hi
How to add an image to an IMAGE control in Java WebDynpro.
Please give me the steps to assign an image to an IMAGE control.
Advanced Thanks
brahma

Thank You Mathan MP,
i tried these steps, but whenever i selected the source property of image UI control, it opens a context window, but this context window does't contain any thing for selection.
so how to solve this problem ?
the link whatever u provided is not opened, please send the correct link.
http://127.0.0.1:1284/help/index.jsp?topic=/com.sap.devmanual.doc.user/f3/1a61a9dc7f2e4199458e964e76b4ba/content.htm
Thanks in Advance
brahma

Image not displayed correctly in image control at small zoom level

I am displaying an image in an image control with a zoom factor of ~0.015 and it appears as shown in image 1.jpg. When I zoom in a little more to ~0.016 the image is displayed correctly as shown in image 2.jpg. Both images are attached.
Why is the image displayed as a "grey strip" in the first image? What do I need to do to have the image displayed correctly at any zoom factor? I am using LV 2011 with the associated vision development module on Windows 7.
Thanks,
Jonathan-LV
Solved!
Go to Solution.
Attachments:
Image 1.jpg ‏133 KB
Image 2.jpg ‏152 KB

Hi Jonathan,
Did you try resizing your image dimensions, as I suggested in my previous post? Anti-aliasing is an expected behavior; as you zoom out, the image has to be resampled in order to be displayed properly. At some point, LabVIEW assumes that the image has been resampled to the point where it no longer resembles the initial image, and so it greys the image out. In the case of your image, that is not the case. As I said, I believe an acceptable workaround would be to use IMAQ resample to half or quarter the pixel dimensions of your image, at which point it should be able to be displayed at a higher zoom factor.
Best,
Dan N
Applications Engineer
National Instruments

How to make a round border around my picture?

I am trying to design a logo that would fit into the center of a Frisbie, yet I cannot figure out how to make a round border around the picture. I have tried using the eliptical tool, and have also tried using the cookie cutter. The only option I can get to work with the eliptical tool, is the feather, yet I can't change the pixel number for some reason, so it just makes a thin circle around the picture. I thought I could cut and paste it, but the copy and cut options were grayed out and didn't work. When I used the cookie cutter, it made a nice border, and I pasted the picture into it, but, there are four sections that need to be filled in with the background color and the paintbucket didn't work in those spaces (they are the gray and white checked areas. (the picture ends up looking like a rectangle inside of a circle). So I made a new blank file and filled it in with the color of the picture's background, hoping to use the cookie cutter tool around the picture that was now pasted into the new blank file (I chose another color for the round border) and I used the cookie cutter around the picture, but when it was finished, the whole picture ended up being white. All I want to do is to make a border around a picture (a round border). Nothing I have done has worked though. What am I doing wrong, or what are some other options for trying to do this? Thanks.

Here is a simple way to add a border. Select the item, add a blank layer, choose the border size and color and the Outside option:
Here is the result:
Note that you don't even need to do the Stroke on a blank layer. You can Stroke directly on the picture layer. However having the blank layer preserves the picture in case you want to start again with different Stroke options.
If this is not what you are looking to do, please clarify.

Image Control in ADF

Hi,
I am using the Jdev 11g.
is there any component which will take array of images path and rotate it.
my problem is -- I have n number of images and i want to show it in rotating fashion.
please tell how will i do it using the ADF component.
Thnaks
Kiran

Hi shay,
Thanks for the reply.
I have tried out the carousel component but it dose not meet some my application requirement.
Can you please tell some different way to implement the requirement using only image control?
Thanks,
Kiran.

Some images not loaded in flex Image Control.

Hi,
Can anybody help me. I am loading friends album image in flex Image control. Its strange that some image do not load even the path is fine and I can open in browser. I think there is time out issue.
Thanks in advance.

Hi premkant81,
Try to register the following event Listeners and try to trace out the problem...
I hope you are using either Loader or URLLoader to load the images...Try to register the below eventListeners for the Loader..and check
HTTPStatusEvent.HTTP_STATUS
SecurityErrorEvent.SECURITY_ERROR
IOErrorEvent.IO_ERROR
What is the size of the Image files you are loading...???
Thanks,
Bhasker Chari

Labview 2012 image control freezes in executable

Hi there,
I've put some Image controls on the front panel. On the development system, the background is grey and the ROI tools responsive.
The executable howeve, has black backgrounds and the image control is not responsive any more.
LV 2012, Windows 7, 64 Bit. It does not matter if the file is compiled on a server or locally.
Sometimes the compiler fails because of "file permission errors". If not, the problem still persists.
What do I do wrong ?
Best regards,
Ted
Attachments:
PanelTest.zip ‏13 KB

Hi there,
I forgot to tell that it's not possible to load any images into the control.
Regards,
Ted

Vision Builder 7.0(IMAQ) : Using fxs in subVIs with references to image control

When using IMAQ fxs (such as 'Write File') in subVIs, if one wanted to use references to an image control, what property or method would be used to feed into the image terminal in the imaq fx on the subVI? Is this possible?
What did work: I was able to directly use the image control on the main feeding an image control on the subvi panel (which is then fed directly to imaq fx)
What did not work: From a refnum control for the image on the main, I used (within the subVI) the value property fed to a 'Variant to Data' with type as image control, then feeding the output of this into imaq fx.

Typically you would update an Image Display control from a subVI using the Value property nodes. However, this method does not currently work with LabVIEW 7 and Vision 7, but the issue will be resolved in the next release of LabVIEW and Vision.
In the meantime, in addition to the solution you found you could also use a global variable to pass images from one VI to another. Using a global variable works, but not in the same way as a reference or property node would. With a reference or property node, you can pass a reference of the control to a subVI and have the subVI update the control's image. Using global variables, the subVI will update the global variable with the new images, but you need a loop monitoring the global variable in your top level VI.
I hope this
helps! Best wishes.
Regards,
Dawna P.
Applications Engineer
National Instruments

Image control source attribute

I would like to protect my source files such as images from being downloaded or directly referenced by a URL by somebody other than my program. I thought may be an easy way to do that would be if I set the source to outside my webfolders. But my understanding is that in an Image control, the value of the property source has to be under my web root folder. Is there a way I can set the source to outside of my web folder and still have my flex app render the image od does some one have a different way of achieving the same objective. Thanks, Ramesh

Hi there
You can embed your image on the application.
On FlexBuilder project, add a new source directory with your images... and in your source code some like this:
<mx:Script>
<![CDATA[
[Embed(source="image/yourImage.png")]
[Bindable]
public var myImage : Class;
]]>
</mx:Script>
<mx:Image source="{myImage}"/>
Regards

Image control runtime creation issue

I am having problems getting the Image control to actually
display the image I specify in the source property. The Image
control is created in actionscript at runtime based on XML returned
by an HTTPService request. I have a canvas that I want to populate
with Label, Text, Image, LinkButton, etc. controls based on the
contents of the XML file that is read in, so I have to create all
the components on the fly and use something like this:
var newImage:Image = new Image();
newImage.setStyle("source", "images/myImageFile.jpg");
myCanvas.addChild(newImage);
After I get all the newly created components added as
children to the canvas I go back through and do positioning
(something like this):
for each (var child:DisplayObject in myCanvas.getChildren())
//set the y property of each component to the y of the
previous child plus
//the height of the previous child plus 10 px margin
Wherever there is an image in my XML it inserts the 10px
margin for that component, so I know it's creating it and that it
gets added as a child, but for some reason the image is not
displaying and so the height of the component is 0. I even tried
hardcoding the height of each Image control in case the image was
there but it just wasn't sizing right, but it puts in the space
without displaying the image.
What I'm wondering is if there is some method that will force
the Image controls to either load the image or render it. When I
add an Image in mxml and use the exact same source data it displays
just fine, so the file path is correct. I also have the same images
being read in from XML off the HTTPService that are showing up just
fine in a TileList where my itemRenderer component has an image
with the source set to the same path as I'm trying to use in the
runtime-generated Image controls.
Also, as a side question, does anyone know why a lot of the
properties/methods available from mxml specified comonents aren't
available when you create variables of the same type in
actionscript? For example, if I have
<mx:Image id"img"/>
I can go back in actionscript and reference img.source just
fine. On the other hand, if I declare an Image in actionscript,
thus:
private var asImg:Image = new Image();
and then try to refer to the source property like so:
asImg.source
it doesn't show up in the code hinting and it also throws an
error on compile (reference to a possibly undefined property source
for bla bla bla)
Actually, I've noticed that a lot of the properties and
methods of various components aren't available when they are
actionscript rather than mxml. I didn't see much in the
documentation on the difference or what could be done to work
around it.
Thanks much anyone who has input.

Ok, got it.
I figured that since the <mx:Image> renders just fine
and that the ActionScript Image object doesn't that I'd just create
a custom mxml component with Image as the base element and with
nothing else in it. Then I add an instance of my custom image
component in AS whenever the XML specifies one. The layout was a
bit of an issue, but I just added the image dimensions as
attributes in my XML and size the CustomImage component based on
those.
Must be some subtle difference between the mxml and AS Image
classes that isn't documented very well.

Image control + rounded + border

Similar Messages

Maybe you are looking for