|
|
|
|
@ -1,16 +1,5 @@
|
|
|
|
|
// 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({
|
|
|
|
|
/**
|
|
|
|
|
* 组件的属性列表
|
|
|
|
|
@ -31,13 +20,21 @@ Component({
|
|
|
|
|
list: {
|
|
|
|
|
type: Array,
|
|
|
|
|
value: [],
|
|
|
|
|
},
|
|
|
|
|
color: {
|
|
|
|
|
type: String,
|
|
|
|
|
value: 'random-dark'
|
|
|
|
|
},
|
|
|
|
|
canvasId: {
|
|
|
|
|
type: String,
|
|
|
|
|
value: 'myCanvas'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
lifetimes: {
|
|
|
|
|
attached: function() {
|
|
|
|
|
// 在组件实例进入页面节点树时执行
|
|
|
|
|
const query = this.createSelectorQuery()
|
|
|
|
|
query.select('.wc-canvas')
|
|
|
|
|
query.select('#' + this.data.canvasId)
|
|
|
|
|
.fields({ node: true, size: true })
|
|
|
|
|
.exec((res) => {
|
|
|
|
|
this.data.canvas = res[0].node
|
|
|
|
|
@ -47,7 +44,7 @@ Component({
|
|
|
|
|
observers: {
|
|
|
|
|
list(newVal) {
|
|
|
|
|
if(!newVal || !Array.isArray(newVal) || newVal.length === 0) return
|
|
|
|
|
let { width, height, list, wordData } = this.data
|
|
|
|
|
let { width, height, list, wordData, color } = this.data
|
|
|
|
|
list = newVal;
|
|
|
|
|
if (!width || isNaN(Number(width))) {
|
|
|
|
|
width = 375
|
|
|
|
|
@ -56,14 +53,25 @@ Component({
|
|
|
|
|
height = 450
|
|
|
|
|
}
|
|
|
|
|
const dpr = wx.getSystemInfoSync().pixelRatio
|
|
|
|
|
options.height = height * dpr
|
|
|
|
|
options.width = width * dpr
|
|
|
|
|
options.list = list
|
|
|
|
|
this.setData({
|
|
|
|
|
options: {
|
|
|
|
|
"list": list,
|
|
|
|
|
"gridSize": 10, // size of the grid in pixels
|
|
|
|
|
"weightFactor": 4, // 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": color, // 'random-dark' or 'random-light'
|
|
|
|
|
"backgroundColor": 'transparent', // the color of canvas
|
|
|
|
|
"rotateRatio": 0.2, // probability for the word to rotate. 1 means always
|
|
|
|
|
"relativeScaling": 0.1,
|
|
|
|
|
"height": height * dpr,
|
|
|
|
|
"width": width * dpr
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
|
if (this.data.canvas) {
|
|
|
|
|
const wordCloud = new WordCloud(this.data.canvas, options)
|
|
|
|
|
const wordCloud = new WordCloud(this.data.canvas, this.data.options)
|
|
|
|
|
wordData = wordCloud.start()
|
|
|
|
|
console.log(wordData)
|
|
|
|
|
this.setData({
|
|
|
|
|
wordData,
|
|
|
|
|
width,
|
|
|
|
|
@ -79,6 +87,17 @@ Component({
|
|
|
|
|
data: {
|
|
|
|
|
wordData: [],
|
|
|
|
|
canvas: null,
|
|
|
|
|
options: {
|
|
|
|
|
"list": [],
|
|
|
|
|
"gridSize": 10, // size of the grid in pixels
|
|
|
|
|
"weightFactor": 4, // 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": 'random-dark', // 'random-dark' or 'random-light'
|
|
|
|
|
"backgroundColor": 'transparent', // the color of canvas
|
|
|
|
|
"rotateRatio": 0.2, // probability for the word to rotate. 1 means always
|
|
|
|
|
"relativeScaling": 0.1
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
xiaowen
3 years ago