		## 说明
		* 基于 js2wordcloud, wordcloud2 进行修改来满足项目需求, 进一步使用可以了解 js2wordcloud, wordcloud2
		* 添加图形背景 isShowBackShape 控制是否显示图形背景
		* 解决文字不清晰问题 div(包含canvas父类，设置zoom:0.5)
		* 解决文字和图形(请使用2倍图)不清晰问题 div(包含canvas父类，设置zoom:0.5)
		* 类似nuxtjs 工程中引用图片用 require 不然路径会用问题例如：imageShape: require('~/static/womanIcon.png')
		@@ -6,0 +6,0 @@ * 不是黑色的背景用 imageShapeColor , 需要imageShapeColor 和 imageShape 形状一样， imageShape 必传(需要背景的情况)

src/main.js

		@@ -84,2 +84,3 @@ var WordCloud = require('./wordcloud2')
		}

		/**
		@@ -138,4 +139,2 @@ * 事件绑定
		_init() {
		console.log('this._container.clientWidth 大概137行', this._container.clientWidth);

		let width = this._container.clientWidth;
		@@ -170,5 +169,2 @@ let height = this._container.clientHeight;
		this._canvas.height = height
		// this._canvas.style.width = width * 20
		// this._canvas.style.height= height * 20
		console.log(this._canvas, 'this._canvas');
		this._wrapper.appendChild(this._canvas)
		@@ -233,7 +229,5 @@ }
		function _renderShape(option) {
		console.log(option, this, 'option');

		if (this._maskCanvas) {
		option.clearCanvas = false
		console.log('this._maskCanvas', this._maskCanvas);

		@@ -277,3 +271,2 @@ /* Determine bgPixel by creating
		ctx.clearRect(0, 0, this._canvas.width, this._canvas.height)
		console.log(maskCanvasScaled, 'maskCanvasScaled');

		@@ -307,7 +300,7 @@ ctx.drawImage(maskCanvasScaled, 0, 0);
		*/
		console.log(this._canvas, option, 'this._canvas 大概166');
		// var bctx = this._canvas.getContext('2d');
		var bctx = setupCanvas(this._canvas);
		if (option.isShowBackShape) {
		var dpr = window.devicePixelRatio \|\| 1;
		// var dpr = window.devicePixelRatio \|\| 1;
		var dpr = 2;
		var cw = this._canvas.width / dpr;
		@@ -320,4 +313,3 @@ var ch = this._canvas.height / dpr;
		}
		console.log(option.imageShape, ' options.imageShape');
		img.src = option.imageShapeColor \|\| option.imageShape;
		img.src = option.imageShapeColor;
		}
		@@ -330,3 +322,5 @@
		// Get the device pixel ratio, falling back to 1.
		var dpr = window.devicePixelRatio \|\| 1;
		// var dpr = window.devicePixelRatio \|\| 1;
		var dpr = 2;

		// Get the size of the canvas in CSS pixels.
		@@ -336,7 +330,5 @@ var rect = canvas.getBoundingClientRect();
		// size * the device pixel ratio.
		canvas.width = rect.width * dpr;
		canvas.height = rect.height * dpr;
		canvas.width = rect.width * 2;
		canvas.height = rect.height * 2;
		var ctx = canvas.getContext('2d');
		console.log(dpr, 'dpr');

		// Scale all drawing operations by the dpr, so you
		@@ -395,3 +387,2 @@ // don't have to worry about the difference.
		this._maskCanvas.height = img.height
		console.log(img, img.width, img.height, 'img');
		var ctx = this._maskCanvas.getContext('2d')
		@@ -433,3 +424,2 @@ // ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 100, 100);
		};
		console.log(option.imageShape, ' main -> option.imageShape');
		img.src = option.imageShape;
		@@ -436,0 +426,0 @@ }

src/wordcloud2.js

		@@ -157,3 +157,2 @@ /*!
		var WordCloud = function WordCloud(elements, options) {
		console.log('WordCloud2.js', '大概157行', elements, options);

		@@ -178,3 +177,2 @@ if (!isSupported) {
		});
		console.log(elements, 'elements 大概177行');

		@@ -227,3 +225,2 @@ /* Default values to be overwritten by options object */
		}
		console.log(settings, 'settings 大概225行');

		@@ -245,4 +242,2 @@ /* Convert weightFactor into a function */
		// 'circle' is the default and a shortcut in the code loop.
		console.log('shape 大概242行', settings.shape);

		settings.shape = 'circle';
		@@ -398,7 +393,5 @@ break;
		var eventY = clientY - rect.top;
		// console.log(eventX, canvas.width, rect.width, g, 'infoGrid');
		var dpr = window.devicePixelRatio \|\| 1;
		var x = Math.floor(eventX * ((canvas.width / rect.width) \|\| 1) / g) + dpr;
		var y = Math.floor(eventY * ((canvas.height / rect.height) \|\| 1) / g) + dpr*dpr;
		// console.log(eventX, canvas.width, rect.width, x, y, g, 'infoGrid');
		var x = Math.floor(eventX * ((canvas.width / rect.width) \|\| 1) / g) + 2;
		var y = Math.floor(eventY * ((canvas.height / rect.height) \|\| 1) / g) + 4;
		return infoGrid[x][y];
		@@ -501,3 +494,2 @@ };
		var fontSize = settings.weightFactor(weight);
		console.log('fontSize', fontSize);
		if (fontSize <= settings.minSize) {
		@@ -768,4 +760,2 @@ return false;
		if (info.mu !== 1) {
		console.log('90');

		transformRule +=
		@@ -772,0 +762,0 @@ 'translateX(-' + (info.fillTextWidth / 4) + 'px) ' +

wywordcloud - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics