We have a need to dynamically annotate certain points in an SVG rendering with some labels (divs).
Is there any algorithm that will allow us to dynamically determine the position for these label annotations that will fully avoid or minimize overlap?
The annotation would be a line from the points to a label (a div with some text)
Its something you need to create points dynamically.
Please refer to this link which shows dynamic random walk within points along with allocation.
Also you may go through the link for other details regarding SVG Animations.
Related
Google's Material Design 3 uses a so-called state layer for interaction states like hovering, focusing or pressing an element. These states are represented by adding a layer with a fixed opacity onto the element to change its colour.
I am currently creating a web application with Vue.js and using tailwindcss as my CSS framework, and was wondering if there is a simple way of creating these state layers. As far as I am aware, there are two possibilities.
I can either use a semi-transparent HTML element that has the same size, shape and position as the original element and set its colour and opacity to the required values. However, doing this for every element that can be interacted with would be a lot of work, greatly increase the size of my HTML code, and I do not think it is an elegant solution.
The second way I can think of is calculating the resulting color of adding the layer to the element, and setting this value when the user interacts with it. Calculating these values manually and stating them explicitly would also be a lot of work, and it would mean that whenever I change one of the content colours, I would have to recalculate all colours for interaction. Another possibility would be to calculate the values at runtime, which has the added benefit of making them dependant on the content colours, but that would mean that I have to access the tailwind variables inside my JavaScript code, and then set the corresponding classes by concatenating the tailwind class name with the calculated value.
While all of these solutions would be possible, I feel like they are neither simple nor elegant. Is there another way that I did not think of, or is the concept of state layers just not meant for these frameworks?
I am developing a grid based game in libgdx. What i want is to know how can i draw a square tile with number written on it which can be moved and scaled.
Its stupidity to design thousands of textures for these numbers and use them as sprites.I want to know if there is any container class in which i can dynamically add text and and set background too.
You can use Scene2d UI components such as Label to create styled text boxes.
Scene2d allows you to do layout and styling of a wide range of components that can easily be manipulated using Actions, or you can create your own components by extending Actor.
To create and display a Label, create a Stage and add the Label to it.
In this context I assume you by "tile" just mean a rectangle.
You don't say anything about what you are doing now. How you draw the numbers.
So this answer is based on almost zero information.
Solution 1:
Use a font with a background color.
Solution 2:
You know the number/how many digits. You know the size of the font. Calculate the size of the text on screen. Use a single narrow background sprite and tile it behind the text.
Solution 3:
Use a textbox from Scene2d.
How can i fill text in the canvas with mutiple font.
I can be able to fill in canvas this:
This is an example of what I want to do
this is another example of what I want to do
I know that i can slpit the sting and do first fill the normal text, second the bold text, and third the rest of the text. but i want to be able to drag and drop the text, so i cant do in that way.
Sorry, you're out of luck. There's no easy way out here.
You have to call drawtext at least three times if you want text with a bolded word in the center.
There may be a time in the future where you are allowed to draw arbitrary html, the spec mentions this is a real possibility, but that won't be for some time. To quote the spec:
Note: A future version of the 2D context API may provide a way to render fragments of documents, rendered using CSS, straight to the canvas. This would be provided in preference to a dedicated way of doing multiline layout.
From the end of this section.
You can of course still drag and drop, you just have to have a list of elements and their locations that make up a "node". Much more complicated objects have been done in the canvas no doubt.
I have a custom Google map set up with custom markers for certain points with popup infowindows. I currently have it setup to show all locality labels (eg city/area labels) however the client has asked if we can hide certain localities and not others (so that the relevant areas of interest are always visible but the irrelevant ones are not). You can obviously set it to hide all localities (or other items on the map) but I cannot see anyway of only displaying certain ones? Does anyone know anyway of displaying certain ones and not others?
If this is not possible then presumably the only alternative would be to hide all locality labels and setup 2 different styles of markers, one that is a normal marker withpopup and one that is actually just a text label with no associated popup which can then be used to list the relevant locality labels? Presumably this is possible but is there a better way of doing it as this doesn't seem right?
Thanks so much,
Dave
I'm assuming from your description that you have created a MapTypeStyleapi-doc. And no, there is no easy way, using a Styled Mapdev-guide, to apply a style to specific geographic areas; it just provides the hierarchical model of styling rules.
To answer your specific question about how to create markers that function essentially as labels, the MarkerWithLabel utility library will provide you with a tool that does what you describe. That said, I wouldn't recommend trying to recreate a set of map labels for an area or region using markers; the misgivings you express in your question about this approach are valid.
If you need to implement something along these lines, I suggest taking a look at the following two options and considering if either of these are a good fit for what you are trying to achieve:
Custom Overlays
KML Layers
I'm currently working on a pure html 5 canvas implementation of the "flying tag cloud sphere", which many of you have undoubtedly seen as a flash object in some pages.
The tags are drawn fine, and the performance is satisfactory, but there's one thing in the canvas element that's kind of breaking this idea: you can't identify the objects that you've drawn on a canvas, as it's just a simple flat "image"..
What I have to do in this case is catch the click event, and try to "guess" which element was clicked. So I have to have some kind of matrix, which stores a link to a tag object for each pixel on the canvas, AND I have to update this matrix on every redraw. Now this sounds incredibly inefficient, and before I even start trying to implement this, I want to ask the community - is there some "well known" algorithm that would help me in this case? Or maybe I'm just missing something, and the answer is right behind the corner? :)
This is called the point location problem, and it's one of the basic topics in computational geometry. There are a lot of methods you could use that would be much faster than the approach you're thinking of, but the details depend on what exactly you want to accomplish.
For example, each text string is contained in a bounding box. Do you just want to test whether the user clicked somewhere in that box? Then simply store the minimum and maximum coordinates of each rendered string, and test the point against each bounding box to see if it's contained in that range. If you have a large number of points to test, you can build any number of data structures to speed this up (e.g. R-trees), but for a single point the overhead of constructing such a structure probably isn't worthwhile.
If you care about whether the point actually falls within the opaque area of the stroked characters, the problem is slightly trickier. One solution would be to use the bounding box approach to first eliminate most of the possibilities, and then render the remaining strings one at a time to an offscreen buffer, checking each time to see if the target point has been touched.