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 (
position: "absolute",
width: "300px",
height: "300px",
backgroundColor: "#1a1a1a",
fontFamily: "sans-serif"
}}
>
widthInPx={300}
heightInPx={300}
onChange={this.onChange}
measureLine={this.measureLine}
measureCircle={this.measureCircle}
/>
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