Konva line polygon within another line polygon detection - konvajs

I use React Konva and want to know if a Konva line polygon is completely within another line polygon, what is the best way to do it?

Beyond simple rectangles, shape collision detection is not simple and though Konva does have some overlap detection, testing for one shape inside another is not provided by Konva AFAIK.
Libs are available, and you can read up on the subject at https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection

Related

Warping curved rectangle to a regular rectangle

Edit: Upon further research, I've came across similar questions. I guess the process is not as trivial as using the WarpPerspective() function. Here is a similar question and an answer.
I'm using methods like thresholding and canny to extract a rectangular shape from books. Sometimes the rectangles (contours) are deformed like this (pages are not always flat):
As you can see the bottom line is not a straight line. I need to warp it into a rectangle to do further analysis of its inside contents.
Normally, I use WarpPerspective() using the 4 points I get from ApproxPolyDP() with a contour like this and it works fine:
But I can't figure out what to do with a curved rectangle. Here is what I get using the method I use on non-curved rectangles. It's close but not quite what I want:

About collision detection in KonvaJS

In KonvaJS, how to detect whether a point is inside an irregular figure (e.g., pentagon) and how to detect whether a figure collides with another figure when dragging? Please write an example for reference. My central idea is (as long as it's in an irregular pattern) : collision detection and drag limits
As mentioned in the comments Konva doesn't support collision detection.
For simple cases, you can implement your own collusions: https://konvajs.github.io/docs/sandbox/Collision_Detection.html
For good collision detection support, you can use another js library. Like one of these:
http://wellcaffeinated.net/PhysicsJS/
http://brm.io/matter-js/
http://box2d-js.sourceforge.net/
So you will use "physic" library to calculate positions, collisions, etc. And you will use Konva for drawing.

How can I extract an edge like with Snapchat's scissor tool?

In Shapchat's photo editor, there is a scissor tool extract object with guiding lines (by drawing edges of object want to extract).
I wanted to implement that tool with openCV, but I am totally new to openCV. I searched openCV documents and tutorials, but I have no idea how to use and combine functions of finding contours, image moments, and edge extraction.
The easiest way to do this is:
Start with OpenCV's grabcut demo here
Add code to draw a polygon using mouse events, or touch events.
Use the the polygon to initialize foreground region of grabcut segmentation.
You can also look at dlib's image segmentation, in which case the region cut by scissors can be used to extract parts of the segmented image.

Recognize basic shapes in binarized image using OpenCV

How can I recognize some basic (usually rotated) shapes:
circle,
"empty" circle,
cross,
empty triangle,
using OpenCV? What's the most straightforward way? It would be nice if the user could "define" his own shapes somehow (load a template image, possibly).
I'd like to map each recognized shape to its type (circle, triangle etc.) and a position of its center. (And its rotation if possible).
For circles HoughCircles could be used (there's no rotation in this case, too). But what about the others? Template matching doesn't support rotation and scaling, right?...
Here's the input:
You are right that regular template matching are not rotation, scale invariant. Take a look at OpenCV's matchShapes. Internally, it uses HuMoments. You will need to use findContours to find each individual object. Now once you have done this, you will probably find matchShapes couldn't distinguish Circle from Ring. A simple way to solve this is to use the hierarchy structure from findContours. If there is a hole (large enough) inside a Circle, that's probably a Ring.

how to detect known objects in OpenCV?

I am try to draw shapes in the window in real time. The shapes are like tangle ,rectangle ,circle , half or circle and "Z" in the screen using yellow color. The size and the shape may not be same to the original image. But Program know all the original shapes. Because they are predefined. I want to know how i can identify the correct shape. as an example,
is there possible way to do this? can I use template matching for this? Please help me with this..
You can use different methods to detect each shape. Check these:
Ellipse detection with OpenCV
Square detection doesn't find squares

Resources