How to draw an irregular shape

plotly.js
1

Hi
How could I draw a shape based on a silhouette like for example this?

shape
shape120×144 5.72 KB

I’ve read about drawclosedpath but how can I generate those coordinates in my code?

Thank you!

1 Like
2

Hey @Aire, I did some reverse engineering in the past. You basically have to construct the string of the freeform. Maybe this helps:

1 Like
3

Thanks @AIMPED!
I saw that thread, it gave me the idea, indeed.

My idea is to draw it without any closepath, based on an image with black and white pixels.

Is there any function to translate the black pixels of an image to a string that a plotly ‘shape’ recognizes to draw it in a graph? Or what is the format that this string must have in order for me to construct it?

4

If I understand you correctly:

You have an input array (black and white pixels) and need to draw the concave hull curve automatically? Or do you know the order of the points to connect beforehand?

5

I process an image like the one I show in the first post to get the pixels / points in the plot that need to be connected. I want to translate these points to a string that a shape understands to draw that image in the plot.

So I need to know how to format that string. I have not found any specification in plotly docs, maybe I’ve missed it.

Thank you!

6

Yes, I understood this. The problem you might face is the order of the points to connect.

Which is the point you are starting with? Which is the next point to connect? Imagine the coordinates of your black pixels like this:

import plotly.graph_objects as go

x=[1,8,4,3,9]
y=[0,4,6,3,9]


fig = go.Figure(
    data=[
        go.Scatter(
            x=x,
            y=y
        )
    ])

will the resulting figure show the correct shape or will you have to change the order of the list items of x and y ?

7

I see your point.
I just found that the shapes use SVG Path format (Image Annotations | Dash for Python Documentation | Plotly) I guess it works for plotly js not just dash… so maybe if I use ImageTraker.js to get the string I could build a shape with it?