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.
Related
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/
First off, i've seen questions like this posted several times, but they are all based on SVG, classes and CSS. I'm aiming at solving this using canvas because my final force layout will use 1000+ nodes and svg just doesn't cut it. Also, I have a background in programming but am total n00b to d3. So maybe i'm just missing something obvious.
Here's my current code:
http://bl.ocks.org/gonzam88/3ff2f33975ca8258f4aa9484be4255ce
I guess on mouseover I have to loop all links and check if either source or target matched the current node, but after many attempts i'm not too sure how to achieve this, and how to change specific links properties (when not using SVG).
I feel i'm close but not just there :)
Thanks for reading and hope my english is ok!
UPDATE 1
I've managed to detect links related to hovered node, but when I try to change its stroke it changes every stroke in my graph.
check:
http://blockbuilder.org/gonzam88/9d48b4346fadb6b719a9ce9efb98a899
In this example I only want each group to change to blue line. But both 'groups' are being changed.
Links are drawn on line 140 and my color function is on line 57. How do set stroke color to specific links?
I need to be able to draw links between the circles in a circle pack layout, like {source: i, target: j}. I've seen some questions about how to combine this layout with the force layout that made me think It could be a way to achieve this but I haven't had any luck on that path, also what I need is something completely static. Thank you in advance for any suggestions.
I finally could draw lines between nodes by appending them to the svg and calculating each line position based on the radius of the nodes that each line were to connect, but the problem was that the pack layout that I'm using is zoomable, so when I tried to zoom by clicking the lines neither translate nor re-sized (of course, since there was no code performing such things), so I tried to implement a translation function for the lines so they would move along with the zoom, then I saw that it would take some serious geometry to achieve this, so since I'm a lazy programmer and not at all experienced with d3 I tried to come with something more simple... at last I decided to represent the links between the nodes with a different approach (without lines), I used the "mouseover" event so when the pointer is over a node it will highlight (changed circle stroke attribute color and width) the nodes connected to it. This way I achieved my goal and the view looks a lot cleaner without all the lines crossing over it (they were a lot). I know that some may think that this does not answer the original question, and I'm sure that this can be achieved by someone with more experience (and time and patience) using lines and implementing the right calculation, but in my case this solution solves my problem and maybe it could be of help to others.
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' have an already made a Stacked/Group multi bar chart with NVD3 which is working great. I need to add a grey background to some of the places of the graphic to inform something to the user.
Does anybody know how to do this?
Thanks!
If I understand correctly you don't want a background for the whole chart. In this case you can always use d3's own insert method selection.insert(name, before) (see the documentation at https://github.com/mbostock/d3/wiki/Selections#wiki-insert ) to display an svg object at a certain in front / behind certain elements...(I guess it would be behind all the groups from you animation basically).