实现一个螺旋转盘

转盘效果

本文章讲解怎么实现这样一个螺旋转盘动态效果。不停旋转，箭头指向的扇形会变成高亮，整个转盘有个渐变效果，中间镂空。

利用图片填充颜色

首先准备如下三张图

三张图怎么利用？ 思路大概下面所标示的。第一张和第三种是盖到第二张上的，第二张图作为填充圆形的颜色。

 

   因为用canvas本身的shadow并不好实现这个效果，另外性能也不高。所以就直接利用了上面左侧的这张图。来呈现高亮选中的那个转盘扇形。

初始化转盘

1. 加载图片并保存填充颜色

为了可以绘制出扇形上颜色渐变的效果，保证整体上是一张过渡性很好的渐变色盘。需要加载这三张图片，并绘制到一个离屏canvas上，借助createPattern，用canvas作为重复内容填充绘制路径，并保存下来用于后面绘制扇形填充使用。

    initWheelImage() {
        var intoCanvas = document.createElement("canvas");//创建canvas
        var ctx = intoCanvas.getContext('2d');
        intoCanvas.width = this.width + this.position.x;//设置到正确的宽高
        intoCanvas.height = this.height + this.position.y;

        //将三张图片加载
        let wheelSurfColor = new Image();
        wheelSurfColor.src = wheelSurfColorUrl;
        let wheelSurfCoverImg = new Image();
        wheelSurfCoverImg.src = wheelSurfCoverUrl;
        let innerGlowSector = new Image();
        innerGlowSector.src = innerGlowSectorUrl;
        //使用promise将图片加载成功后执行绘制操作
        let that = this;
        let arrPromise = [];
        arrPromise.push(Util.getImgLoadPromise(wheelSurfColor));
        arrPromise.push(Util.getImgLoadPromise(innerGlowSector));
        arrPromise.push(Util.getImgLoadPromise(wheelSurfCoverImg));
        Promise.all(arrPromise).then(
            function (imgArr) {
                let r = that.innerRadius + that.maxOuterR;
                //将图片绘制到离屏canvas上
                ctx.drawImage(wheelSurfColor, that.position.x + that.width / 2 - r, that.position.y + that.height / 2 - r, r * 2, r * 2);
                //指定重复元素用来填充路径
                //或者  ctx.createPattern(intoCanvas, 'no-repeat')  使用哪个canvas都行
                that.wheelSurfColorPattern = that.layer.canvasContext.createPattern(intoCanvas, 'no-repeat');
                ctx.clearRect(0, 0, intoCanvas.width, intoCanvas.height)

                //同上面几句代码作用一致
                ctx.drawImage(wheelSurfCoverImg, that.position.x + that.width / 2 - r, that.position.y + that.height / 2 - r, r * 2, r * 2);
                that.wheelSurfCoverPattern = that.layer.canvasContext.createPattern(intoCanvas, 'no-repeat');
                that.initWheel.call(that, innerGlowSector);
                that.update.call(that)
            }
        );
    }

图片加载完成后，调用初始化转盘其他元素的方法。 

2. 初始化转盘其他展示内容

 展示内容包括：31个扇形块，31个文字，顶部扇形，中间圆环，中间文字，箭头，刻度线等。这里用group划分组利于管理控制。

