Is it possible to draw an arrow or stick svg on the top of the arc (with z position) to represent a direction like below?
Related
I'm extracting door shapes with Cubicasa5k dataset but I don't know how svg draws quarter rounds.
Extracted some nodes of svg files with xml encoding, I found that it had a dictionary including 'd' key and value under of "Panel" id tree node like :
{'d': 'M825.47,986.05 q0.00,-72.92 72.92,-72.92 l0.00,72.92Z'}
It draws like this quarter round on svg image.
I want to draw that shape on raster image with cv2 in Python with that dictionary value.
Read article about 'd' commands but I'm still confused.
How can I draw it?
Okay, I hope I understood that d command of svg clearly now
That arc shape is Bézier curve, and it is drawn concavely based on the outer point, not on the centripetal point.
According to the example above ('M825.47,986.05 q0.00,-72.92 72.92,-72.92 l0.00,72.92Z'), it means drawing process following this:
The starting point of arc shape(called Bézier curve) is (825.47, 986.05).
The drawn reference point exists at a position shifted only to the y-axis. So the reference point is (825.47+0.00, 986.05-72.92) = (825.47, 913.13)
And the end point of arc shape is set following calculation about starting point like 2 : (825.47+72.92, 986.05-72.92) = (898.39, 913.13)
Drawing door shape finishes with drawing straight line that starts from the end point of the curve and ends with l code, it points (898.39+0.00, 913.13+72.92) = (898.39, 986.05)
Simply speaking, the door shape is drawn with arc and straight line, arc starts from left bottom and ends right top, then straight line starts from that right top and ends right bottom.
So if using cv2, should call cv2.ellipse, and set center point from process 4 above, axes(same value will show circle-like shape, so it's radius) from q command above, startangle and endangle(it differs from command above)
I want to do apply a rotation to a rect element in svg, such that the two ends of the rect however are excluded from the rotation. The following image should depict what I mean by that:
the first rect will look like the third one after a normal rotation. What I want however is the second one where the two left right ends of the rect are not touch on their vertical axis. What is best way to achieve this effect?
I'm using pixi.js to create some editable polygons. So, what I want to achieve is this:
I have one polygon
Then, when I hit the edge a small circle should appear
And next I can drag and drop that part of the edge to creating a new point for the polygon
For now, what I know is the polygon vertices and I'm thinking to use the line function (y=mx+b) to check if the point where the mouse is belongs to the edge. My problem here, is that I have no idea how to obtain that edges. Any Suggestion? Of course, if you have any other idea to do this feel free to share =).
For now, what I know is the polygon vertices
You probably draw your polygon using https://pixijs.download/dev/docs/PIXI.Graphics.html#drawPolygon method by passing to it a list of points - similar as last shape in this example: https://pixijs.io/examples/#/graphics/simple.js
// draw polygon
const path = [600, 370, 700, 460, 780, 420, 730, 570, 590, 520];
graphics.lineStyle(0);
graphics.beginFill(0x3500FA, 1);
graphics.drawPolygon(path);
graphics.endFill();
^ In that example we have 5 points: P (600, 370), Q (700, 460), R (780, 420), S (730, 570), T (590, 520).
It also means that we have 5 edges: PQ, QR, RS, ST, TP
Now, we should have some way to tell if mouse pointer "is hovered over some some edge". By "is hovered" i mean: it lies in some distance from edge - lets say said distance is 10 pixels. So we want to know if mouse pointer is 10 pixels away from some edge.
To know that we can use formula explained in Line defined by two points part in: https://en.wikipedia.org/wiki/Distance_from_a_point_to_a_line#Line_defined_by_two_points
P1=(x1,y1) and P2=(x2,y2) - are the beginning and end vertices of some edge (for example PQ)
(x0,y0) is our "mouse point"
You can iterate over all edges and perform above calculation - if the distance is less that 10 pixel for some edge then you have the answer. If there is more than one edge which meets this requirement then you should pick one with smallest distance (it can happen if for example mouse is placed near some vertice).
Now you have the selected edge. Now lets do following point from your question:
2. Then, when I hit the edge a small circle should appear
To calculate position of this circle we can use equation from same Wikipedia page: https://en.wikipedia.org/wiki/Distance_from_a_point_to_a_line#Line_defined_by_an_equation - the part The point on this line which is closest to (x0,y0) has coordinates:.
Here you need to convert coordinates of vertices from your selected edge to line function.
Then we can proceed to last point from your question:
3. And next I can drag and drop that part of the edge to creating a new point for the polygon
You can do it by adding new vertice to your polygon.
Lets assume that selected edge is PQ - then this new vertice should be added between vertices P and Q in the vertices list which you pass to drawPolygon method. Lets name this new vertice X. Coordinates of vertice X should be equal to current mouse coordinates.
Then you will have following edges: PX, XQ, QR, RS, ST, TP.
You probably want to activate this "mode" after mouse is clicked and when mouse button is down etc - but that is separate issue related to interactivity / GUI etc - not graphics :) .
Note: is good to separate your presentation part of application (graphics / pixi.js related things) from mechanics and interactivity / GUI etc. So for example: do your calculations in separate place (other class, method etc) from where you do your actual drawing (calling pixi.js methods, update canvas etc). Store results of calculations in some place (from above example it would be: list of vertices, position of circle, colors etc), and then when time comes to draw you take those results and just draw polygons using them. Dont mix everything in one place ;)
I want to combine two SVG paths such that
1.Both paths will be there but, at the area of intersection, there will be no strokes.
2.Second path will be excluded and there will be a complete stroke
See image at http://s18.postimg.org/et4m803rd/shape_combinations.jpg
I want similar function also in HTML5 canvas.
The purpose of this scenario is to implement a lasso selection tool (freehand selection) similar to that of photoshop, with Ctrl and Alt options for adding and subtracting selection [ + some other functions ].
What have you tried? This sounds a little bit like a homework assignment.
The first one is easy to replicate. Just draw the two circles with the stroke, then draw them again in the same place without the stroke.
You can achieve the second shape (the "pacman") by drawing a purple circle on the right that is clipped by a circle that is in the same position as the left (black) circle.
I'm playing with XNA. When I click the left mouse button, I record the X,Y co-ordinates. Keeping the mouse button held down, moving the mouse draws a line from this origin to the current mouse position. I've offset this into the middle of the window.
Now, what I'd like to do is restrict the mouse cursor to within a circle (with a radius of N, centred on the middle of the screen). Restricting the mouse to a rectangular region is easy enough (by adjusting the origin by the difference of the mouse position and the size of the region), but I haven't a clue on how to start doing it for a circular region.
Can anyone explain how to do this? Any advice on where to start would be helpful.
I don't have a clue about how to use XNA... so can't give you specific code, but the idea is simple.
Just check the distance between current mouse position and the origin with Pythagora's theorem:
dist = sqrt((current_y - orig_y)^2 + (current_x - orig_x)^2)
Then check that dist is < radius
You need, every time the mouse moves, to restrict it to a rectangle between its current position and the nearest point on the circle.
The nearest point on the circle is got by
let (x,y) be where the mouse is, (x0,y0) be the origin
(x0-x, y0-y) is the vector from origin to pointer
d=sqrt((x0-x)2+(y0-y)2) is the length of that vector
(N*(x0-x)/d, N*(y0-y)/d) is then the point at distance N from the origin along the line joining the origin to the mouse position - that is, the nearest point on the circle to the mouse pointer.