SVG 圆弧弧形渐变实现

前言

开发需求,需要实现一个弧形渐变的弧形,如下图所示:


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>

推荐阅读更多精彩内容

  • d3 (核心部分)选择集d3.select - 从当前文档中选择一系列元素。d3.selectAll - 从当前文...
    谢大见阅读 2,483评论 1 4
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 141,857评论 18 610
  • echarts 原生是不支持弧形渐变的,本文只是取巧,利用线性渐变 linear 实现视觉上的弧形渐变。适用于以弧...
    KrisLeeSH阅读 10,451评论 0 3
  • 经过了3个月的开发,MXNet 0.11版本终于发布了,其中也发布了最为重要的一个更新,动态图接口Gluon,李沐...
    SherlockLiao阅读 9,633评论 4 8
  • 人类文明在不断进步,我们的精神文明和物质文明都在不断进步,这种进步的目的,是什么?是让我们,活的,更好,更快乐吗?...
    简柴先生阅读 168评论 0 1