### Rox

```bash
npm install mp-rox
yarn add mp-rox
```

### Demo

- json

```json
{
  "usingComponents": {
    "poster": "mp-rox/poster/poster"
  }
}
```

- wxml

```html

<view>
  <poster
          id="post"
          width="{{width}}"
          height="{{height}}"
          bg="#fff"
          items="{{items}}"
          catch:textBottom="getTextBottom"
  ></poster>
  <image src="{{imageSrc}}" wx:if="{{imageSrc}}"></image>
  <button catch:tap="getImage">get image</button>
  <button catch:tap="saveImage">save image</button>
</view>


```

- js

```js
const { windowWidth: width, windowHeight: height } = wx.getSystemInfoSync()
const canvasWidth = width - 10
const canvasHeight = height - 20

Page({
  data: {
    width: canvasWidth,
    height: canvasHeight,
    visible: true,
    imageSrc: '',
    items: [
      {
        image: 'https://qa-resource.roxmotor.com/images/634dfd79e4b002e1fc3d9a5d.jpg?imageView2/2/w/350/q/80',
        x: 0,
        y: 0,
        width: canvasWidth,
        height: canvasWidth,
      },
      {
        image: '/images/logo1.png',
        x: (canvasWidth - 80) / 2,
        y: (canvasWidth - 29 - 6),
        width: 80,
        height: 6,
      },
      {
        text: 'hello',
        x: 20,
        y: canvasWidth + 24,
        size: 30,
        family: 'bold',
        align: 'left',
        color: 'rgba(26, 23, 27, 1)',
      },
      {
        text: 'it is very good',
        x: 20,
        y: canvasWidth + 24 + 36 + 12,
        size: 14,
        align: 'left',
        family: 'bold',
        lineHeight: 24,
        color: 'rgba(26, 23, 27, 0.5)',
      },
      {
        image: '/images/logo2.png',
        x: 20,
        width: 92,
        height: 23,
        bottom: 12,
      },
      {
        image: '/images/qrcode.png',
        x: canvasWidth - 24 - 92,
        width: 92,
        height: 92,
        bottom: 12,
      },
    ],
  },
  
  getImage() {
    const instance = this.selectComponent('#post')
    const response = instance.getImagePath()
    this.setData({ imageSrc: response.image })
  },
  getTextBottom({ detail }) {
  },
  onLoad(options) {
    const { windowWidth, windowHeight } = wx.getSystemInfoSync()
    const height = windowHeight - 200
    this.data.items.filter(item => item.bottom !== undefined).forEach(item => {
      item.y = canvasHeight - item.bottom - item.height
    })
    this.setData({ items: this.data.items })
  },
  saveImage() {
    const ins = this.selectComponent('#post')
    ins.saveImage()
  },
})



```

# Generator Image By Component Instance Function -> drawImage

**Tip**: Both passing and changing the items property cause cavans to redraw, so you might not use the method: drawImage

```js
const instance = this.selectComponent('#post') // id -> post, you can use className
instance.getImagePath()  // get Image Path  response -> {image: ''}
```

# Events

- bind:getTextBottom -> get text position after fillText ( wrap words while words is too long, so you need to know the
  position that after fillText )
- bind:customAuthTip -> authorize
- bind:saveSuccess -> saveImage successfully

# Method

- getImagePath  -> get Image Path by <code> this.selectComponent('#post')?.getImagePath()</code>

# Properties

| property           | type            | default                | description                                                                       |
| ------------------ | --------------- |------------------------| --------------------------------------------------------------------------------- |
| bg                 | String          | rgba(255, 255, 255, 1) | canvas background / poster image background                                       |
| width              | Number / String | windowWidth            | canvas width                                                                      |
| height             | Number / String | windowHeight           | canvas height                                                                     |
| canvasStyle        | String          | ""                     | canvas Style (tip: use in development)                                            |
| saveSuccessTitle   | String          | ''                     | the title that save image successfully (do not show tip when value is null or '') |
| openSettingTitle   | String          | ''                       | the modal title that no permission                                                |
| openSettingContent | String          | ''              | the modal content that no permission                                              |
| [items](#items)    | Array           | []                     | canvas content info                                                               |


**Tip**: Both passing and changing the items property cause cavans to redraw, so you might not use the method: drawImage

### <span id="items">Prop items</span>

| property   | type            | description                              |
|------------|-----------------|------------------------------------------|
| image      | String          | image path                               |
| x          | Number          | position                                 |
| y          | Number          | position                                 |
| width      | Number          | image width / text max width             |
| height     | Number          | image height                             |
| radius     | String / Number | image radius                             |
| line       | Number          | text line                                |
| lineHeight | Number          | text lineHeight (usefully if wrap words) |
| text       | String          | content                                  |
| size       | Number          | content fontSize                         |
| align      | String          | text align type                          |
| color      | String          | text color                               |