I'm attempting to make a project where you can submit an image and select players from it (basically draw a resizable rectangle around them).
But I'm not sure where to begin.
Could someone please provide a tool, npm module, or article that might assist me in accomplishing this?
Something like this but all the rectangles are resizeable and draggable
Thanks
you can use react shape editor
https://www.npmjs.com/package/react-shape-editor/v/4.0.0-alpha.2
Related
Our design team follow the iOS catalog app , the hint text of TextInputLayout is vertically center, but when I try Android it is not. I don't seem to find an option to make it. So why they are different ? Or there's some way to make it?
This is a bug with the implementation of TextInputLayout in the material design library. We have fixed this internally and will be releasing the updated component soon.
As a work around you may be able to set the padding on the child TextInputEditText to adjust it so it is centered.
I'm trying to highlight areas of an image like how you would on your mac or windows by dragging an area with the mouse in a React.js application.
I understand this would be best done on Canvas, by overlaying the canvas over the image, and then catch the mouse events and drawing the rectangle accordingly, is there a good library or something to do this? because writing raw code to implement this seem to be reinventing the wheel.
Thanks in advance.
Not sure if this is enough to warrant a full answer but I ran into a similar situation and this library is the best I could find:
react-sketch
Admittedly though it seems the maintainer is very unresponsive/not maintaining the package which is a bit concerning.
Hope this helps :)
There are some libraries .
you can choose https://daybrush.com/scena/
and some paid libraries
I'm currently putting together a PoC for the web. I've done about 9 years of iOS development so I think in those contexts/concepts. What I need to build is something similar to a UIScrollView/CATiledLayer for the web.
I need to build out a tool that allows users to build their own flowcharts, something I've already built on iOS. I'm prototyping on the web and I'm not sure where to get started. I've played around with a few canvas libraries thus far.
I want to build something that can have a fixed viewport with other components rendered off-screen. The viewport has fixed bounds that you can expand and allows me to put subcomponents in the view and move them around if I'd like to.
My web/javascript experience is pretty much Ember, React and plain old ES5/ES6. My HTML skills aren't that strong and I think I may have missed something fundamental.
My goal is to have something that can work with an existing react stack my company uses. I'm happy to roll my own solution but would love to get advice about the right direction to pursue. I feel like I have almost nil domain knowledge in this area.
This JS library, Dracula should be of great help to you since you're working with drag and drop flowcharts. You can see a working example here. NOTE: This lib is based on SVG and doesn't use canvas.
Here's another beautiful live demo: Source code for JS Flowchart here
Also take a look at this Dragon drop fiddle
And regarding ScrollView in HTML, you can simply use divs with css styles overflow-y: scroll and/or overflow-x: scroll. Using flex layouts, apart from giving you mobile-like development feel, will help you have so much control over your layouts based on the screen size.
Hope this should get you started.
I'm trying to do this animation (the pesto bruschetta)
I have a listView with a couple of cards with a specific width/height. and I need to make one fullScreen with additionnal information when I click on it (so with the onPress).
I'm using : react-native: 0.30.0 and react-native-router-flux: 3.33.0 for the routing between Scene/Activity
Anyone whould have an idea of how to do the fullscreen transformation?
Specifically to react-native-router-flux or not. I have tried using LayoutAnimation from react-native, but nothing was working (and the only exmaple i found online wasn't compiling)
read code for react-native-lightbox.
I'm looking for a way to draw an overlay. I want to create a small popup box in the bottom right corner to notify the user. I'm not sure what they are called, but I guess it's kinda like an overlay? I guess the easiest way to do this for me is in the winapi, but I'm not sure how. Anyone has a link I can read with more info, or maybe even code samples? Even the name of these notifications boxes would help so I can google better.
Thanks
don't know if it might help but you can try with sprite layers
http://msdn.microsoft.com/en-us/library/bb194908.aspx
I think these notifications are simply small windows with the WS_EX_TOPMOST style and an effect such as those provided by AnimateWindow().
Or if you don't want to do that much customization, maybe you can settle for a balloon tip from classic notification icons.