SVG 圆弧弧形渐变实现
2018-08-21 本文已影响0人
岚枫丶
前言
开发需求，需要实现一个弧形渐变的弧形，如下图所示：
hx.png
首先是因为在安卓端开发此效果，是相对较简单的，安卓端提供了一个角度渐变方法，但是在h5中无此方法。
在canvas以及svg中，渐变只有两种：线性渐变，径向渐变，经过尝试都无法满足此功能。然后就考虑到使用分很多段去话弧，每段弧一个颜色来实现。
刚开始使用zrender，zrender是用于echarts的开发库，可能因为不熟悉，做出来锯齿非常大。感觉没法解决。就想到了svg以及d3.js。
实现代码
如下代码实现上图的效果，经过跟阿里的datav中的弧形柱图组件对比，相差不是太大。看了下datav的实现，思路是一致的。至于锯齿方便，总感觉要比datav上面的差一点点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.content {
position: relative;
left: 0%;
width: 400px;
height: 400px;
background: rgba(0, 197, 209, 0.4);
overflow: hidden;
}
</style>
</head>
<body style="background: #0E2A42;">
<div id="content" class="content">
</div>
</body>
<script src="d3.v5.min.js"></script>
<script>
var curved_column = {
width: 400,
height: 400,
draw: function() {
this.content = document.getElementById('content')
this.svg = d3.select(this.content).append('svg').attr('width', this.width).attr('height', this.height)
this._initDom()
},
_initDom: function() {
var fd = 270 // 分段数
this.g = this.svg.append("g")
.attr("transform", "translate(200, 200)");
var compute = d3.interpolate('#FF0000', '#0B16FD');
var linear = d3.scaleLinear()
.domain([0, fd])
.range([0, 1]);
var pie = d3.pie()
.value(function(d) {
return d;
})
.sort(null)
.startAngle(0)
.endAngle(1.5 * Math.PI)
var arc = d3.arc()
.innerRadius(85)
.outerRadius(100);
var data = [];
for (var i = 0 ; i < fd ; i++) {
data.push(i)
}
this.g.datum(data).selectAll('path')
.data(pie)
.enter()
.append("path")
.attr("d", arc)
.style("fill", function (d, i) {
return compute(linear(d.value));
})
.style("stroke", function (d, i) {
return compute(linear(d.value));
})
}
}
curved_column.draw()
</script>
</html>
