From 917412864ed59aaba417c35f10db80a7cc219a06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E5=9D=9A=E6=9E=9C?= <753610399@qq.com>
Date: Sat, 18 Jan 2020 16:16:25 +0800
Subject: [PATCH] =?UTF-8?q?FrequencyHistogramView=E8=B0=83=E6=95=B4?=
=?UTF-8?q?=E6=9F=B1=E5=AD=90=E5=AE=BD=E5=BA=A6=E8=AE=BE=E5=AE=9A=E5=8F=82?=
=?UTF-8?q?=E6=95=B0=E6=96=B9=E4=BE=BF=E8=87=AA=E9=80=82=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 9 +++++----
assets/npm-home/hash-history.txt | 8 ++++----
.../runtime-codes/test.extensions.visualization.js | 2 +-
dist/extensions/frequency.histogram.view.js | 2 +-
src/extensions/frequency.histogram.view.js | 13 ++++++++-----
5 files changed, 19 insertions(+), 15 deletions(-)
diff --git a/README.md b/README.md
index 8eaddf1..9a244d0 100644
--- a/README.md
+++ b/README.md
@@ -600,7 +600,7 @@ set={
//以上配置二选一
- scale:2 //缩放系数，应为正整数，使用2(3? no!)倍宽高进行绘制，避免移动端绘制模糊
+ ,scale:2 //缩放系数，应为正整数，使用2(3? no!)倍宽高进行绘制，避免移动端绘制模糊
,speed:8 //移动速度系数，越大越快
,lineWidth:3 //线条基础粗细
@@ -632,7 +632,7 @@ set={
//以上配置二选一
- scale:2 //缩放系数，应为正整数，使用2(3? no!)倍宽高进行绘制，避免移动端绘制模糊
+ ,scale:2 //缩放系数，应为正整数，使用2(3? no!)倍宽高进行绘制，避免移动端绘制模糊
,fps:50 //绘制帧率，不可过高，50-60fps运动性质动画明显会流畅舒适，实际显示帧率达不到这个值也并无太大影响
@@ -670,12 +670,13 @@ set={
//以上配置二选一
- scale:2 //缩放系数，应为正整数，使用2(3? no!)倍宽高进行绘制，避免移动端绘制模糊
+ ,scale:2 //缩放系数，应为正整数，使用2(3? no!)倍宽高进行绘制，避免移动端绘制模糊
,fps:20 //绘制帧率，不可过高
,lineCount:30 //直方图柱子数量，数量的多少对性能影响不大，密集运算集中在FFT算法中
- ,lineWidth:6 //柱子线条基础粗细，当视图可以容下lineCount这么多时才会生效，否则自适应
+ ,widthRatio:0.6 //柱子线条宽度占比，为所有柱子占用整个视图宽度的比例，剩下的空白区域均匀插入柱子中间；默认值也基本相当于一根柱子占0.6，一根空白占0.4；设为1不留空白，当视图不足容下所有柱子时也不留空白
+ ,spaceWidth:0 //柱子间空白固定基础宽度，柱子宽度自适应，当不为0时widthRatio无效，当视图不足容下所有柱子时将不会留空白，允许为负数，让柱子发生重叠
,minHeight:0 //柱子保留基础高度，position不为±1时应该保留点高度
,position:-1 //绘制位置，取值-1到1，-1为最底下，0为中间，1为最顶上，小数为百分比
diff --git a/assets/npm-home/hash-history.txt b/assets/npm-home/hash-history.txt
index 45dad32..7a3305b 100644
--- a/assets/npm-home/hash-history.txt
+++ b/assets/npm-home/hash-history.txt
@@ -1,4 +1,8 @@
[
+ {
+ "sha1": "2693f2898935e3e378bd1aba38f0cb4271641d57",
+ "time": "2020-1-18 16:15:24"
+ },
{
"sha1": "d494fe71ad5175c130c56b1ce09d4953b0fc045a",
"time": "2020-1-17 16:12:00"
@@ -14,9 +18,5 @@
{
"sha1": "2c9728442cfe5e6ba97e73fff21dee502e24f9e5",
"time": "2020-1-14 18:20:47"
- },
- {
- "sha1": "bad5a11c405b2766887f5a68bab7c0ce6ea14013",
- "time": "2020-1-14 17:40:50"
}
]
\ No newline at end of file
diff --git a/assets/runtime-codes/test.extensions.visualization.js b/assets/runtime-codes/test.extensions.visualization.js
index 1e7484c..a752efc 100644
--- a/assets/runtime-codes/test.extensions.visualization.js
+++ b/assets/runtime-codes/test.extensions.visualization.js
@@ -32,7 +32,7 @@ var waveConfigs={
,{testTitle:"顶部显示+粗大"
,lineCount:15
,position:1
- ,lineWidth:999
+ ,spaceWidth:1.5
,stripeEnable:false
,linear:[0,"#ab00ff",1,"#ab00ff"]}
]
diff --git a/dist/extensions/frequency.histogram.view.js b/dist/extensions/frequency.histogram.view.js
index 5ed7a76..a8294c0 100644
--- a/dist/extensions/frequency.histogram.view.js
+++ b/dist/extensions/frequency.histogram.view.js
@@ -3,4 +3,4 @@
https://github.com/xiangyuecn/Recorder
src: extensions/frequency.histogram.view.js
*/
-!function(){"use strict";var t=function(t){return new e(t)},e=function(t){var e=this,r={scale:2,fps:20,lineCount:30,lineWidth:6,minHeight:0,position:-1,stripeEnable:!0,stripeHeight:3,stripeMargin:6,fallDuration:1e3,stripeFallDuration:3500,linear:[0,"rgba(0,187,17,1)",.5,"rgba(255,215,0,1)",1,"rgba(255,102,0,1)"],stripeLinear:null,shadowBlur:0,shadowColor:"#bbb",stripeShadowBlur:-1,stripeShadowColor:"",onDraw:function(t,e){}};for(var i in t)r[i]=t[i];e.set=t=r;var a=t.elem;a&&("string"==typeof a?a=document.querySelector(a):a.length&&(a=a[0])),a&&(t.width=a.offsetWidth,t.height=a.offsetHeight);var o=t.scale,n=t.width*o,l=t.height*o,h=e.elem=document.createElement("div"),s=["","transform-origin:0 0;","transform:scale("+1/o+");"];h.innerHTML='';var f=e.canvas=h.querySelector("canvas");e.ctx=f.getContext("2d");if(f.width=n,f.height=l,a&&(a.innerHTML="",a.appendChild(h)),!Recorder.LibFFT)throw new Error("需要lib.fft.js支持");e.fft=Recorder.LibFFT(1024),e.lastH=[],e.stripesH=[]};e.prototype=t.prototype={genLinear:function(t,e,r,i){for(var a=t.createLinearGradient(0,r,0,i),o=0;o1.3*e.stripeFallDuration)return clearInterval(t.timer),void(t.timer=0);if(!(i-a';var f=e.canvas=h.querySelector("canvas");e.ctx=f.getContext("2d");if(f.width=n,f.height=l,i&&(i.innerHTML="",i.appendChild(h)),!Recorder.LibFFT)throw new Error("需要lib.fft.js支持");e.fft=Recorder.LibFFT(1024),e.lastH=[],e.stripesH=[]};e.prototype=t.prototype={genLinear:function(t,e,r,a){for(var i=t.createLinearGradient(0,r,0,a),o=0;o1.3*e.stripeFallDuration)return clearInterval(t.timer),void(t.timer=0);if(!(a-iwidth){//放不下了，调小点
- lineWidth=Math.max(1*scale,Math.floor((width-(lineCount+1)*scale)/lineCount));
+ var widthRatio=set.widthRatio;
+ var spaceWidth=set.spaceWidth*scale;
+ if(spaceWidth!=0){
+ widthRatio=(width-spaceWidth*(lineCount+1))/width;
};
- var spaceFloat=(width-lineCount*lineWidth)/(lineCount+1);//均匀间隔，首尾都留空
+ var lineWidth=Math.max(1*scale,Math.floor((width*widthRatio)/lineCount));//柱子宽度至少1个单位
+ var spaceFloat=(width-lineCount*lineWidth)/(lineCount+1);//均匀间隔，首尾都留空，可能为负数，柱子将发生重叠
var minHeight=set.minHeight*scale;
for(var i=0,xFloat=0,x,y,h;i