search

ailon / markerjs

[Deprecated - use markerjs2]: Let your users annotate and mark images
https://markerjs.com
MIT License
103 stars 32 forks source link

Add polygon marker #14

Closed philip-firstorder closed 4 years ago

philip-firstorder commented 4 years ago

I need a polygon marker to annotate contour areas.

Is there anything planned? Or would you accept pull requests if I have a go at it?

ailon commented 4 years ago

Do you mean like a polygon the user creates by clinking the points in? This would be quite impossible to fit into how all of it works now (you click a toolbar button and the marker is added to the area and then you can move/resize it). So I'd say this would be a v2 feature at a minimum.

philip-firstorder commented 4 years ago

Yes a polygon where the user clicks the points in. With a double-click at the end to finish the editing. Like here https://svgjs.com/svg.draw.js/demo/index.html

You could add a 5 point polygon marker to the area when you click a toolbar button, but you should then also be able to create new intermediary nodes when you grab touch+move the lines.

philip-firstorder commented 4 years ago

My company started implementing this feature today, based on this Leaflet example http://leaflet.github.io/Leaflet.draw/docs/examples/edithandlers.html

Will keep you updated on the progress and open a pull-request when finished.

philip-firstorder commented 4 years ago

After testing with various initial shapes for the polygon, we reached the conclusion that a hexagon is the most suited because:

  1. It's something between a rectangle and circle, both already implemented
  2. Icon is intuitive, this is why the Stop road sign is a hexagon
  3. It's symmetrical (as opposed to a pentagon or some other shape)
  4. New in-between expansion points which are smaller/faded are easy to grab on mobile
  5. You can convert it to a rectangle by just deleting 2 points, or a triangle by removing 3 points
  6. If line = 2 points and rect = 4 points then polygon = 6 points. Increasing the points by 2 makes mathematical sense.
philip-firstorder commented 4 years ago

For polygon will use the GeoJSON standard notation.

ailon commented 4 years ago

Hi Philip,

It looks like you are getting quite advanced there. Cool stuff!

Having said that, I'd prefer to keep marker.js simple(r) and would ask you to keep this feature in your own fork.

Thank you for understanding.

elitz123 commented 2 years ago

You could add a 5 point polygon marker to the area when you click a toolbar button, but you should then also be able to create new intermediary nodes when you grab touch+move the lines.

Hello Phillip. Just wondering if you ever implemented the polygon custom marker shape on a separate fork ? I'm looking for that exact functionality on top of markerjs to allow users to annotate polygons on top of an image.

thanks.