Drawing a caret between a point and a draggable div

Question

Hi all,

I have a draggable div that represents a little info popup that the user can drag around the screen. But this div is anchored to a point on the screen, and I would like there to be a caret drawn between the div and the point that it is anchored to.

An example of this can be found on Google maps, when you hover over a store or point of interest that you've searched for. You'll see a caret drawn between the point and the popup. This is simple enough, but their popup is not draggable while mine is.

So what is the best way to implement this? I'm thinking of using a series of caret images that are resized depending on the orientation of the popup relative to the anchor point. It'll get tricky in that I'll have to use a different type of caret depending on the angle at which the popup is placed relative to the anchor. Is there a better way to do this?

Thanks!

Answer 1

So you're essentially trying to draw a dynamic image between two points on the screen? I'm not sure how practical this is in HTML. The dom does not support image rotations and image resizing is limited in quality. You can do server-size image generation but that will be slow and give you high server load.

Some newer browsers (not IE) support the Canvas object which may allow you to do this if you're willing to exclude 80% of users.

In the end, I'm not sure there is a better solution than what you're already thinking - and I'm not sure how well that will work.

Answer 2

This tutorial on Drawing lines in JavaScript may be of some use to you, as it shows you how to do relatively efficient dynamic line drawings using JavaScript (see examples at the bottom of the page).

Also I have used the jsgraphics library to achieve something similar by clearing the current line and drawing a new one each time the user moves the endpoint of the line.