绘制文字有性能问题，所以用到了离屏canvas。

    initWheel(innerGlowSector: HTMLImageElement) {
        let circlePerDis = 73 * this.scale;
        let font18 = 18 * this.scale;
        let font20 = 20 * this.scale;
        //绘制30个扇形块
        let i;
        let renderStyle = new RenderStyle(true, false, this.wheelSurfColorPattern);
        //30个扇形组成group 并且设置颜色渐变的效果 需要初始化31个这样转的时候才不会有空缺
        this.sectorGroup = new Group(renderStyle, new RotateConfig());
        for (i = 1; i <= 36; i++) {
            if (i >= 32) {//不需要做什么了

            } else {//加31个扇形
                this.addNewSector(i);
            }
        }

        this.sectorGroup.setRotateCenter(this.position.x + this.width / 2, this.position.y + this.height / 2);
        this.sectorGroup.rotateBy(-60);
        this.group.add(this.sectorGroup);

        //绘制扇形上面的文字
        this.textGroup = new Group(new RenderStyle(), new RotateConfig());
        for (i = 1; i <= 36; i++) {
            if (i >= 32) {

            } else {
                this.addNewText(i, i >= 17 ? "left" : "right");
            }
        }
        this.textGroup.setRotateCenter(this.position.x + this.width / 2, this.position.y + this.height / 2);
        //优化text绘制方式 提高性能 begin
        this.redrawTextCanvas();
        this.textCanvasImage = new CanvasImage(this.textCanvas, new RenderStyle(), new RotateConfig(), new RegionConfig());
        this.textCanvasImage.setRotateCenter(this.position.x + this.width / 2, this.position.y + this.height / 2);
        this.textCanvasImage.rotateBy(-60);
        this.group.add(this.textCanvasImage);
        //优化text绘制方式 提高性能 end

        //绘制顶部的扇形  镂空效果
        let renderStyle2 = new RenderStyle(true, false, this.wheelSurfCoverPattern);
        renderStyle2.setGlobalCompositeOperation("destination-out");
        let sector2 = new Circle(new CircleConfig(this.innerRadius + this.maxOuterR + this.radiusDiff, new Point(this.position.x + this.width / 2, this.position.y + this.height / 2), 0, 360), renderStyle2, new RotateConfig());
        sector2.setRotateCenter(this.position.x + this.width / 2, this.position.y + this.height / 2);
        this.group.add(sector2);

        //绘制顶部半个扇形，蓝颜色有加深部分
        let sectorColorDeeprenderStyle = new RenderStyle(true, false);
        let percentColorArr = new Array<PercentColor>(new PercentColor(0, "rgba(0,30,255,0)"), new PercentColor(0.5, "rgba(0,30,255,0.2)"), new PercentColor(1, "rgba(0,30,255,1)"));
        sectorColorDeeprenderStyle.setLinearGradient(new LinearGradientConfig(this.position.x + this.width / 2, this.position.y + this.height / 2, this.position.x + this.width / 2 + this.innerRadius + this.maxOuterR / 2, this.position.y + this.height / 2, percentColorArr));
        let sectorColorDeep = new Sector(new SectorConfig(this.innerRadius + circlePerDis * 4, new Point(this.position.x + this.width / 2, this.position.y + this.height / 2), 270, 315), sectorColorDeeprenderStyle);
        this.group.add(sectorColorDeep);

        //绘制中间的圆  镂空效果
        let renderStyle1 = new RenderStyle(true, false, "green");//随便什么颜色
        renderStyle1.setGlobalCompositeOperation("destination-out");
        let circle = new Circle(new CircleConfig(this.innerRadius, new Point(this.position.x + this.width / 2, this.position.y + this.height / 2)), renderStyle1);
        this.group.add(circle);

        //环绕文字内部的圆 紧贴扇形
        let circleLineRenderStyle = new RenderStyle(false, true, "", "", 1, false);
        circleLineRenderStyle.setLinearGradient(new LinearGradientConfig(this.position.x, this.position.y, this.position.x + this.width, this.position.y, this.percentColorArr))
        let circleLine = new Circle(new CircleConfig(this.innerRadius, new Point(this.position.x + this.width / 2, this.position.y + this.height / 2), -30, 300, true), circleLineRenderStyle, new RotateConfig());
        circleLine.setRotateCenter(this.position.x + this.width / 2, this.position.y + this.height / 2);
        circleLine.rotateBy(-60);
        this.group.add(circleLine);
        //绘制环绕文字的两个线条
        let circleLineTop = new Circle(new CircleConfig(this.innerRadius / 3 * 2, new Point(this.position.x + this.width / 2, this.position.y + this.height / 2), 220, 320), new RenderStyle(false, true, "", "rgba(38,110,225,1)", 1, false));
        this.group.add(circleLineTop);
        let circleLineBottom = new Circle(new CircleConfig(this.innerRadius / 3 * 2, new Point(this.position.x + this.width / 2, this.position.y + this.height / 2), 20, 160), new RenderStyle(false, true, "", "rgba(38,110,225,1)", 1, false));
        this.group.add(circleLineBottom);

        //绘制内部文字
        this.className = new Text(this.dataList.get(1).gradeName + "-" + this.dataList.get(1).subjectName, new Point(this.position.x + this.width / 2, this.position.y + this.height / 2 - 20), new TextConfig("Arial", font18, "normal", "normal"), new RenderStyle(true, true, "#00f6ff"), new RotateConfig());
        this.className.moveBy(-this.className.getWidth(this.layer.canvasContext) / 2, 0);
        this.group.add(this.className);
        this.articleName = new Text(Util.subString1(this.dataList.get(1).unitName, 28, "..."), new Point(this.position.x + this.width / 2, this.position.y + this.height / 2 + 20), new TextConfig("Arial", font20, "normal", "normal"), new RenderStyle(true, true, "#00f6ff"), new RotateConfig());
        this.articleName.moveBy(-this.articleName.getWidth(this.layer.canvasContext) / 2, 0);
        this.group.add(this.articleName);


        //依次绘制4个圆圈
        let circle1 = new Circle(new CircleConfig(this.innerRadius + circlePerDis, new Point(this.position.x + this.width / 2, this.position.y + this.height / 2)), new RenderStyle(false, true, "", "rgba(255,255,255,0.15)", 1, false));
        this.group.add(circle1);
        let circle2 = new Circle(new CircleConfig(this.innerRadius + circlePerDis * 2, new Point(this.position.x + this.width / 2, this.position.y + this.height / 2)), new RenderStyle(false, true, "", "rgba(255,255,255,0.15)", 1, false));
        this.group.add(circle2);
        let circle3 = new Circle(new CircleConfig(this.innerRadius + circlePerDis * 3, new Point(this.position.x + this.width / 2, this.position.y + this.height / 2)), new RenderStyle(false, true, "", "rgba(60,126,229,0.5)", 1, false));
        this.group.add(circle3);
        //最外层的圆圈有内发光效果
        let circle4RenderStyle = new RenderStyle(true, true, "", "rgba(60,126,229,0.5)", 1);
        circle4RenderStyle.setRadialGradient(new RadialGradientConfig(this.position.x + this.width / 2, this.position.y + this.height / 2, this.innerRadius, this.position.x + this.width / 2, this.position.y + this.height / 2, this.innerRadius + 73 * 4,
            [new PercentColor(0, "rgba(0,97,242,0)"), new PercentColor(0.7, "rgba(0,97,242,0)"), new PercentColor(0.9, "rgba(3,44,253,0.1)"), new PercentColor(1, "rgba(0,97,242,0.1)")], true, false))
        let circle4 = new Circle(new CircleConfig(this.innerRadius + circlePerDis * 4, new Point(this.position.x + this.width / 2, this.position.y + this.height / 2)), circle4RenderStyle);
        this.group.add(circle4);

        //绘制纵向坐标尺
        let lineGroup = new Group();
        let lineY = new Line(new Point(this.position.x + this.width / 2, this.position.y + this.height / 2 - this.innerRadius), new Point(this.position.x + this.width / 2, this.position.y + this.height / 2 - this.innerRadius - this.maxOuterR), new RenderStyle(false, true, "", "rgba(255,255,255,0.1)"))
        lineGroup.add(lineY);
        for (let i = 0; i <= 12; i++) {
            let lineX = new Line(new Point(this.position.x + this.width / 2 - 6, this.position.y + this.height / 2 - this.innerRadius - circlePerDis * 4 / 12 * i), new Point(this.position.x + this.width / 2, this.position.y + this.height / 2 - this.innerRadius - circlePerDis * 4 / 12 * i), new RenderStyle(false, true, "", "rgba(255,255,255,0.2)"))
            lineGroup.add(lineX);
        }

        //绘制内发光激活扇形及上面的文字
        let innerGlowSectorImg = new CanvasImage(innerGlowSector, new RenderStyle(), new RotateConfig(), new RegionConfig(this.position.x + this.width / 2, this.position.y + this.height / 2 - 61 * this.scale, this.innerRadius + this.minOuterR + this.radiusDiff * 30, innerGlowSector.height * this.scale));
        this.innerGlowSectorGroup.add(innerGlowSectorImg);
        let activeSectorText = new Text(this.textGroup.children[1].text, new Point(this.position.x + this.width / 2 + this.innerRadius + 60 * this.scale, this.position.y + this.height / 2 + 7 * this.scale), new TextConfig("Arial", font18, "normal", "normal"), new RenderStyle(true, true, "#FFF"), new RotateConfig());
        this.innerGlowSectorGroup.add(activeSectorText);
        this.innerGlowSectorGroup.setRotateCenter(this.position.x + this.width / 2, this.position.y + this.height / 2);
        this.innerGlowSectorGroup.rotateBy(-45);
        this.group.add(this.innerGlowSectorGroup);

        //绘制发光箭头
        let arrowRenderStyle = new RenderStyle(true, false, "#FFF", "#FFF", 1, true);
        arrowRenderStyle.setShadowStyle(new ShadowStyle(0, 0, 20, "#FFF"))
        let arrowPath = new Path(arrowRenderStyle);
        let p0 = Util.computePointAfterRotate(this.position.x + this.width / 2 + this.innerRadius / 3 * 2, this.position.y + this.height / 2 - 4, this.position.x + this.width / 2, this.position.y + this.height / 2, -45);
        let p1 = Util.computePointAfterRotate(this.position.x + this.width / 2 + this.innerRadius / 3 * 2, this.position.y + this.height / 2 + 4, this.position.x + this.width / 2, this.position.y + this.height / 2, -45);
        let p2 = Util.computePointAfterRotate(this.position.x + this.width / 2 + this.innerRadius / 3 * 2 + 90, this.position.y + this.height / 2, this.position.x + this.width / 2, this.position.y + this.height / 2, -45);
        arrowPath.addPoint(new Point(p0.x, p0.y));
        arrowPath.addPoint(new Point(p1.x, p1.y));
        arrowPath.addPoint(new Point(p2.x, p2.y));
        this.group.add(arrowPath);

        //绘制左右两部分关联的折线
        let connectLinePath = new Path(new RenderStyle(false, true, "", "#00c6ff", 1, false));
        let point0 = Util.computePointAfterRotate(this.position.x + this.width / 2 + this.innerRadius + this.maxOuterR + 5 * this.scale, this.position.y + this.height / 2, this.position.x + this.width / 2, this.position.y + this.height / 2, -45);
        let point1 = Util.computePointAfterRotate(this.position.x + this.width / 2 + this.innerRadius + this.maxOuterR + 50 * this.scale, this.position.y + this.height / 2, this.position.x + this.width / 2, this.position.y + this.height / 2, -45);
        let point2 = new Point(this.width, point1.y);
        connectLinePath.addPoint(new Point(point0.x, point0.y));
        connectLinePath.addPoint(new Point(point1.x, point1.y));
        connectLinePath.addPoint(new Point(point2.x, point2.y));
        this.group.add(connectLinePath);
        //绘制左右两部分关联的折线起点小矩形
        let connectLineRect = new Rect(new RenderStyle(true, false, "#00c6ff", ""), new RotateConfig(), new RegionConfig(point0.x - 5, point0.y - 5, 10, 10));
        this.group.add(connectLineRect);

        this.group.add(lineGroup)
        this.layer.add(this.group)
    };

