| 11 | |
| 12 | // https://github.com/timdream/wordcloud2.js/blob/c236bee60436e048949f9becc4f0f67bd832dc5c/index.js#L233 |
| 13 | function updateCanvasMask(maskCanvas) { |
| 14 | var ctx = maskCanvas.getContext('2d'); |
| 15 | var imageData = ctx.getImageData(0, 0, maskCanvas.width, maskCanvas.height); |
| 16 | var newImageData = ctx.createImageData(imageData); |
| 17 | |
| 18 | var toneSum = 0; |
| 19 | var toneCnt = 0; |
| 20 | for (var i = 0; i < imageData.data.length; i += 4) { |
| 21 | var alpha = imageData.data[i + 3]; |
| 22 | if (alpha > 128) { |
| 23 | var tone = |
| 24 | imageData.data[i] + imageData.data[i + 1] + imageData.data[i + 2]; |
| 25 | toneSum += tone; |
| 26 | ++toneCnt; |
| 27 | } |
| 28 | } |
| 29 | var threshold = toneSum / toneCnt; |
| 30 | |
| 31 | for (var i = 0; i < imageData.data.length; i += 4) { |
| 32 | var tone = |
| 33 | imageData.data[i] + imageData.data[i + 1] + imageData.data[i + 2]; |
| 34 | var alpha = imageData.data[i + 3]; |
| 35 | |
| 36 | if (alpha < 128 || tone > threshold) { |
| 37 | // Area not to draw |
| 38 | newImageData.data[i] = 0; |
| 39 | newImageData.data[i + 1] = 0; |
| 40 | newImageData.data[i + 2] = 0; |
| 41 | newImageData.data[i + 3] = 0; |
| 42 | } else { |
| 43 | // Area to draw |
| 44 | // The color must be same with backgroundColor |
| 45 | newImageData.data[i] = 255; |
| 46 | newImageData.data[i + 1] = 255; |
| 47 | newImageData.data[i + 2] = 255; |
| 48 | newImageData.data[i + 3] = 255; |
| 49 | } |
| 50 | } |
| 51 | |
| 52 | ctx.putImageData(newImageData, 0, 0); |
| 53 | } |
| 54 | |
| 55 | echarts.registerLayout(function (ecModel, api) { |
| 56 | ecModel.eachSeriesByType('wordCloud', function (seriesModel) { |