compodraw-instructs v1.0.0

Basic CompoDraw JS Drawing Instructions

Provides essential instructs for CompoDrawJS. With this instructs package, you can compose and draw basic shapes and visual effects like rectangle, ellipse, crop, move, rotate, and more.

How to Install

1. Make sure CompoDrawJS already installed.
2. Add to your project with Yarn:

   yarn add compodraw-instructs

   or with NPM:

   npm install compodraw-instructs --save

   or you can download the bundled JavaScript file for plain HTML or PHP project
3. That's it! for more info, see reference below.

References

Crop

The fast way to remove excessive drawing. If you want cut other than in square, use Mask instead.

<crop
  x="0"  width="128"
  y="0"  height="128">

  <!-- Other instructs here... -->

</crop>

Elevate

Like shadow, but you just have to set depth value to create realistic drop shadow.

<elevate
  depth="4" angle="0">

  <!-- Other instructs here... -->

</elevate>

Ellipse

Draw an ellipse shape.

<ellipse
  x="0"  width="100"
  y="0"  height="100"
  color="#000000"
/>

EllipseStroke

Draw an ellipse outline.

<ellipse-stroke
  x="0"  width="100"
  y="0"  height="100"
  color="#000000"
  thickness="1"
/>

GradientLinear

Fills linear gradient color to the containing shape.

<gradient
  startX="0"  endX="100"
  startY="0"  endY="100"
  points={0.0: "#000000", 1.0: "#ffffff"}>

  <!-- Other instructs here... -->

</gradient>

or

<gradient-linear
  startX="0"  endX="100"
  startY="0"  endY="100"
  points={0.0: "#000000", 1.0: "#ffffff"}>

  <!-- Other instructs here... -->

</gradient-linear>

GradientRadial

Fills radial gradient color to the containing shape.

<gradient-radial
  x="0" y="0" radius="100"
  points={0.0: "#000000", 1.0: "#ffffff"}>

  <!-- Other instructs here... -->

</gradient-radial>

Group

Stacks multiple instructions into one.

<group>
 <!-- Other instructs here... -->
</group>

Image

Draw a fully loaded image, you have to make sure the source is completely downloaded before draw.

<image
  source={...}
  x="0"  width="0"
  y="0"  height="0"
/>

Mask

Like crop but you can use custom shape.

<mask
  shape={...}
  allowIntersect="false">

  <!-- Other instructs here... -->

</mask>

Move

Add offset as big as (x, y) point.

<move x="0" y="0">
  <!-- Other instructs here... -->
</move>

Path

Draw custom shape based on array of vertices.

<path
  x="0"  width="NaN"
  y="0"  height="NaN"
  color="#000000">

  x: 10, y: 10;
  x: 10, y: 30, smooth;
  x: 30, y: 10;

</path>

PathStroke

Draw custom line path based on array of vertices.

<path-stroke
  x="0"  width="NaN"
  y="0"  height="NaN"
  color="#000000"
  thickness="1"
  sharp="false"
  autoConnect="false">

  x: 10, y: 10;
  x: 10, y: 30, smooth;
  x: 30, y: 10;

</path-stroke>

Rectangle

Draw a rectangle shape.

<rectangle
  x="0"  width="100"
  y="0"  height="100"
  color="#000000"
/>

RectangleStroke

Draw a rectangle shape.

<rectangle-stroke
  x="0"  width="100"
  y="0"  height="100"
  color="#000000"
  thickness="1"
  sharp="false"
/>

RectangleRound

Draw a rounded rectangle shape.

<rectangle-round
  x="0"  width="100"
  y="0"  height="100"
  color="#000000"
  cornerRadius="16"
/>

RectangleRoundStroke

Draw a rounded rectangle outline.

<rectangle-round-stroke
  x="0"  width="100"
  y="0"  height="100"
  color="#000000"
  cornerRadius="16"
  thickness="1"
/>

Rotate

Add angle of rotation with specified center point.

<rotate
  x="0" y="0"
  angle="0">

  <!-- Other instructs here... -->

</rotate>

Scale

Multiple the size of drawn graphics.

<scale x="1" y="1">
  <!-- Other instructs here... -->
</scale>

Shadow

Give customizable shadow effects to drawn graphics.

<shadow
  blur="8"
  color="rgba(0,0,0,0.32)"
  x="4" y="4">

  <!-- Other instructs here... -->

</shadow>

Text

Draw multiline or a single line of text with default fonts.

WARNING: If you are using JSX, put \n at the end of every line of text because JSX cannot recognize line-break automatically.

<text
  x="0" size="18"
  y="0" align="left"
  style="bold|italic"
  color="#000000">

  Lorem Ipsum
  Dolor Amet

</text>

TextStroke

Draw outlined multiline or a single line of text.

WARNING: If you are using JSX, put \n at the end of every line of text because JSX cannot recognize line-break automatically.

<text-stroke
  x="0" size="18"
  y="0" align="left"
  style="bold|italic"
  color="#000000"
  thickness="1">

  Lorem Ipsum
  Dolor Amet

</text-stroke>

Transparent

Set transparency of specific drawing.

<transparent value="1">
  <!-- Other instructs here... -->
</transparent>