创建扇形

    addNewSector(index: number) {
        let sector = new Sector(new SectorConfig(this.maxOuterR + this.innerRadius - index * this.radiusDiff, new Point(this.position.x + this.width / 2, this.position.y + this.height / 2), (index - 1) * this.degreeDiff, index * this.degreeDiff - 0.1), new RenderStyle(true, false, "", "", 1, false));
        this.sectorGroup.add(sector);
    }

创建文字

    addNewText(index: number, textAlign: string) {
        let font14 = 14 * this.scale;
        let text;
        let unitName = Util.subString1(this.dataList.get(this.textIndex).unitName, 28, "...");
        if (textAlign == "left") {
            text = new Text(unitName, new Point(this.position.x + this.width / 2 - this.innerRadius - this.textHeadDis, this.position.y + this.height / 2 + 5 * this.scale), new TextConfig("Arial", font14, "normal", "normal", "right"), new RenderStyle(true, true, "#FFF"), new RotateConfig());
            //获知text的宽度后 将其移动到合适的位置
            let width = text.width;
            text.moveBy(width, 0);
            text.setRotateCenter(this.position.x + this.width / 2, this.position.y + this.height / 2);
            text.rotateBy((index - 18) * 10 - 5);
        } else {
            text = new Text(unitName, new Point(this.position.x + this.width / 2 + this.innerRadius + this.textHeadDis, this.position.y + this.height / 2 + 5 * this.scale), new TextConfig("Arial", font14, "normal", "normal", "left"), new RenderStyle(true, true, "#FFF"), new RotateConfig());
            text.setRotateCenter(this.position.x + this.width / 2, this.position.y + this.height / 2);
            text.rotateBy(index * 10 - 5);
        }

        this.textGroup.add(text);
        this.textIndex++;
        this.textIndex = this.textIndex % this.dataList.length();
    }

