Rox

npm install mp-rox
yarn add mp-rox

Demo

• json

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

• wxml

<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

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

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 this.selectComponent('#post')?.getImagePath()

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 | Array | [] | canvas content info |

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

Prop items

| 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 |