pencil.js
Version:
Nice modular interactive 2D drawing library.
39 lines (28 loc) • 1.33 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 |
|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 |