The project preferable developed using react-konva.
But let me know if you have some alternatives to suggest.
React component requirements:
* shows specified grayscale image (main image)
* shows transparent color rect with text
* shows fixes which are pngs with transparent/white its pos/center
* allows scale and navigation
Navigation:
* allows to scale image by mouse wheel (or +/-) (uses set of percens):
25, 33, 50, 67, 75, 80, 90, 100, 110, 125, 150, 175, 200, 250, 300, 500
* allows to scale image same way and with ctrl pressed uses step of 10%
* allows to navgate image using mouse button with ctrl (or middle button)
Shows rect:
* rect have transparent border and more transparent filling (some color)
* able to create rect by clicking one place and release another place
* text with same as border color near of the rect (with some default text)
* mark one rect in internal state as selected by clicking mouse
* change text of rect via input appears near the rect
* text edition begins after click on selected rect, edition fished by enter
* able to move rect using mouse
* able to resize rect draging by edge
Image Fixes Entity:
* the fix is an image with transparent and black
* the fix has center provided by cx,cy
* the fix has position of its center on main image x,y
* fixes are representing as array of {png, x, y, cx, cy}
Show fixes:
* "apply mode" - perform fixing of blurs of main image,
actually this shows fixes uses white color, so white pixels
of each fix zap the pixels on main image (make it white)
transparent pixels of fix leave pixels of main image untouched
* "highlight mode" - same as "apply mode" but shows all fixes in magenta
* mark one rect in internal state as selected by clicking mouse
* selected fix is shown in red color
Component minimal required props
* mode: 'apply', 'highlight', 'rect', ...
* onClick: ({x,y}) coordinates on (workspace) base image (incapsulated scale)
* image: base image
* rects: array of rect descriptors {_id, x,y, width, height, text}
* rectsUpdate: update rect list on change
* fixes: array of fixes {_id, png, x, y, cx, cy}
* fixesUpdate: update rect list on change
Hi, it's Alexandr. The execution time was set with a margin to practice with react-konva. And on Sunday I have a day off if this is not a very urgent project.
Hi there, I’ve read your brief and can see that you’d like to done a project. My team has 8 years experience designing and developing mobile apps for iPhone and Android and web apps. I would approach your project by starting with wireframes and getting the design completed, before starting the actual development phase. I am highly qualified for this project and would love to speak with you further about taking this project on. If you'd like to view my previous work, take a look at my Portfolio.
Hi
I'm very dedicated towards my work. I believe that I will be able to meet the deadline and requirements of this project within the stipulated time frame. Looking forward to this opportunity.