pencil.js
Version:
Nice modular interactive 2D drawing library.
40 lines (29 loc) • 2.89 kB
Markdown
# Component
Abstract class for visual component of a scene.
## Examples
```js
import { Component } from "pencil.js";
class FunnyShape extends Component {
render (ctx) {
// Do crazy stuff here
}
}
```
## ComponentOptions
Inherit from [ContainerOptions](../container/readme.md#containeroptions).
| Name | Type | Default | Comment |
|-------------|-----------------------------------------|-----------------------------|--------------------------------------------------------------------------------------------------------|
| fill | [Color](../color/readme.md) or `String` | `"#000"` | Background Color used to fill, set to null for transparent |
| stroke | [Color](../color/readme.md) or `String` | `null` | Color used to stroke, set to null for transparent |
| strokeWidth | `Number` | `2` | Stroke line thickness in pixels |
| dashed | `Boolean` or `Array` | `false` | Should the line be dashed, you can also specify the dash pattern (ex: [4, 4] or Component.dashes.dots) |
| cursor | `String` | `Component.cursors.default` | Cursor to use when hover |
| join | `String` | `Component.joins.miter` | How lines join between them |
| origin | [`Position`](../position) | `new Position()` | Relative offset |
| shadow | [`ShadowOptions`](#shadowoptions) | (see below) | Set of options to set a shadow |
## ShadowOptions
| Name | Type | Default | Comment |
|----------|-----------------------------------------|------------------|--------------------------------------------------|
| blur | `Number` | `0` | Spread of the shadow around the component |
| position | [`Position`](../position) | `new Position()` | Position of the shadow relative to the component |
| color | [Color](../color/readme.md) or `String` | `null` | Color of the shadow |