Shape drawing
See original GitHub issueIt would be interesting to port to plotly.js some shape-drawing features which exist in dash-canvas at the moment (https://dash.plot.ly/canvas). In an existing figure, the user would have the possibility to
- create new shapes such as rectangles, lines, freehand lines (paths), by selecting a specific type of drag mode in the modebar
- modify these shapes (moving them, and if possible scaling them and rotating them). Deleting the last shape would be a plus.
- retrieving the geometry of shapes would probably be done thanks to
relayoutData
events in Dash.
Also discussed:
- having a
new_shape_style
attribute to set the style of shapes individually. - all the drag modes would not be in the modebar by default but could be added individually
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (5 by maintainers)
Top Results From Across the Web
Drawing tool
This website is an online drawing tool where you can draw stuff fastly and create ... Draw, create shape, save your online drawings...
Read more >How to Teach Kids to Draw Using Shapes
May 18, 2020 - Step-by-step picture guide to drawing different objects just by using simple shapes, angles, and lines.
Read more >How to Draw ANYTHING Using Simple Shapes - YouTube
Learn how you can use simple shapes to draw objects, people, animals, or entire scenes!The first 1000 people to use this link will...
Read more >Learn how to Draw Shapes with Names for Kids - YouTube
Learn how to Draw Shapes with Names for Kids | Drawing Shapes for ChildrenSubscribe for More videos: ...
Read more >How to Draw Shapes Step By Step and Coloring ... - YouTube
LearnShapes #learnColors #ToBiART #FunKeepArt #Drawingshapes Learn Shapes for Kids and Toddlers. Diamond Shape, Triangle Shape, ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Based on the previous discussions, here is a more complete spec, with also a more restricted set to start with.
Modebar buttons for adding shapes (or one modebar menu).
Options
New shapes
The polylines are versions of the existing
polygon
shape and the Bezier curve of thepath
shape. The only completely new one would be the freehand brush (following the mouse).Setting shape appearance parameters (color, thickness, filled or not)
Appearance parameters can use the template default but it would be great to add a
newshapestyle
parameter (to the layout I guess), which could be set when creating the figure and modified through Dash components (colorpicker, slider etc.).Modifying shapes after their creation
In editable mode the shapes can be modfied. @alexcjohnson mentioned the possibility of adding handles to the corners, points etc, which would be great. Also a finer control of shape modification, constraining some transformations (eg constrain circles to be circles and not anisotropic ellipses) would be great for UX, but can come later.
For a smooth user experience, after the creation of a shape it would be great to stay in shape creation mode (ie clicking and dragging creates a new shape), but to switch to shape modification when clicking on an existing shape.
Priorities
This is a suggestion of priorities based on my needs for CZI, but of course it can be modified because of feasibility issues.
relayoutData
or another event that Dash can capture.With these two items we can start work on some Dash demos.
Then 3. Shape creation from user interaction and modebar buttons for the other types of existing shapes 4. Improvement of shape modification (adding handles, maybe constrained edits) 5.
newshapestyle
or equivalent parameter for controlling shape appearance 6. New freehand drawing modePlease comment @archmoj @etpinard @antoinerg @nicolaskruchten @alexcjohnson
For completeness, also circles, and freehand has a couple of distinct variants to consider: polylines where each click is a point; possibly also a curved variant of the same thing, where your clicks are connected by smooth bezier curves; and completely freehand where we try to follow the mouse path pixel-by-pixel - this last one we already do for lasso selection, with very minimal simplification along the way.
Rectangles and circles can already be moved and scaled, but still need rotation. Lines are already fully controllable. Freehand paths can be moved, but need scaling and rotation, and it would be nice to be able to at least optionally drag each individual point making up the path (along with the control points if in the Bezier case, perhaps). If you want to play with this, go to https://rreusser.github.io/plotly-mock-viewer/#shapes and turn on editable mode by opening the js console and typing:
Plotly.newPlot(gd,gd.data,gd.layout,{editable:true})
One problem with this is it’s hard to discover, even when you’re already in editable mode. You can see what a drag is going to do though by paying close attention to the mouse pointer. Can we have some handles show up, perhaps when you hover over the shape? Along with, in the case of circles at least, maybe a dashed outline of the bounding box?
“Live figure” discussion for
dcc.Graph
https://github.com/plotly/dash-core-components/issues/584no more underscores 😄 so
newshapestyle
perhaps.👍