Our AI model recognizes an object in an image and creates a mask on it.
It returns a raster image of mask that covers the detected object.
Here have a look at this example:
Now the black outline is what AI model gives us, and sometimes it makes little errors setting the boundary around the object like shown in red rectangle in the image.
I want to allow the user to correct this outline by dragging the outline.
One way that comes to my mind is to use Free Form Deformation or something similar but I don't know how to do that in React Native, I can't find a library etc. (and don't have much time to implement it from scratch)
Someone please give me a direction on this, Thank you.
If you know coordinates you can use Skia and SVG paths https://shopify.github.io/react-native-skia/docs/shapes/path/ to draw your boundary and using Canvas touch handlers you can allow users to change coordinates.
Example of path building: https://youtu.be/7SCzL-XnfUU
Or this example of a hand drawing app: https://medium.com/react-native-rocket/building-a-hand-drawing-app-with-react-native-skia-and-gesture-handler-9797f5f7b9b4
And this example https://blog.notesnook.com/drawing-app-with-react-native-skia/
Related
I am trying to create a sort include/exclude feature in a react native app, where a user can draw on an image to shade or unshade an area to include or exclude it, so that only items in the include(shade) area will be processed. I have gone through a few react native modules but i am having problems getting anything to work correctly. Overall it is very similar to a paint and erase function, but i need to know or be able to calculate the pixels that are shaded.
My latest approach is to use a SVG mask and path. The mask covers an image, and a user draws on it. A user could then click an erase button, and then start drawing another path that adds to the mask to hide the original path. The problem is that after the mask path is added a user can't draw on it, in case they want to make further alterations. I could simply alter the path d value but it wouldn't look quite right.
Does anyone know if you can somehow combine the SVG's, or remove intersecting parts from a path, or have any ideas of a better way to do this?
I am quite sure it can be done with the react-native-reanimated package.
See this as if I got u right its kinda what u are looking for.
I'm using Javascript, p5.js, and Daniel Shiffman's tutorial to create a visual representation of an A* search algorithm.
An image of an example grid looks like this:
example grid
Is it possible to click on any cell of the grid, in order to print out it's attributes? Based on Daniel Shiffman's other tutorial on how to click on objects, I understand I have to create 2 functions that activate and execute respectively. I understand how to do this with a circle because a circle has a radius.
But, I don't understand how to do this with a cell because I only have it's coordinates. I can't see how to use coordinates as a metric to calculate length.
I'd appreciate any guidance to my thinking. Thank you so much in advance.
I wrote a tutorial on collision detection available here. That's for regular Processing, but everything is the same in P5.js. You're looking for rectangle-point collision.
Basically, you need to check whether the point is between the left and right edges of the rectangle and between the top and bottom edges of the rectangle. If both are true, then the point is inside the rectangle.
I recommend breaking your problem down into smaller steps and taking those steps on one at a time. For example, try getting it working with a single hard-coded rectangle and point before you try it with multiple cells or with user input.
I am building a web application in which the user would be able to draw zones (polygons) onto a video. A solution I already implemented was to put a <div> on top of the video player, catching the mouse clicks.
What I'm willing to do right now, is being able to draw on that <div> with the mouse:
Click on the block to draw a point
A button, Draw zone, which would fill a polygon with the existing points
A button, Delete canvas, which would reset the block
I am looking for directions about which library to use. Already heard about:
Raphael (raphaeljs.com/#demo)
jsDraw2D (jsdraw2d.jsfiction.com/demo/linepolygon.htm)
Problem
Raphael looks monstruous but kinda overkill for what I want to do. And on the contrary, jsDraw2D seems to work just fine from what I tested (only drawed manually though).
I have several constraints such as:
The user is drawing the points with the mouse (by clicking)
The user is drawing on a <div> with opacity on (the filled polygon should be transparent too)
I need to store the points' coordinates (or of the polygon at least)
Question
What should I use ? Should I stick to Raphael even though it's a bit difficult to implement (I've basically no background in JavaScript) ? Or do you know of a JavaScript library which could do what jsDraw2D does but in better ?
Thanks,
You should use SVG because they are obviously more interactive and easy to implement. If you've ever used Khanacademy then probably you'll come to know that they use SVG in their scratchpad.
Moreover, SVGs are also w3c recommended like canvas.
If you are able to go for HTML5 Canvas could be a good choice.
I'm working on displaying interactive map in html5.
I have created zones of map as array of numbers (representing coordinates)
like:
Zone1=[{x=3,y=4}, {x=8,y=5}]
and I have also created a map which is an array of zones
like:
map=[zone1, zone2....]
I have no problem drawing the zones in the canvas using context.lineTo() function, the same way I'm able to capture the mouse position on click and determine on which zone a user has clicked using point in polygon algorithm.
My difficulty arises when I want to fill color of of the zone when it is clicked at.
Anybody have ideas?
PS:
The shapes I made are irregular
I'm not in to using JavaScript libraries like jQuery or anything else
HTML5 Canvas does not know of notion of shapes of objects which you can manipulate. You have two options in your situation:
Use SVG to draw what you need (check examples on W3Schools)
Use some JS canvas library which adds abstraction to provide notion of shapes (check out EasleJS)
Write your own abstraction over canvas to provide shapes
You should know however, that even with such libraries, "shapes" are getting fully redrawn. Possibly, entire scenes are redrawn. SVG alleviates this, it's performance decreases as number of shapes/objects grows.
You can't. The shapes you created are not variables or referenceable in any way once they are added to the canvas. You could redraw the shape with a new colour over the old one, but I think your best bet would be to use a library to handle this for you.
Since I have used it myself, my own suggestion would be Kinetic.js, but there are a plenty to chose from.
I am currently trying to create a blue, circular, pie-chart-esque image for my website. The circle will be split into 6 different segments.
What I want to happen is that when the user hovers over a particular segment, this segment will turn orange, and some text will appear beside the circle corresponding to that segment.
I have found some resources online which achieve nearly the effect I need using CSS image maps. http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/ However, these techniques split up an image using rectangles. If I were splitting up a circular object I would prefer to split up the area based on particular arcs.
I assume this is beyond the reach of pure HTML and CSS. I do not have a great deal of experience with web languages, although I have had passing experience with JQuery. What are the techniques I need to solve my problem and what technology would be best to implement it?
you can create image maps that are not rectangular, but use polygon shapes.
this useful tool http://www.image-maps.com/ will let you achieve what you are looking for, without having to write your own polygon mapping!
A few options:
HTML image map
It's simple to create an HTML image map that comes very close to the shape of each slice of the circle, but there are limitations to HTML images maps. For instance, you can't nest content inside each slice of the image map (as an easy way to implement a hover pop-up). If an HTML image map is adequate for you, it's the simplest solution.
CSS image map
To define circle-slice shapes, a CSS image map is impractical, unless you only need a very-rough approximation of the hotspots for each circle slice. But if you could live with that, you'd have a lot more flexibility as far as the functionality.
onmousemove
You could also get the mouse coordinates with an onmousemove event handler for the entire circle, and then do your own calculations to determine which circle slice the mouse is in. This allows you to accurately define the hotspots for each circle slice, and you'd have more flexibility than with an HTML image map. But the calculations may take a little work.
I have a solution for this using mainly HTML and CSS with a tiny bit of jQuery to handle the showing of the text by the side of the circle.
It does however use some CSS properties that are not very widely supported such as pointer-events
JSFiddle Demo