Area.Gradient

A class describing a gradient to be used as a fill or stroke brush as a fill or stroke prop (see Area Props).

import React, { Component } from 'react';
import { render, App, Window, Box, Area } from 'proton-native';

const linearGradient = Area.Gradient.createLinear(30, 30, 100, 100, {
  0: 'red',
  1: 'blue',
});

class Example extends Component {
  render() {
    return (
      <App>
        <Window title="Example" size={{ w: 500, h: 500 }}>
          <Box>
            <Area>
              <Area.Rectangle
                x="20"
                y="20"
                width="110"
                height="110"
                stroke={linearGradient}
                strokeWidth="20"
                strokeOpacity="50"
              />
            </Area>
          </Box>
        </Window>
      </App>
    );
  }
}

render(<Example />);

Static methods

createLinear(x1, y1, x2, y2, stops)
createRadial(x, y, r, stops)
createRadial(x, y, x_r, y_r, r, stops)

Reference

createLinear(x1, y1, x2, y2, stops)

Returns a gradient brush for a linear gradient between the start point (x1, y1) and end point (x2,y2) with the specified color stops.

stops is a object with keys specifying the position between the start (= 0.0) and end points (= 1.0). Example:

{
    0: "red",
    0.25: "#ff00ff",
    1: "green"
}

Parameter	Type	Required
x1	Number	Yes
y1	Number	Yes
x2	Number	Yes
y2	Number	Yes
stops	Object<Number, Color>	Yes

createRadial(x, y, r, stops)

Returns a gradient brush for a radial gradient between the center point (x,y) and the circle with radius r.

stops is a object with keys specifying the position between the center point (with 0.0) and the circle itself (1.0). Example:

{
    0: "red",
    0.25: "#ff00ff",
    1: "green"
}

Parameter	Type	Required
x1	Number	Yes
y1	Number	Yes
r	Number	Yes
stops	Object<Number, Color>	Yes

createRadial(x, y, x_r, y_r, r, stops)

Returns a gradient brush for a radial gradient between the point (x,y) and a circle with radius r and center (x_r,y_r). (This can produce asymetric gradients.)

stops is a object with keys specifying the position between the first point (with 0.0) and the outer circle (1.0). Example:

{
    0: "red",
    0.25: "#ff00ff",
    1: "green"
}

Parameter	Type	Required
x1	Number	Yes
y1	Number	Yes
x_r	Number	Yes
y_r	Number	Yes
r	Number	Yes
stops	Object<Number, Color>	Yes

3.5 KiB Raw Permalink Blame History