A React component for measuring & annotating images.
npm install react-measurementsA React component for measuring & annotating images.
Check out the demo here.
``javascript
import React from "react";
import {
MeasurementLayer,
calculateDistance,
calculateArea
} from "react-measurements";
class App extends React.Component {
state = { measurements: [] };
render() {
return (
onChange = measurements => this.setState({ ...this.state, measurements });
measureLine = line => Math.round(calculateDistance(line, 100, 100)) + " mm";
measureCircle = circle =>
Math.round(calculateArea(circle, 100, 100)) + " mm²";
}
``
The component is currently read-only on mobile. A mouse is required to create and edit measurements.
MIT