I'm building an image editor using NextJS, Konva and Redux. I've got a Redux state that saves data for each image, and then sends it down as 'data'. I want to let users crop images among other things.
this is a part of my image component. data, brightness, contrast and blur are sent from Redux
<>
<Image
ref={imageRef}
x={data.x}
y={data.y}
scaleX={data.scaleX}
scaleY={data.scaleY}
image={image}
width={data.width}
height={data.height}
filters={[Konva.Filters.Brighten, Konva.Filters.Contrast, Konva.Filters.Blur,]}
brightness={brightness ? brightness.value / 100 : 0}
contrast={contrast ? contrast.value : 0}
blurRadius={blur ? blur.value : 0}
I am able to modify things like brightness, width etc. without any problems but when I want to crop the image things don't work.
.
This is the Konva stage on the right and the crop button (among the others) on the left (separate react components)
When I click on crop a transformer appears that can be moved around
After someone clicks 'Save Crop' the image should be cropped based on the X, Y, width and height of that transformer.
I've tried to call layer.draw() and image.draw() after the cropping is over but to no avail. I've also using the 4 separate properties for cropping (cropX, cropY, cropWidth, cropHeight) but that didn't work either.
So how would I be able to update my image crop values with the image changing?
Related
I am currently trying to transition through an array of images using webgl shaders and react three fiber and I am stuck. Trying to use buttons to navigate through rather than just clicking on the canvas. Unsure how to pass / change imageOne and imageTwo with left and right arrow. Is this possible?
I'm aware how to do an image slider in react alone but confused with the two image properties for the glsl mix property. All help is appreciated.
Inspiration: https://yuta-takahashi.dev/
Sandbox: https://codesandbox.io/s/snowy-cdn-os34di?file=/pages/index.js
I want to have a button in my React Native project, which should open a modal popup on click. However, I would like the modal to be of the same "material" as the button and opens with a fluid animation where the button becomes the modal. I created the SVG path's d attributes, resulting in the following two states of the path:
TRY 1
Now I add an Animated API animation, but unfortunately, nothing happens and I guess it is just because there is nothing to interpolate with as the d attribute is a string, but I need a number that can be interpolated somehow.
TRY 2
So another try of mine was to create the circle's path with the same amount of vertices as the modal path and then use the coordinates values to interpolate. However, I am using Inkscape to export the SVG's, but the resulting d attribute of the circle does not match with the modal one in terms of not having same SVG commands (e.g. such as vertical line v or bezier curve s).
Question
So I would be happy if anybody knows a way of animating an SVG path in the way described. Be it by using a library that I missed until now or by manipulating the SVG in a way that I can use it to interpolate the values with the React Native Animated API.
I am working on a travel app where I have to show the travel plan with drop-down as shown in the image, I don't know how to create these circles joined with dotted line...
If I expand a plan, the respective dotted line expands with it.
How do I code that in React Native?
Image is taken from bookmundi
I have used native base, dropdown component, but I need these circles and lines styling too.
I want to build a website with React on which you can select different parts of a body. I would like to ask for your opinion what would be the best possibility for that? How can I highlight different parts of the body and make them clickable?
I would image a screen like this where I can press e.g. an arm, leg, head etc.:
Thank you for your help!
You will need two images.
Original colour body shape ( let's call this passive state ).
Active colour body shape.
Create a grid of rectangles on top of passive state image according to body parts, slice the active body shape image and put in rectangles as background images and set the image size to 0. On hover just set the size of the image to the original value.
I know there are some packages that let you create a blur view, but they all have sharp edges. There is also a blurRadius prop for the Image component, but it also renders an image with sharp edges.
How can I achieve a blurred image without sharp edges?
So I can achieve an effect like: https://www.invisionapp.com/blog/ios-10-style-shadows-sketch/