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 !
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 have a set of elements (they're DOM elements with absolute coordinates, but the problem is more about the algorithm than JavaScript, once I get their coordinates with getBoundingClientRect() the rest of the problem is generic enough that it's applicable in other domains). I need to determine if the area defined by these rectangles is rectangular or not. Here are a few examples:
The elements would never overlap, I'm trying to figure out an efficient algorithm for determining whether the region is rectangular, preferably in linear time. Although it's not the end of the world if it's higher time complexity as long as it's perceived to be instantaneous to the user with say... 50 tiles. My use case is basically a game that would reject user operation if selected elements don't align.
Since you can guarantee no overlaps, you could:
find a minimal bounding rectangle
by finding most extreme left/right/top/bottom coordinates
find that bounding rectangle's area
find the sum of the areas of the rectangles.
If the bounding rectangle has the same area as the sum of all the rectangles areas then the rectangles all fit neatly in the bounding rectangle.
I am using FabricJS and I am trying to have two canvases next to each other which behave like one. So I can drag objects between them.
My idea was to shift the viewport of the second canvas about the size of the first and then add the same objects to both of the canvases.
Here you can see what I did so far:
https://jsfiddle.net/ytdzo38h/
The selection box for the object is now shifted and therefore the object can't be grabbed in both canvases.
I found out that canvas.wrapperEl.getBoundingClientRect()gives back the coordinates of the selection box, but I have no idea how I could adjust that to fit my needs. I would really appreciate your help :)
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.