I want to write a program, which will build automatically a chart with
SVG from some data. In the chart there are several arrows with text.
Now I am confronted with a problem: How can I know the length of the
text in advance?? How long does the arrow have to be? The complete text
must be placed above the arrow.
Does anybody have an idea?? How can I know how much place the text will
need in the SVG??
Take a look at measuring dimensions of the text element's bounding box. You could consider making an element invisible, if you want to precompute.
Related
I am trying to insert a text between two elements in pdf via javascript. I know the coordinates of both elements and I want text to be in the middle of this two coordinates.
I have tried to find width of text and find starting point of text. However, there is not useful function to find width of text.
I solves it.
I just find width of text by using pdf.getTextWidth(text) and divided by 2. Then make a minus from y middle.
I am working on an API that use shapes (and irregular) shapes to build websites. My problem is where I can provide a div that can carry as a background to irregular shapes so .
However to do this I would need to know the max area the object is taking up by having the max height and width.
I am aware that element.getBoundingClientRect does this but my roadblock is that is does not consider any psuedo elements, which is how most of these shapes are made.
I know when working with the CSS transform property, especially using scale, the browser knows to resize the whole shape including the pseudo element that makes up the shape.
It also uses the border-box coordinate system.
However the browser does not provide this information as it comes from the user agent
My main question is how do I access the dimensions the user agent computes for any given element, or how do I find the proper dimensions of a 'getBoundingClientRect' that considers an elements psuedo classes
My shapes can be found in the attached links.
httpsmichaelodumosu57.github.iosigma-xi-mu
https://css-tricks.com/examples/ShapesOfCSS/
I can't afford to use any other method to create my shapes because I have limited time on the project, but I do know that the browser can provide me with the information I am looking for.
Yes I have answered my own question. What you want to do is to scale the image to a very small since (since transform scale() works perfectly) and place it in a grid box (this could be a div of small size as well. You would run document.elementsFromPoint(x, y)
(notice the pluralization) on every point in the div containing you shrunked irregular shape and from there you can find the height and width of its bounding box by the difference of the highest range of their respective coordinate values. To center you must place your irregular shape in the bounding box of the background drop with the re-scaled dimensions (remember your skrunked your irregular shape to find them) and have the margin of the inner shape set to zero. This works only if your real (not pseudo element) is to the left most of the screen. Question is how do you position your background when your irregular shape is not properrly centering inside of it?
You can use document.elementFromPoint(x, y) for getting the element that exists in specific point, but I have not tested it for any kind of shapes.
I am working with SVG elements. I wish to rotate a SVG text element and also have to find whether it is colliding with nearby text elements.
In this I have achieved rotation. But facing concern on finding collision. To find collision, I am obtaining values using getBoundingClientRect() for text elements after rotation and comparing those.
The issue I am facing is, the labels are returned as collided even when a text enter inside the rect box of previous text element. But you can see those are not collided.
I need to found whether text is collided with previous text element exactly.
Help to resolve this..
Thanks !
When I'm trying to get the top and left values of an text object in FabricJs, I get the values back of the bounding box. But what I would like to know is the top and left values of the text itself and not the bounding box.
I added a image for a better understanding of this problem: http://imgur.com/U42YDhm
I tried to find a solution, but I couldn't find exactly what I was looking for. I hope you can help me out.
I am looking to get the actual displayed color of an area of the screen using Javascript.
I have a system that allows people to restyle their content and they can use RGBA colors, what this means is that while I can very simply test what the background color of an article is (for example) that may not be its actual color because it may be slightly or fully transparent and thus the layer underneath may be showing through...
I have seen various questions on here that deal with getting pixel colors from an image using Javascript, so I am wondering if canvas could be used to achieve this in some way...
What I want is to hide the text in an article, create a (maybe canvas) 'screenshot' of what the article background looks like empty, and then iterate over the pixels in there to get an average color value.
Anyone any ideas on how to do that?
You need to get a screenshot of the page using canvas, which is not trivial:
Can you take a "screenshot" of the page using Canvas?
And then getting the colour would be trivial once you have the screenshot.