andfanilo / streamlit-drawable-canvas

Do you like Quick, Draw? Well what if you could train/predict doodles drawn inside Streamlit? Also draws lines, circles and boxes over background images for annotation.
https://drawable-canvas.streamlit.app/
MIT License
563 stars 85 forks source link

How to get the coordinates for the center of a circle? #15

Closed rjtavares closed 3 years ago

rjtavares commented 3 years ago

Example:

    left = 2
    top = 1
    height = 100
    width = 100
    angle = 85

How do I get the center coordinates from these values?

andfanilo commented 3 years ago

Hey @rjtavares, this should do the trick:

center_x = left + radius * math.cos(angle * math.pi / 180)
center_y = top + radius * math.sin(angle * math.pi / 180)

Demo:

import streamlit as st
from streamlit_drawable_canvas import st_canvas
import math

json = st_canvas(drawing_mode="circle", stroke_width=1, background_color="#cfc", width=500, height=500)

if len(json.json_data["objects"]) < 1:
    st.stop()

circle_obj = json.json_data["objects"][-1]

left = circle_obj["left"]
top = circle_obj["top"]
radius = circle_obj["radius"]
angle = circle_obj["angle"]

"[SO link](https://stackoverflow.com/questions/1571294/line-equation-with-angle)"
"(top,left) is your mouse starting point, radius is r of circle and angle is between horizontal line and line from start point to mouse release point"

center_x = left + radius * math.cos(angle * math.pi / 180)
center_y = top + radius * math.sin(angle * math.pi / 180)

f"Canvas has dimensions 500; 500"
f"Starting point: {left} ; {top}"
f"Radius {radius} angle {angle}"
f"Center coords: {center_x} ; {center_y}"
banji007 commented 3 years ago

Hi, i want to do opposite, i know the radius of a circle and i just want to place it at a random place on the canvas based on age, etc - or some other user attributes. Basically i want to draw icons like people, call center agent, smart phone, rectangle, traingle, square, circle, etc - based on attributes from user data and not based on mouse clicks done by the user itself on the the canvas. How can i do that