You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
2.2 KiB
93 lines
2.2 KiB
// components/word-cloud/index.js
|
|
import WordCloud from './wordCloud'
|
|
const options = {
|
|
"list": [],
|
|
"gridSize": 2, // size of the grid in pixels
|
|
"weightFactor": 8, // number to multiply for size of each word in the list
|
|
"fontWeight": 'normal', // 'normal', 'bold' or a callback
|
|
"fontFamily": 'Times, serif', // font to use
|
|
"color": '#FF1C20', // 'random-dark' or 'random-light'
|
|
"backgroundColor": 'transparent', // the color of canvas
|
|
"rotateRatio": 0.2, // probability for the word to rotate. 1 means always
|
|
}
|
|
|
|
Component({
|
|
/**
|
|
* 组件的属性列表
|
|
*/
|
|
properties: {
|
|
width: {
|
|
type: Number,
|
|
value: 375
|
|
},
|
|
height: {
|
|
type: Number,
|
|
value: 450
|
|
},
|
|
bgColor: {
|
|
type: String,
|
|
value: 'transparent',
|
|
},
|
|
list: {
|
|
type: Array,
|
|
value: [],
|
|
}
|
|
},
|
|
lifetimes: {
|
|
attached: function() {
|
|
// 在组件实例进入页面节点树时执行
|
|
const query = this.createSelectorQuery()
|
|
query.select('.wc-canvas')
|
|
.fields({ node: true, size: true })
|
|
.exec((res) => {
|
|
this.data.canvas = res[0].node
|
|
})
|
|
},
|
|
},
|
|
observers: {
|
|
list(newVal) {
|
|
if(!newVal || !Array.isArray(newVal) || newVal.length === 0) return
|
|
let { width, height, list, wordData } = this.data
|
|
list = newVal;
|
|
if (!width || isNaN(Number(width))) {
|
|
width = 375
|
|
}
|
|
if (!height || isNaN(Number(height))) {
|
|
height = 450
|
|
}
|
|
const dpr = wx.getSystemInfoSync().pixelRatio
|
|
options.height = height * dpr
|
|
options.width = width * dpr
|
|
options.list = list
|
|
setTimeout(()=>{
|
|
if (this.data.canvas) {
|
|
const wordCloud = new WordCloud(this.data.canvas, options)
|
|
wordData = wordCloud.start()
|
|
console.log(wordData)
|
|
this.setData({
|
|
wordData,
|
|
width,
|
|
height,
|
|
})
|
|
}
|
|
}, 500)
|
|
}
|
|
},
|
|
/**
|
|
* 组件的初始数据
|
|
*/
|
|
data: {
|
|
wordData: [],
|
|
canvas: null,
|
|
},
|
|
|
|
/**
|
|
* 组件的方法列表
|
|
*/
|
|
methods: {
|
|
bindWord(event) {
|
|
const { detail } = event.currentTarget.dataset
|
|
this.triggerEvent('detail', detail);
|
|
},
|
|
}
|
|
}) |