two-dimensions-graphic
Version:
Multi layers two dimensions graphic tool with canvas and SVG.
146 lines (94 loc) • 2.77 kB
Markdown
Base canvas items
# CanvasItem
Abstract canvas item class
Server
```javascript
import { items } from 'two-dimensions-graphic';
const { CanvasItem } = items.canvas;
undefined
```
Browser
```javascript
const { CanvasItem } = TDG.items.canvas;
undefined
```
## CanvasItem.constructor([options])
- `options` {Object} - Options.
- `options.stroke` {boolean} - Whether stroke object or not (default true).
- `options.fill` {boolean} - Whether fill object or not.
- `options.flatParams` {Object} - Canvas 2d context flat params.
- `options.byMethodParams` {Object} - Canvas 2d context methods to set params (key is method name, value is array of args).
```javascript
var ci1 = new CanvasItem({
... fill: true,
... flatParams: {
..... fillStyle: 'green',
..... strokeStyle: 'black',
..... },
... byMethodParams: {
..... setLineDash: [[2, 2]],
..... },
... });
undefined
ci1.stroke;
true
ci1.fill;
true
ci1.flatParams;
{ fillStyle: 'green', strokeStyle: 'black' }
ci1.byMethodParams;
{ setLineDash: [ [ 2, 2 ] ] }
```
## CanvasItem.stroke
Stroke getter.
## CanvasItem.stroke(value)
Stroke setter.
- `value` {boolean} - Whether stroke object or not.
## CanvasItem.fill
Fill getter.
## CanvasItem.fill(value)
Fill setter.
- `value` {boolean} - Whether fill object or not.
## CanvasItem.flatParams
Flat params getter.
## CanvasItem.flatParams(value)
Flat params setter.
Use setFlatParam method to set particular param.
- `value` {Object} - Canvas 2d context flat params.
## CanvasItem.byMethodParams
By method params getter.
## CanvasItem.byMethodParams(value)
By method params setter.
Use setByMethodParam method to set particular param.
- `value` {Object} - Canvas 2d context methods to set params (key is method name, value is array of args).
## CanvasItem.commands
Path commands getter.
## CanvasItem.path
Path commands value getter.
## CanvasItem.layer
Layer getter.
## CanvasItem.layer(value)
Layer setter.
- `value` {CanvasLayer} - Layer.
## CanvasItem.draw()
Draw item path in item layer.
## CanvasItem.setFlatParam(name, value)
Set flat param.
- `name` {string} - Name of canvas 2d context flat param.
- `value` {*} - Value of canvas 2d context flat param.
```javascript
ci1.setFlatParam('strokeStyle', 'white');
undefined
ci1.flatParams;
{ fillStyle: 'green', strokeStyle: 'white' }
```
## CanvasItem.setByMethodParam(name, args)
Set by method param.
- `name` {string} - Name of canvas 2d context method to set params.
- `args` {*} - Array of arguments of canvas 2d context method to set params.
```javascript
ci1.setByMethodParam('setLineDash', [[1, 4]]);
undefined
ci1.byMethodParams
{ setLineDash: [ [ 1, 4 ] ] }
```