proton-native/docs/component_APIs/area_path.md

Area.Path

A component describing a path to be displayed in an Area component.

To be able to use percentage values in transforms, the props width and height need to be specified (they have no graphical effect).

import React, { Component } from 'react';

import { render, Window, App, Area } from 'proton-native';

class Example extends Component {
  render() {
    return (
      <App>
        <Window title="Example" size={{ w: 500, h: 500 }}>
          <Area>
            <Area.Path
              d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"
              stroke="red"
            />
            <Area.Path
              d="M10 10 H 90 V 90 H 10 Z"
              transform="translate(250, 20)"
              stroke="blue"
            />
          </Area>
        </Window>
      </App>
    );
  }
}

render(<Example />);

Props

• d
• fillMode
• (All props listed in Area Props)

Reference

d

A string describing the path (uses SVG's path syntax, explanation here).

A warning is displayed whan an unimplemented shaped are used (Quadratic Beziers and Arcs).

Type	Required
string	true

fillMode

Sets the methods how to determine wheter to fill a path. Explanation here.

Type	Required
enum('nonzero', 'evenodd')	true