Draw caret between point and dragged div
I have a draggable div that presents a small informational popup that the user can drag around the screen. But this div is anchored to a point on the screen, and I would like to have a caret made between the div and the point it is anchored to.
An example of this can be found on Google Maps when you hover over a store or point of interest you were looking for. You will see a line drawn between the dot and the popup. It's simple enough, but their popup is not dragging, but mine.
So what's the best way to implement this? I mean using a series of CARET images that resize depending on the orientation of the popup relative to the anchor point. This will be tricky because I will have to use a different caret type depending on the angle at which the popup is positioned relative to the anchor. Is there a better way to do this?
Thank!
source to share
So, are you trying to draw a dynamic image between two points on the screen? I'm not sure how practical this is in HTML. Dom does not support image rotation and image resizing is limited in quality. You can generate server sized images, but this will be slow and give you high server load.
Some newer browsers (not IE) support the Canvas object, which can let you do this if you want to exclude 80% of the users.
In the end, I'm not sure if there is a better solution than what you are already thinking about - and I'm not sure how well this will work.
source to share
This JavaScript Drawing Lines tutorial may come in handy as it shows you how to make relatively efficient dynamic line drawings using JavaScript (see examples at the bottom of the page).
Also I used the jsgraphics library to achieve something similar by clearing the current line and drawing a new one every time the user moves the endpoint of the line.
source to share