旋转刷新

 定时刷新画面，将角度每次变化：degreeDiff = 0.05。因为有组group的概念，所以旋转的时候整个组旋转比单个元素旋转要方便。性能也会提高，因为减少了context的API调用。

    update() {
        if (this.sectorGroup && this.textGroup) {
            let that = this;
            that.clearLayer();
            let degreeDiff = 0.05; 
            // 没旋转10度 需要新生成一个小扇形，最大扇形去除。所有扇形长度慢慢增加
            let allSectors = this.sectorGroup.getChildren();
            let allTexts = this.textGroup.getChildren();
            allSectors.forEach((sector: Sector, index: number) => {
                sector.sectorConfig.radius += (degreeDiff / that.degreeDiff) * that.radiusDiff;
                sector.changeStartDegree(sector.sectorConfig.startDegree - degreeDiff);
                sector.changeEndDegree(sector.sectorConfig.endDegree - degreeDiff);
            });
            //优化text绘制方式 提高性能 begin
            this.textCanvasImage.rotateBy(-degreeDiff);
            //优化text绘制方式 提高性能 end

            //选中高亮扇形不断旋转
            this.innerGlowSectorGroup.rotateBy(-degreeDiff);

            this.updateDegree = Math.round((this.updateDegree + degreeDiff) * 1000) / 1000;//防止出现小数位太多的情况
            if ((this.updateDegree + 5) % 10 == 0) {//选中高亮扇形需要切换到下一个位置
                this.currentIndex++;
                this.currentIndex = this.currentIndex % this.dataList.length();
                this.innerGlowSectorGroup.rotateBy(10);
                let unitName = Util.subString1(this.dataList.get(this.currentIndex).unitName, 28, "...")
                this.innerGlowSectorGroup.children[1].text = unitName;
                this.articleName.text = unitName;
                this.articleName.position.x = this.position.x + this.width / 2 - this.articleName.getWidth(this.layer.canvasContext) / 2;

                this.className.text = this.dataList.get(this.currentIndex).gradeName + "-" + this.dataList.get(this.currentIndex).subjectName;
                this.className.position.x = this.position.x + this.width / 2 - this.className.getWidth(this.layer.canvasContext) / 2;
                this.nextCallBack && this.nextCallBack();
            }
            if (this.updateDegree % 10 == 0) {
                (<Sector>allSectors[0]).removeSelf();
                this.addNewSector(31);
                //优化text绘制方式 提高性能 begin
                allTexts.forEach((text: Text, index: number) => {
                    text.rotateBy(-10);
                });
                this.textCanvasImage.rotateBy(10);
                //优化text绘制方式 提高性能 end

                (<Text>allTexts[0]).removeSelf();
                this.addNewText(31, "left");

                //修改最底部扇形条文字的方向
                (<Text>allTexts[15]).textConfig.align = "left";
                (<Text>allTexts[15]).moveBy(this.position.x + this.width / 2 + this.innerRadius + this.textHeadDis - (<Text>allTexts[15]).position.x, this.position.y + this.height / 2 - (<Text>allTexts[15]).position.y);
                (<Text>allTexts[15]).rotateBy((16 * 10 - 4) - (<Text>allTexts[15]).rotateConfig.rotateDegree);
                this.redrawTextCanvas();
            }
            this.group.draw(this.layer.canvasContext, null);
        }
    }

底层有个绘图库，定义了很多基本形状，像代码中sector扇形，group组，text文字类等。

底层库github地址：https://github.com/fangsmile/Canvas-GraphLib。

上面的代码不是很全面，如果有需要可以私信找我要哈。