Found this wonderful library to draw lines on webpage
http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm
I actually worked fine for me on page for drawing the line.But, i want to show arrow at one end of the line. I could not find it the library [i think], so can anybody suggest me on the same.
You can still use this library. Just draw three lines with the same first coordinates, but different second coordinates, calculated using rotation and scale transformations.
Related
Using geojson.io page I want to draw some districts/countries.
I'm drawing each district separately as there is no multipolygons in Leaflet Draw. However when I'm drawing the borders even with maximum zoom - the borders will never be exactly the same. Coordinates will differ to some extend which is natural. Hence when I am downloading the data in topojson , the data are not valid to display meshes between different districts
How to achieve the goal to have the borders always with the same coordinates?
For example it could be achieved by having the markers visible during drawing and just picking up the one I'm interested in(on a same border) by mouse click - the same way the shape is finished.
I have downloaded the source code, read it (it is nice), searched through docs and thinking how to adjust it for my goal but I'm lost :/
Leaflet.Snap did the trick.
I was afraid that snapping will be not exact for the borders but it is :)
I'm using the Victory library to draw a line chart in React, but it seems to draw lines with different widths depending on whether the line is straight or is at an angle.
Screenshot of the line it's drawing:
In the screenshot, the dots are drawn using VictoryScatter and the line(s) using VictoryLine. I noticed that VictoryLine draws using path, so is this a limitation of SVG's path to draw like this? Because this seems weird to me!
This is happening because of the order or rendering of the SVG components. The ones at the top and the bottom appear to be thinner because they are rendered behind the axes (this is explained here)
I'm not sure why, but changing the order didn't work for me, so I had to use VictoryPortal to bring my components to the front.
I want to make a shape (an XP bar) to always be ordered at the top of all shapes drawn.
How would this be possible, (I also use p5.js too, if that helps.) other than drawing it last (which I cannot do in my situation).
You've got two main options:
Option one: Draw it last. This is the easiest way to do it. If you "cannot" do it this way for some reason, that sounds like you need to refactor your code then.
Option two: Use 3D coordinates to draw it with a Z coordinate that's closer to the user. Most drawing functions can take 3D coordinates instead of 2D coordinates. This should work, but it's more complicated than just drawing it last.
I need a Time Line For My Web Project.
Something like this - I read the code of this Time Line but did not understand it because it is not documented enough.
My problem is the math behind all of this (not the interaction with the canvas).
I have read several articles about the math of the scroll bars, but none of them talk about zoom.
Some
articles suggest to hold canvas element with very large width value - and to display just the
View Port.
I don't think that's the right way to do it - I want to draw just the correct viewport.
In my project, I have array of n points.
Each point holds time value represented in seconds, but not all of the points are within the Viewp Port.
Considering the current zoom level, how do I calculate:
What points should be drawn and where to draw them?
What is the size and position of the thumb?
Any articles / tutorials about such a thing?
You might be able to use something like Flot which handles the placement of points, as well as zooming and panning. Here's an example of that.
There are a bunch of other drawing libraries, here a good list.
You always have Raphealjs.com , one of the most used library to play with SVG, with this you can write your own js to generate the timeline.
I am currently trying to create a blue, circular, pie-chart-esque image for my website. The circle will be split into 6 different segments.
What I want to happen is that when the user hovers over a particular segment, this segment will turn orange, and some text will appear beside the circle corresponding to that segment.
I have found some resources online which achieve nearly the effect I need using CSS image maps. http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/ However, these techniques split up an image using rectangles. If I were splitting up a circular object I would prefer to split up the area based on particular arcs.
I assume this is beyond the reach of pure HTML and CSS. I do not have a great deal of experience with web languages, although I have had passing experience with JQuery. What are the techniques I need to solve my problem and what technology would be best to implement it?
you can create image maps that are not rectangular, but use polygon shapes.
this useful tool http://www.image-maps.com/ will let you achieve what you are looking for, without having to write your own polygon mapping!
A few options:
HTML image map
It's simple to create an HTML image map that comes very close to the shape of each slice of the circle, but there are limitations to HTML images maps. For instance, you can't nest content inside each slice of the image map (as an easy way to implement a hover pop-up). If an HTML image map is adequate for you, it's the simplest solution.
CSS image map
To define circle-slice shapes, a CSS image map is impractical, unless you only need a very-rough approximation of the hotspots for each circle slice. But if you could live with that, you'd have a lot more flexibility as far as the functionality.
onmousemove
You could also get the mouse coordinates with an onmousemove event handler for the entire circle, and then do your own calculations to determine which circle slice the mouse is in. This allows you to accurately define the hotspots for each circle slice, and you'd have more flexibility than with an HTML image map. But the calculations may take a little work.
I have a solution for this using mainly HTML and CSS with a tiny bit of jQuery to handle the showing of the text by the side of the circle.
It does however use some CSS properties that are not very widely supported such as pointer-events
JSFiddle Demo