I'm currently working with JavaFX' Text and TextFlow layout, and I need to figure out how to center the Text node inside a TextFlow.
As you see in the picture below, I've added some ImageView's, to simulate emoticons which I want to add.
The problem is, that they are aligned differently. While the emoticons are centered, the text stays at the bottom.
The green border line represents the TextFlow's border, the blue border line the Text's one.
I've already tried out to set the Text's textOrigin property to CENTER, but it doesn't change anything in my case. Setting textAlignment to CENTER won't work either.
Here's my code excerpt:
public CChatMessage(String senderName, String messageText)
{
this.sender = new Label(senderName);
this.sender.setTextAlignment(TextAlignment.CENTER);
this.sender.setFont(Font.font("Verdana", FontWeight.EXTRA_BOLD, 14));
this.message = new Text(messageText);
this.message.setTextAlignment(TextAlignment.CENTER);
this.message.setTextOrigin(VPos.CENTER);
this.setEffect(new DropShadow());
this.setAlignment(Pos.CENTER);
this.setPadding(new Insets(0, 10, 10, 10));
TextFlow messagePane = new TextFlow();
messagePane.setStyle("-fx-border-color: green");
messagePane.setTextAlignment(TextAlignment.CENTER);
Image smileyImage = new Image("/resources/smiley.png");
messagePane.getChildren().addAll(this.message, new ImageView(smileyImage), new ImageView(smileyImage), new ImageView(smileyImage),
new ImageView(smileyImage), new ImageView(smileyImage), new ImageView(smileyImage));
if(!senderName.equals(""))
{
CChatMessage.setMargin(messagePane, new Insets(10, 0, 0, 0));
this.message.setFont(Font.font("Calibri", FontWeight.SEMI_BOLD, 18));
this.getChildren().addAll(this.sender, messagePane);
}
else
{
this.setPadding(new Insets(5, 5, 5, 5));
message.setFont(Font.font("Verdana", FontWeight.EXTRA_BOLD, 11));
this.getChildren().add(messagePane);
}
}
Edit: I think this is the answer you're looking for: https://bugs.openjdk.java.net/browse/JDK-8098128
Edit 2:
It appears the solution I've given below has a problem. The words in the Text node don't stay within the HBox. So far, I haven't figured out how to fix that. But it does stay inside when the Text nodes are inside a TextFlow container.
A solution to the problem has been given there. I don't fully understand it but I hope you do.
I'll just leave my original answer since it contains the way I'm dealing with the issue.
This solution might work. After failing to center the Text node like that, I've come to this workaround: Rather than using the TextFlow, I've used an HBox. It gets the job done for me. The behaviour is similar enough and I'm able to align the Text nodes whichever way I want.
But a word of caution, I'm just a newbie. So there may be issues that would pop up if you used this method. I don't know about the properties of TextFlow and HBox enough to confidently answer. But I just thought I'd tell you my solution since that's what I'm using for my project now. (Edit: As you can read above at Edit 2, I ran into one problem. There might be more.) :)
Happy coding.
Related
I'm trying to create an overlay in ArcGIS that has moving graphics/symbols which are updated by coordinates received from roving devices. I'm able to display a simple symbol initially but cannot get it to move on the map. My test code is
GraphicsOverlay machineOverlay = new GraphicsOverlay();
MainMapView.GraphicsOverlays.Add(machineOverlay);
MapPointBuilder rdLocation = new MapPointBuilder(150.864119200149, -32.3478640837185, SpatialReferences.Wgs84);
SimpleMarkerSymbol sRD1234 = new SimpleMarkerSymbol()
{
Color = System.Drawing.Color.Red,
Size = 10,
Style = SimpleMarkerSymbolStyle.Circle
};
Graphic graphicWithSymbol = new Graphic(rdLocation.ToGeometry(), sRD1234);
machineOverlay.Graphics.Add(graphicWithSymbol);
// here the red circle is displayed correctly on the map
rdLocation.SetXY(150.887115, -32.357600);
rdLocation.ReplaceGeometry(rdLocation.ToGeometry());
// here I expect the red circle to move but it doesn't
Do I need to trigger an event to "re-render" or refresh the overlay, or what do I need to do to get the graphic to move on my map?
There was a similar question here and the answer was "just update the geometry" which is what I'm attempting to do, but with no success.
If there is an entirely different or better approach to moving markers on a map please suggest, I'm just getting started in the ArcGIS runtime.
Thanks
After a lot of searching I replaced one line of code and its now working
//rdLocation.ReplaceGeometry(rdLocation.ToGeometry());
graphicWithSymbol.Geometry = rdLocation.ToGeometry();
It seems I misunderstood the function of ReplaceGeometry(). Any clarification on this would be helpful.
I tried to rewrite text with the backgroud color, but the edge (outline) of the old text remains on the screen. I have no idea why. Can you please help me?
background(-1);
noLoop();
fill(#500F0F);
text("99", 300, 200);
fill(-1);
text("99",300, 200);
Outcome:
In the future, please try to post a MCVE. The code in your post draws the text completely off the screen, which makes me wonder what else is different in your real code. Are you using a draw() function? Please avoid these uncertainties by posting a MCVE.
Anyway, your basic problem is caused by anti-aliasing. By default, Processing uses anti-aliasing to make drawings appear more smooth and less pixelated. You can see this if you zoom in to a drawing and notice the edges are a bit blurry. This is a good thing for most drawings, but in your case it's causing the blurry edges to show through.
So, to fix that problem, you could disable anti-aliasing by calling the noSmooth() function:
size(500, 500);
noSmooth();
background(255);
noLoop();
fill(#500F0F);
text("99", 300, 200);
fill(255);
text("99",300, 200);
Also notice that I'm using 255 as a paramter instead of -1. I'm not sure what a color parameter of -1 is supposed to do, so I'd keep it between 0 and 255 just to be safe.
But it's a little fishy that you need to "delete" any text in the first place. Like George's comment says, why don't you just call the background() function to clear out old frames?
Here's a small example:
void draw() {
background(64);
if (mousePressed) {
text("hello", 20, 40);
}
}
I'm trying to set a different divIcon for each point on a leaflet geoJson layer. I have tried everything under the sun but it just doesn't work for me. This is what I'm doing
geoJsonLayer = L.geoJson(null, {
pointToLayer: function(feature, latlng) {
var smallIcon = L.DivIcon.extend({
options: {
iconSize: [27, 27],
html: "<div>" + feature.properties.FEATURE_STYLE.SVG_ELEMENT + "</div>"
}
});
return L.marker(latlng, {icon: new smallIcon()});
},
style: getLayerStyle,
onEachFeature: setFeatureProperties,
});
geoJsonLayer.addTo(baseMap);
feature.properties.FEATURE_STYLE.SVG_ELEMENT is an html <svg> containing the icon.
The icons are displayed ok, but every feature display the same icon.
I've also tried doing the following:
using L.Icon with different .png in iconUrl for each feature
using L.circleMarker with different colors for each feature
They both works as expected (different color / icon per feature). But I can't seem to get the divIcon to display differently for each feature.
Anyone have idea why this is the case?
Thanks in advance.
UPDATE:
This is what feature.properties.FEATURE_STYLE.SVG_ELEMENT looks like
Your code to instantiate a new L.divIcon is more complicated than really necessary, but it works, not considering the SVG part:
https://jsfiddle.net/3v7hd2vx/236/
That being said, please note that:
style option is used for vector layers. Therefore in the case of Point features that are rendered as L.divIcon's, it is not used.
onEachFeature option is applied after the pointToLayer one, because the latter is needed to create the layer that is fed to onEachFeature. Therefore if you build the feature.properties.FEATURE_STYLE.SVG_ELEMENT in there (as the name of your function setFeatureProperties suggests), it is too late.
If you need further help, you would very probably need to share more code, e.g. the style and onEachFeature options, and some sample data, in particular with feature.properties.FEATURE_STYLE.SVG_ELEMENT.
I'm having issues getting images to show on the tab bar.
I have a project in MonoTouch that uses a UITabBarController as the host of the app. For each tab item I have a UINavigationController.
In ViewDidLoad of my UITabBarController class:
ViewControllers = new UIViewControllers[]
{
myNavController1,
myNavController2,
myNavController3
};
ViewControllers[0].TabBarItem =
new UITabBarItem (UITabBarSystemItem.Search, 1);
ViewControllers[1].TabBarItem =
new UITabBarItem ("Foo", UIImage.FromFile ("Resources/foo.png"), 2);
ViewControllers[2].TabBarItem =
new UITabBarItem ("Foo", UIImage.FromFile ("Resources/foo.png"), 3);
The first tab bar item works fine, it says Search and you see the system image for search. However, the other two only show the title and not the image. What do I need to do to get the image to correctly load?
Thanks.
Seems I found the answer surprisingly fast after posting this... >_<
I was loading the image from the Resources folder originally, this seems to be the issue. Having created a new folder called Images I then added a PNG file to this folder and tried loading the UIImage image from there, everything works.
The build action is still "BundleResource" and it does not copy to the output dir (exactly the same property settings as the image in Resources folder).
So simply moving the image to a new folder and calling:
ViewControllers[1].TabBarItem =
new UITabBarItem ("Foo", UIImage.FromFile ("Images/foo.png"), 2);
Hope this helps someone, though most likely you'll just figure it out yourself haha
I had the same problem.
Images must be monochrome and you should have three versions in different sizes.
30x30 = image.png 60x60 = image#2x.png 90x90 = image#3x.png
Hi I am totally confused with CGAffineTransform animations. All I want to do is move a sprite from a position on the right to a position on the left. When it has stopped I want to "reset" it i.e. move it back to where it started. If the app exits (with multitasking) I want to reset the position again on start and repeat the animation.
This is what I am using to make the animation..
[UIImageView animateWithDuration:1.5
delay:0.0
options:(UIViewAnimationOptionAllowUserInteraction |
UIViewAnimationOptionCurveLinear
)
animations:^(void){
ufo.transform = CGAffineTransformTranslate(ufo.transform, -270, 100);
}
completion:^(BOOL finished){
if(finished){
NSLog(#"ufo finished");
[self ufoAnimationDidStop];
}
}];
As I understand it the CGAffineTransforms just visually makes the sprite look like it's moved but doesn't actually move it. Therefore when I try and "reset" the position using
ufo.center = CGPointMake(355, 70);
it doesn't do anything.
I do have something working, if I call
ufo.transform = CGAffineTransformTranslate(ufo.transform, 270, -100);
it resets. The problem is if I exit the app half way through the animation then when it restarts it doesn't necessarily start from the beginning and it doesn't go the the right place, it basically goes crazy!
Is there a way to just remove any transforms applied to it? I'm considering just using a timer but this seems silly when this method should work. I;ve been struggling with this for some time so any help would be much appreciated.
Thanks
Applying a transform to a view doesn't actually change the center or the bounds of the view; it just changes the way the view is shown on the screen. You want to set your transform back to CGAffineTransformIdentity to ensure that it looks like "normal." You can set it to that before you start your animation and set it to what you want it to animate to.