javafx change anchor for label - position

I need to change the anchorpoint for a label in JavaFX. I describe the anchor as the point that is picked to translate the underlying node. As default the anchorpoint seems to be the upper left edge.
I tried to solve the problem with an additional translation as described below:
double x_relocate = label.getBoundsInParent().getWidth();
label.setTranslateX(label.getTranslateX() - x_relocate);
double y_relocate = label.getBoundsInParent().getHeight();
label.setTranslateY(des.getTranslateY() + y_relocate);
The code should translate the label so that it acts like the anchorpoint would be in the lower right corner. This does not not work because at the point I do execute the code my bounding box for the label is [minX:0.0, minY:0.0, minZ:0.0, width:-1.0, height:-1.0, depth:0.0, maxX:-1.0, maxY:-1.0, maxZ:0.0].
Does anyone know a solution for this?
EDIT: Added a picture for better unterstanding

Okay, I solved the problem myself. Here is what I do:
give the labels a width and height that has enough space for the longest text
relocate the labels in every quadrant.
Set the text alignment in every quadrant
Example (width: 100, height: 15):
East to South: nothing to do here because the left upper edge is used by default
South to West
South to East: relocate the label 100 points to the right to have the upper right edge stick to the circle + set the text alignment to UPPER_RIGHT
I hope that help someone sometime.

Related

Why is there a difference between "width" and "actualBoundingBoxLeft + actualBoundingBoxRight" in a "TextMetrics" object of a HTML5 canvas?

