upd:HistogramView添加圆角

README.md

@@ -974,6 +974,7 @@ set={
     ,spaceWidth:0 //柱子间空白固定基础宽度，柱子宽度自适应，当不为0时widthRatio无效，当视图不足容下所有柱子时将不会留空白，允许为负数，让柱子发生重叠
     ,minHeight:0 //柱子保留基础高度，position不为±1时应该保留点高度
     ,position:-1 //绘制位置，取值-1到1，-1为最底下，0为中间，1为最顶上，小数为百分比
+    ,radius:-1 //圆角半径配置，取值-1到1，-1为动态计算（柱子宽度50%），0为直角，1为最大圆角，小数为百分比
     ,mirrorEnable:false //是否启用镜像，如果启用，视图宽度会分成左右两块，右边这块进行绘制，左边这块进行镜像（以中间这根柱子的中心进行镜像）
 
     ,stripeEnable:true //是否启用柱子顶上的峰值小横条，position不是-1时应当关闭，否则会很丑

src/extensions/frequency.histogram.view.js

@@ -46,6 +46,8 @@ H5环境以上配置二选一
 		,spaceWidth:0 //柱子间空白固定基础宽度，柱子宽度自适应，当不为0时widthRatio无效，当视图不足容下所有柱子时将不会留空白，允许为负数，让柱子发生重叠
 		,minHeight:0 //柱子保留基础高度，position不为±1时应该保留点高度
 		,position:-1 //绘制位置，取值-1到1，-1为最底下，0为中间，1为最顶上，小数为百分比
+		,radius:-1 //圆角半径，取值-1到1，-1为柱子宽度的一半，0为不圆角，1为最大可能圆角，小数为百分比
+		,drawMethod:0 // 添加这个配置项：1=使用圆角矩形（当前代码），0=使用普通矩形（被注释的旧代码），默认1
 		,mirrorEnable:false //是否启用镜像，如果启用，视图宽度会分成左右两块，右边这块进行绘制，左边这块进行镜像（以中间这根柱子的中心进行镜像）
 
 		,stripeEnable:true //是否启用柱子顶上的峰值小横条，position不是-1时应当关闭，否则会很丑
@@ -112,8 +114,28 @@ H5环境以上配置二选一
 
 	canvas.width=width;
 	canvas.height=height;
-	var ctx=This.ctx=canvas.getContext("2d");
+	var ctx = This.ctx = canvas.getContext("2d");
 
+	// 添加自定义roundRect实现
+	if(set.drawMethod==1){	
+		ctx.customRoundRect = function(x, y, w, h, r) {
+			if (w < 0) w = 0;
+			if (h < 0) h = 0;
+			if (typeof r === 'number') {
+				r = [r, r, r, r];
+			} else if (!Array.isArray(r)) {
+				r = [0, 0, 0, 0];
+			}
+			this.beginPath();
+			this.moveTo(x + r[0], y);
+			this.arcTo(x + w, y, x + w, y + h, r[1]);
+			this.arcTo(x + w, y + h, x, y + h, r[2]);
+			this.arcTo(x, y + h, x, y, r[3]);
+			this.arcTo(x, y, x + w, y, r[0]);
+			this.closePath();
+		};
+	}
+
 	if(!Recorder.LibFFT){
 		throw new Error($T.G("NeedImport-2",[ViewTxt,"src/extensions/lib.fft.js"]));
 	};
@@ -315,17 +337,57 @@ fn.prototype=FrequencyHistogramView.prototype={
 				h=Math.max(lastH[i],minHeight);
 
 				//绘制上半部分
-				if(originY!=0){
-					y=originY-h;
-					ctx.fillStyle=linear1;
-					ctx.fillRect(x, y, w, h);
-				};
+				if(set.drawMethod==0){
+					if(originY!=0){
+						y=originY-h-stripeHeight;
+						if(y<0){y=0;};
+						ctx.fillStyle=stripeLinear1;
+						ctx.fillRect(x, y, w, stripeHeight);
+					};
+				}else{
+					if (originY != 0) {
+						y = originY - h;
+						ctx.fillStyle = linear1;
+						var baseRadius = set.radius === -1 ? w/2 : Math.min(w/2, h) * Math.max(0, Math.min(1, set.radius));
+						var radius = Math.min(baseRadius, h);
+						ctx.beginPath();
+						if (set.position === -1) {
+						ctx.customRoundRect(x, y, w, h, [0, 0, radius, radius]);
+						} else if (set.position === 1) {
+						ctx.customRoundRect(x, y, w, h, [radius, radius, 0, 0]);
+						} else {
+						ctx.customRoundRect(x, y, w, h, [radius, radius, 0, 0]);
+						}
+						ctx.fill();
+						}
+				}
 				//绘制下半部分
-				if(originY!=height){
-					ctx.fillStyle=linear2;
-					ctx.fillRect(x, originY, w, h);
-				};
-
+
+				if(set.drawMethod==0){
+					if(originY!=height){
+						y=originY+h;
+						if(y+stripeHeight>height){
+							y=height-stripeHeight;
+						};
+						ctx.fillStyle=stripeLinear2;
+						ctx.fillRect(x, y, w, stripeHeight);
+					};
+				}else{
+					if(originY!=height){
+						ctx.fillStyle=linear2;
+						var baseRadius = set.radius === -1 ? w/2 : Math.min(w/2, h) * Math.max(0, Math.min(1, set.radius));
+						var radius = Math.min(baseRadius, h);
+						ctx.beginPath();
+						if(set.position === -1) {
+							ctx.customRoundRect(x, originY, w, h, [0, 0, radius, radius]);
+						} else if(set.position === 1) {
+							ctx.customRoundRect(x, originY, w, h, [0, 0, radius, radius]);
+						} else {
+							ctx.customRoundRect(x, originY, w, h, [0, 0, radius, radius]);
+						}
+						ctx.fill();
+					};
+				}
 				xFloat+=w;
 			};