Component

Abstract class for visual component of a scene.

Installation

npm install @pencil.js/component

Examples

import Component from "@pencil.js/component";

class FunnyShape extends Component {
    /**
     * @override Component.prototype.render
     */
    render (ctx) {
        // Do crazy stuff here
    }
}

ComponentOptions

Inherit from ContainerOptions.

| Name | Type | Default | Comment | | ---- | ---- | ------- | ------- | |fill |Color or String |"#000" |Background Color used to fill, set to null for transparent | |stroke |Color 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 |new Position() |Relative offset | |shadow |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 |new Position() |Position of the shadow relative to the component | |color |Color or String |null |Color of the shadow |