Create document flow in canvas
Tags: javascript, frontend, canvas, css
Published: 2020-10-14 02:45:25


# Introduction
Use the render function to create a document flow in the canvas and quickly implement the layout.
> [Respontory](https://github.com/Gitjinfeiyang/easy-canvas)
>
> If there is a problem in use, check the code in the example, click to view [DEMO](https://gitjinfeiyang.github.io/easy-canvas/example/)
>
> [Try it in CodePen](https://codepen.io/Fiyoung/pen/pobvWRa?editors=1010)
>

- vue component [vue-easy-canvas](https://github.com/Gitjinfeiyang/vue-easy-canvas)
- Support document flow, refer to web, no need to set x, y, width and height
- Compatible with small programs and web, no third-party dependencies
- Support componentization, global components and local components
- Support events
- High performance, scroll-view supports dirty rectangles and only draws the visible part
- Support operation element, similar to operation dom to modify document flow

## Supporting elements
- [x] `view` basic element, similar to div
- [x] `text` text supports automatic line wrapping and over omitted functions, currently text is implemented as inline-block
- [x] ʻimage` image `src` `mode` supports aspectFit and aspectFill, other css features are the same as web support `load` event to monitor image loading and drawing completion
- [x] `scroll-view` scroll container, you need to set `direction` in the style to support x, y, xy, and set the specific size. Set `renderOnDemand` to draw only the visible part

## Styles
Use numbers where the attribute uses pixels

- [x] `display` block | inline-block | flex, text is inline by default
- [x] `width` auto 100% Number This box model uses border-box and cannot be modified
- [x] `height`
- [x] `flex` flex does not support auto, use width directly for fixed width
- [x] `minWidth` `maxWidth` `minHeight` `maxHeight` If the specific width is set, the height will not take effect
- [x] `margin` `marginLeft`,`marginRight`,`marginTop`,`marginBottom` margin supports array abbreviations such as [10,20] [10,20,10,20]
- [x] `paddingLeft`,`paddingRight`,`paddingTop`,`paddingBottom` Same as above
- [x] `backgroundColor`
- [x] `borderRadius`
- [x] `borderWidth` `borderTopWidth` ... Set the thin border directly to 0.5
- [x] `borderColor`
- [x] `lineHeight` font related only valid in text
- [x] `color`
- [x] `fontSize`
- [x] `textAlign` left right center
- [x] `textIndent` Number
- [x] `verticalAlign` top middle bottom
- [x] `justifyContent` flex-start center flex-end flex layout align horizontally
- [x] ʻalignItems` flex-start center flex-end flex layout align it vertically
- [x] `maxLine` maximum number of lines, exceeding the automatic ellipsis, only supports use in text
- [x] `whiteSpace` normal nowrap controls line breaks, not fonts
- [x] ʻoverflow` hidden If rounded corners are added, hidden will be added automatically
- [] `flexDirection`
- [x] `borderStyle` dash Array See ctx.setLineDash() for details
- [x] `shadowBlur` set the shadow will automatically add overflow:hidden;
- [x] `shadowColor`
- [x] `shadowOffsetX`
- [x] `shadowOffsetY`
- [x] `position` `static` ʻabsolute`
- [x] ʻopacity` `Number`


## Installation

``` bash
npm install easy-canvas-layout --save
```

## Usage

### Basic

``` javascript
    import easyCanvas from'easy-canvas-layout'

    // create a layer bind with ctx
    const layer = easyCanvas.createLayer(ctx, {
      dpr: 2,
      width: 300,
      height: 600,
    })

    // create a node tree
    // c(tag,options,children)
    const node = easyCanvas.createElement((c) => {
      return c('view', {
        styles: {backgroundColor:'#000' }, // style
        attrs:(), // attributes such as src
        on:{} // events such as click load
      },
      [
        c('text',{color:'#fff'},'Hello World')
      ])
    })

    // mount
    node.mount(layer)

```
### Register Component

``` javascript
    ...

    function button(c,text){
      return c(
        'view',
        {
          styles: {
            backgroundColor:'#ff6c79',
            borderRadius: 10,
            borderColor:'#fff',
            display:'inline-block',
            margin: 2,
            padding:[0,10]
          },
        },
        [
          c(
            'text',
            {
              styles: {
                lineHeight: 20,
                color:'#fff',
                textAlign:'center',
                fontSize: 11,
              },
            },
            text
          ),
        ]
      )
    }

    easyCanvas.component('button',(opt,children,c) => button(c,children))

    const node = easyCanvas.createElement((c) => {
      return c('view',{},[
        c('button',(),'This is a global component')
      ])
    })

    ...

```