mp-rox

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