svelte-rough

    0.2.0 • Public • Published

    rough-svelte

    The incredible roughjs coerced into svelte components.

    <RoughSVG | RoughCanvas {width} {height} {viewBox} {options} />

    You need one of these as the container. You can pass it width, height, viewBox and, options. options should be a roughjs options object.

    <script>
      import { RoughSVG } from 'rough-svelte/svg';
    </script> 
     
    <RoughSVG width="100" height="200" options="{{fill: 'red'}}">
      <!-- fun goes here -->
    </RoughSVG>

    <Line points={[x1, y1, x2, y2]} {options} />

    Draws a line from x1 - y1 to x2 - y2.

    <script>
      import { Rough, Line } from 'rough-svelte';
    </script> 
     
    <Rough width="100" height="200">
      <Line
        points="{[10, 10, 190, 10]}"
        options="{{stroke: 'cadetblue', strokeWidth: 0.8}}"
      />
    </Rough>

    rectangle (x, y, width, height [, options])

    Draws a rectangle with the top-left corner at (x, y) with the specified width and height.

    <script>
      import { RoughSVG, RoughRectangle } from 'rough-svelte/svg';
    </script> 
     
    <RoughSVG width="100" height="100" options="{{fill: 'red'}}">
      <RoughLine
        x="10"
        y="10"
        width="80"
        height="80"
        options="{{stroke: 'cadetblue', strokeWidth: 0.8}}"
      />
    </RoughSVG>

    ellipse (x, y, width, height [, options])

    Draws an ellipse with the center at (x, y) and the specified width and height.

    <script>
      import { RoughSVG, RoughEllipse } from 'rough-svelte/svg';
    </script> 
     
    <RoughSVG width="100" height="100" options="{{fill: 'red'}}">
      <RoughLine
        x="50"
        y="50"
        width="80"
        height="40"
        options="{{stroke: 'cadetblue', strokeWidth: 0.8}}"
      />
    </RoughSVG>

    circle (x, y, diameter [, options])

    Draws a circle with the center at (x, y) and the specified diameter.

    <script>
      import { RoughSVG, RoughEllipse } from 'rough-svelte/svg';
    </script> 
     
    <RoughSVG width="100" height="100" options="{{fill: 'red'}}">
      <RoughLine
        x="50"
        y="50"
        diameter="80"
        height="80"
        options="{{stroke: 'pink', strokeWidth: 5}}"
      />
    </RoughSVG>

    linearPath (points [, options])

    Draws a set of lines connecting the specified points.

    points is an array of points. Each point is an array with 2 values - [x, y]

    roughCanvas.linearPath([[690, 10], [790, 20], [750, 120], [690, 100]]);

    polygon (vertices [, options])

    Draws a polygon with the specified vertices.

    vertices is an array of points. Each point is an array with 2 values - [x, y]

    roughCanvas.polygon([[690, 130], [790, 140], [750, 240], [690, 220]]);

    arc (x, y, width, height, start, stop, closed [, options])

    Draws an arc. An arc is described as a section of en ellipse. x, y represent the center of that ellipse. width, height are the dimensions of that ellipse.

    start, stop are the start and stop angles for the arc.

    closed is a boolean argument. If true, lines are drawn to connect the two end points of the arc to the center.

    roughCanvas.arc(350, 300, 200, 180, Math.PI, Math.PI \* 1.6, true);
    roughCanvas.arc(350, 300, 200, 180, 0, Math.PI / 2, true, {
    stroke: 'red', strokeWidth: 4,
    fill: 'rgba(255,255,0,0.4)', fillStyle: 'solid'
    });
    roughCanvas.arc(350, 300, 200, 180, Math.PI / 2, Math.PI, true, {
    stroke: 'blue', strokeWidth: 2,
    fill: 'rgba(255,0,255,0.4)'
    });

    curve (points [, options])

    Draws a curve passing through the points passed in.

    points is an array of points. Each point is an array with 2 values - [x, y]

    Rough.js sine wave

    // draw sine curve
    let points = [];
    for (let i = 0; i < 20; i++) {
      let x = (400 / 20) * i + 10;
      let xdeg = (Math.PI / 100) * x;
      let y = Math.round(Math.sin(xdeg) * 90) + 500;
      points.push([x, y]);
    }
    roughCanvas.curve(points, {
      stroke: 'red',
      strokeWidth: 3,
    });

    path (d [, options])

    Draws a path described using a SVG path data string.

    roughCanvas.path('M37,17v15H14V17z M50,0H0v50h50z');
    roughCanvas.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', {
      fill: 'green',
    });

    One of the options you can pass in to the path method is simplification which tries to reduce the number of points in the path, thereby simplifying it. This is great for drawing complex paths like maps. simplification is a number between 0 and 1.

    draw (drawable)

    Draws the drawable object passed in.

    Read more about it here.

    Keywords

    none

    Install

    npm i svelte-rough

    DownloadsWeekly Downloads

    4

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    875 kB

    Total Files

    31

    Last publish

    Collaborators

    • evilpingwin