When I call measureText as shown in the snippet, I get the following result:
{
"width": 45.43333435058594,
"actualBoundingBoxLeft": 0,
"actualBoundingBoxRight": 45.35,
"actualBoundingBoxAscent": 18,
"actualBoundingBoxDescent": 0
}
Why is there a difference between width and actualBoundingBoxRight, if actualBoundingBoxLeft is zero?
c2d = document.getElementById('canvas').getContext('2d');
c2d.direction = 'ltr';
c2d.font = '24px serif';
console.log (c2d.measureText('TeX'));
<canvas id="canvas"></canvas>
Hope I get what you are asking, I'll give it a go.
The width property gives the text's advance width. Space taken excluding left and right-side bearing.
– width attribute
The width of that inline box, in CSS pixels. (The text's advance width.)
– actualBoundingBoxLeft attribute
The distance parallel to the baseline from the alignment point given by the textAlign attribute to the left side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going left from the given alignment point.
Where it also gives the note:
The sum of this value and the next (actualBoundingBoxRight) can be wider than the width of the inline box (width), in particular with slanted fonts where characters overhang their advance width.
– actualBoundingBoxRight attribute
The distance parallel to the baseline from the alignment point given by the textAlign attribute to the right side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going right from the given alignment point.
Some examples
Take this times f with data from canvas's measuereText (normal left, italic right):
ERR: Switched places for middle and bottom width line (blue ones), but did not update the labels. "middle" is "bottom" and "bottom" is "middle" as for the labels in the picture. I'll try to get time to upload a new later.
Especially the slanted version shows this well. The blue line following the textBaseline (gray horizontal line), and starting at textAlign (gray vertical line) show the width value for the glyph. That is how much the font advances the "typehead".
Bounding box left / right are the extremes in horizontal expansion. If one look on it as an rectangle. Same goes for Ascend and Descend. They are the extremes up / down. But, as font's "overlap" (kerning etc.) it is not a factor for width which represents advanced width.
The sum of the box width is 111 + 39 = 150 but the width is only 72.28.
As for your sample, it is harder to catch with such small fonts. (Relatively speaking). Increasing the for to 1024px or what ever gives a clearer result. There is so small fractions and path calculations that one will miss subtle pixel fractions. With 1024px:
actualBoundingBoxAscent : 747
​actualBoundingBoxDescent : 14
​actualBoundingBoxLeft : -10
​actualBoundingBoxRight : 1933.5
​width : 1938.5
The difference (1933.5 + -10 = 1923.5) is still small, considering the total width, but at least present in the served object.
Another sample with +:
As one observe the glyph advances the text a lot more then what it occupies in painted pixels. One can even have cases where a glyph does not advance the text at all. They can still stand alone in a text, but it's definition applies to the previous glyph in a way ... For example dấu hỏi or hook above has zero width.
But some are still defined as advancing characters for example:
Also interesting with that sample is to see how Descent is negative, (not going down below textBaseline), and Ascent is also present. Logically when one look at it, but can be a gotcha.
Could scale up the test on the canvas, but would have to look at it closer. Way too long since I worked on cavases. This is a close view, but have not validated or checked how precise (down to pixel) the lines are.
If it is correct, it show a subtle diff where the width advances at the end of TeX using 24px font.

How to clip vega-lite text inside a rect?

In a webpage created with node/webpack, vega-lite, and vegaEmbed, I have a layer with rect marks with short annotations inside them using text marks. I'd like to clip the text to its surrounding rect but haven't figured out a way to do this and hope someone can point me in the right direction.
I realize text has a limit property in pixel units. If I could determine the pixel units of my rect marks (I don't know how to do this), using limit seems like a reasonable approach.
Also, if I knew the pixel extents of my rectangle, I can then write code to align the text within the rect which would be desirable. Currently I just use the same x as the rect, with a dx offset.
I've read about background for text which is a similar problem, but not the same.

CGPoint x on SKSpriteNode not working correctly(Half of Node out of screen)

I'm actually developing a game in Swift SpriteKit.
I set the position of a SKSpriteNode:
skPart1.position = CGPointMake(0, 100)
So the node should start at the very left window-edge.
|-------------------------|
|-------------------------|
|-------------------------|
|-------------------------|
|==========|--------------|
|==========|--------------|
|==========|--------------|
But in reality half of my SKSpriteNode is outside of the screen:
|-------------------------|
|-------------------------|
|-------------------------|
|-------------------------|
==========|--------------------|
==========|--------------------|
==========|--------------------|
I've read the same problem on stackoverflow, but the only solution provided there was, to set the scaleMode to AspectFit.
I've figured out, that it works with SKShapeNode. But why not in SKSpriteNode?
And I've alreay tried that.
How can I fix that?
SKSpriteNode has an anchorPoint property that defaults to the center of the image, which is why half of the sprite is off the left side of the screen.
You can adjust the anchorPoint so that it behaves like your SKShapeNode with the anchor in the bottom left. Try this :
skPart1.anchorPoint = CGPointMake(0,0);
I know you have accepted an answer, however this is the ideal way to handle the situation and it's why the property exists.
I think this actually depends on what you're using as your SKShapeNode. If you're using a rectangle, then the point you give it will be the lower left corner of the rectangle. But if you use a SKShapeNode circle, it'll drop the circle centered on that point you give it, and you'll see very similar behavior to the SKSpriteNode.
The SKSpriteNode is using the center of the image as the point it places your sprite at, and so when you're placing your node at (0, 100), exactly half of it is being draw to the left of the screen.
If you want your sprite to be drawn as far left as possible, but completely on the screen, you should be able to accomplish this by offsetting for one half of the sprite's width.
skPart1.position = CGPoint(x: skPart1.size.width / 2, y: 100)

Calculate distortion in equirectangular projection on a sphere

Following Quote from this source:
http://www.cambridgeincolour.com/tutorials/image-projections.htm
Equirectangular image projections map the latitude and longitude
coordinates of a spherical globe directly onto horizontal and vertical
coordinates of a grid, where this grid is roughly twice as wide as it
is tall.
I have a 13312 px width and 6656 pixel height Panorama picture. It's a equirectangular projection of a room and have a 2:1 ratio.
I use following formular to calculate the xPosition:
var xPosition = ( panorama.width / 360 ) * azimuth
Azimuth = Phi = Heading = Angle to the left or right
How do I project this now on a 1366x768px browser screen?
I think my results are wrong, because it's not on the point where it should be.. it could be because the sphere has a distortion on the left and right:
Is there any formular to calculate the position with attention to the distortion and scale it to fit on the browser screen? I looked many (MANY) sources to find a solution for this, but they always just say that equirectangular are just lat and long.. they don't consider the distortion.
Last question: To find a special solution, I tryed to put a plane on the circle and expanded the line which shows the alpha angle. I though with Phytagoras I could find the position.. but this didn't worked either.. maybe I did something wrong? Is this the way even possible or am I doing it wrong?
edit
THIS is what I'm actually looking for: http://othree.github.io/360-panorama/three-2d/
The black grid in the background. What is the name of this? For what do I have to google or look for? When you start the 2D Panorama, if you want to get the coordinations of the top right corner of the window, what do you have to do?
The whole calculation problem was about to create a Google Streetview similiar view from a 2:1 equirectangular image. We already found a solution for this with a great help from Martin Matysiak (https://github.com/marmat | Google).
It's been a while so I can't give a direct answer to what the main solution is, but I can provide a URL to an AddOn Martin wrote for adding the custom Markers that we actually were trying to make.
You can follow https://github.com/marmat/google-maps-api-addons and look for yourself. In the end it helped a lot to solve the main problem and let us continue with our main Framework for Google Business Tours.
If you follow the link in the threejs demo you included, it would take you to the source code.
particularly look at:
https://github.com/mrdoob/three.js/blob/dev/examples/webgl_panorama_equirectangular.html
and
https://github.com/mrdoob/three.js/blob/dev/src/geometries/SphereBufferGeometry.js
not sure if there is distortion though. The distortion comes from the fact that the texture is mapped to the sphere, and the sphere is rendered in 3D (openGL).

Can you right-align an SVG rectangle?

I'm using Raphael to draw rectangles. Whoo-hoo!
Is there a way to right align contents of an SVG file?
Not just text, but shapes as well?
I can do the math and get the computed x value, but I'm looking for the lazy-simple solution.
Thank you.
There isn't. Unlike normal web pages where the window is resized and the content flows into it, when a Raphael paper is resized, there is no sort of flow, so aligning is irrelevant. Instead of setting align=right, you just set the right edge to be the same position you set the width of the paper to be. If you enlarge the paper, you can scale the contents with a single operation. Once you've set the position of the right edge, you've essentially set the align position. You don't need to re-set all edge values when the paper changes size, you just scale everything with one command. Hope that helps

Resources