盗墓笔记,懒人听书,神墓辰东小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

創(chuàng)新互聯(lián)小程序教程：微信小程序擴(kuò)展組件·繪制canvas

wxml-to-canvas

小程序內(nèi)通過靜態(tài)模板和樣式繪制 canvas ，導(dǎo)出圖片，可用于生成分享圖等場景。

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比樂陵網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式樂陵網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋樂陵地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴。

使用方法

Step1. npm 安裝

npm install --save wxml-to-canvas

Step2. JSON 組件聲明

{
  "usingComponents": {
    "wxml-to-canvas": "wxml-to-canvas",
  }
}

Step3. wxml 引入組件

Step4. js 獲取實(shí)例

const {wxml, style} = require('./demo.js')
Page({
  data: {
    src: ''
  },
  onLoad() {
    this.widget = this.selectComponent('.widget')
  },
  renderToCanvas() {
    const p1 = this.widget.renderToCanvas({ wxml, style })
    p1.then((res) => {
      this.container = res
      this.extraImage()
    })
  },
  extraImage() {
    const p2 = this.widget.canvasToTempFilePath()
    p2.then(res => {
      this.setData({
        src: res.tempFilePath,
        width: this.container.layoutBox.width,
        height: this.container.layoutBox.height
      })
    })
  }
})

wxml 模板

支持 view、text、image 三種標(biāo)簽，通過 class 匹配 style 對象中的樣式。


  
  
  
    yeah!

樣式

對象屬性值為對應(yīng) wxml 標(biāo)簽的 cass 駝峰形式。需為每個元素指定 width 和 height 屬性，否則會導(dǎo)致布局錯誤。

存在多個 className 時，位置靠后的優(yōu)先級更高，子元素會繼承父級元素的可繼承屬性。

元素均為 flex 布局。left/top 等僅在 absolute 定位下生效。

const style = {
  container: {
    width: 300,
    height: 200,
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: '#ccc',
    alignItems: 'center',
  },
  itemBox: {
    width: 80,
    height: 60,
  },
  red: {
    backgroundColor: '#ff0000'
  },
  green: {
    backgroundColor: '#00ff00'
  },
  blue: {
    backgroundColor: '#0000ff'
  },
  text: {
    width: 80,
    height: 60,
    textAlign: 'center',
    verticalAlign: 'middle',
  }
}

接口

f1. renderToCanvas({wxml, style}): Promise

渲染到 canvas，傳入 wxml 模板和 style 對象，返回的容器對象包含布局和樣式信息。

f2. canvasToTempFilePath({fileType, quality}): Promise

提取畫布中容器所在區(qū)域內(nèi)容生成相同大小的圖片，返回臨時文件地址。

fileType 支持 jpg、png 兩種格式，quality 為圖片的質(zhì)量，目前僅對 jpg 有效。取值范圍為 (0, 1]，不在范圍內(nèi)時當(dāng)作 1.0 處理。

支持的 css 屬性

布局相關(guān)

屬性名	支持的值或類型	默認(rèn)值
width	number	0
height	number	0
position	relative, absolute	relative
left	number	0
top	number	0
right	number	0
bottom	number	0
margin	number	0
padding	number	0
borderWidth	number	0
borderRadius	number	0
flexDirection	column, row	row
flexShrink	number	1
flexGrow	number
flexWrap	wrap, nowrap	nowrap
justifyContent	flex-start, center, flex-end, space-between, space-around	flex-start
alignItems, alignSelf	flex-start, center, flex-end, stretch	flex-start

支持 marginLeft、paddingLeft 等

文字

屬性名	支持的值或類型	默認(rèn)值
fontSize	number	14
lineHeight	number / string	'1.4em'
textAlign	left, center, right	left
verticalAlign	top, middle, bottom	top
color	string	#000000
backgroundColor	string	transparent

lineHeight 可取帶 em 單位的字符串或數(shù)字類型。

變形

屬性名	支持的值或類型	默認(rèn)值
scale	number	1

當(dāng)前名稱：創(chuàng)新互聯(lián)小程序教程：微信小程序擴(kuò)展組件·繪制canvas
標(biāo)題鏈接：http://fisionsoft.com.cn/article/djedgcs.html