20

Cross-platform React Native drawing component based on SVG

 4 years ago
source link: https://reactnativeexample.com/cross-platform-react-native-drawing-component-based-on-svg/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

@benjeau/react-native-draw

Cross-platform React Native drawing component based on SVG.

react-native-draw

Example application with React Native performance overlay

Installation

npm install @benjeau/react-native-draw
# or
yarn add @benjeau/react-native-draw

Also, you need to install react-native-gesture-handler, @react-native-community/slider and react-native-svg, and follow their installation instructions.

Usage

import React from 'react';
import { Draw, DrawRef } from "@benjeau/react-native-draw";

export default function App() {
  const drawRef = useRef<DrawRef>(null);

  const removeLastPath = () {
    drawRef.current.?undo();
  }

  const clearDrawing = () {
    drawRef.current.?clear();
  }

  // ... for more ref functions, look below

  return (
    <Draw
      ref={drawRef}
      initialThickness={20}
      initialOpacity={0.5}
      initialDrawing ={[]}
      canvasContainerStyle={{ elevation: 0, backgroundColor: "red" }}
    />
  )
}
React TSX

Props

None of the following props are required

name description type default colors Color palette colors, specifying the color palette sections each containing rows of colors string[][][] DEFAULT_COLORS initialThickness Initial thickness of the brush strokes number 3 initialOpacity Initial opacity of the brush strokes number 1 initialDrawing Paths to be already drawn PathType[] [] canvasContainerStyle Override the style of the container of the canvas StyleProp

onPathsChange Callback function when paths change (paths: PathType[]) => any

name description type undo Undo last brush stroke () => void clear Removes all brush strokes () => void getPaths Get brush strokes data () => PathType[] addPath Append a path to the current drawing paths (path: PathType) => void

GitHub

SVG based React Native drawing component — Read More

Latest commit to the master branch on 12-22-2020
Download as zip

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK