BenJeau / react-native-draw

SVG based data-driven React Native drawing component 🎨
https://www.npmjs.com/package/@benjeau/react-native-draw
MIT License
127 stars 42 forks source link

Able to draw out of height and width #78

Open nijarv opened 1 year ago

nijarv commented 1 year ago

On what kind of device are you using this library?

Environment

- OS: macOS Ventura
- react-native: 0.70.4
- @benjeau/react-native-draw: 0.8.3
- @benjeau/react-native-draw-extras: 0.2.2

Current Behavior

I'm developing an app for drawing above an image, I have restricted the canvas height and width but I can draw more than the specified height and width.

Code:

<View style={{ height: '60%, width: '100%', paddingHorizontal: 16 }}>
            <FastImage
                style={{ height: '100%', width: '100%' }}
                source={{ uri: image.uri }}
                resizeMode={FastImage.resizeMode.contain}
            />

            <Canvas
                enabled={isEditing}
                ref={canvasRef}
                style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, backgroundColor: 'transparent' }}
                color={color}
                thickness={thickness}
                opacity={opacity}
                tool={DrawingTool.Brush}
                onPathsChange={setPaths}
            />
</View>

Sample Video:

https://user-images.githubusercontent.com/84722936/226907436-95a15c8f-93aa-44bf-b241-6b659e4c4e47.mov

Expected Behavior

I should be able to restrict drawing height to the view's height and width. I need something like this UI part I can take care. Just that drawing part alone I'm facing issues.

https://user-images.githubusercontent.com/84722936/227951680-f556f280-cd9c-49b9-a7f3-a11024878652.MP4

Steps To Reproduce

You can check my above code in the current behavior section.

Anything else?

No response

nijarv commented 1 year ago

Hey guys, any solution?