Draw line between two hotspots about marzipano HOT 8 CLOSED

The Marzipano API doesn't support drawing arbitrary geometric objects. That said, if you're ok with the line being straight in screen space (not in spherical space), you could probably accomplish it with something like the following:

1. Superimpose a <canvas> with a 2D rendering context (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) on top of the viewer element;
2. Listen to the viewChange event to detect view changes, then use the coordinatesToScreen view method to convert the spherical coordinates of the two endpoints into screen coordinates;
3. Draw a line between the two endpoints on the 2D canvas, leaving the background transparent so you can see the pano underneath.

from marzipano.

Closing due to lack of activity.

from marzipano.

Hi,

Thanks for this help.

To draw a line I draw two hotspots on marzipano and draw div with border and transform: rotate(angle) between these two hotspots and it works fine.
var angle = Math.atan2(pointB.top - pointA.top, pointB.left - pointA.left) * 180 / Math.PI

But now the issue is when we move marzipano up/ down at some extend point1 or point2 goes out of screen and line position distorted.

Please help he how to fix this issue.

from marzipano.

Do you have a demo link we can take a look at?

from marzipano.

Hi

Basically we want to draw line between 2 hot spots. but while any of our hotspot get out of screen it's display changes to None. So we want to set it display block, so that we will get it's coordinates.

We have made changes in hotspot.js and set this.visible=true , still it changes to none.

Please help me so that I will draw lines as per our requirement.

Thanks

from marzipano.

I didn't quite understand how you are trying to implement this. You mentioned that you "draw a div with border and transform: rotate(angle) between these two hotspots and it works fine". Are you drawing it on a canvas? Using CSS transforms? A demo link would help.

from marzipano.

Hi,

For drawing line between two points first of all I draw two hotspots. Then I get screen coordinates of these two points and draw a div with rotation and width. On viewChange I am drawing line between these two points. For some extend it works fine, but after some extend any of my hotspot display changes to none due to which I am not able to find it's coordinates (offset) so now I get coordinates (0, 0) due to which my line get distorted.

So now I do not want to change my hotspot display so that I will get its coordinates. Please help me resolve this issue. It's very urgent for me.

Thanks

from marzipano.

How are you getting the hotspot screen coordinates? (RectilinearView.coordinatesToScreen)[http://www.marzipano.net/reference/RectilinearView.html#coordinatesToScreen] should always return a value unless the hotspot is behind the camera. If the hotspot is behind the camera, I don't think there's any sensible value to return for the screen coordinates.

from marzipano.