文本重排完整解决方案

Question

H5ComponentPie.js: 113 行

//  生长动画
  var draw = function( per ){
    ctx.clearRect(0,0,w,h);
    ctx.beginPath();
    ctx.moveTo(r,r);
    if(per <=0){
      ctx.arc(r,r,r,0,2*Math.PI);
      component.find('.text').css('opacity',0)
    }else{
      ctx.arc(r,r,r,sAngel,sAngel+2*Math.PI*per,true);
    }
    ctx.fill();
    ctx.stroke();
    if( per >= 1){
      component.find('.text').css('transition','all 0s');
      // --- H5ComponentPie.reSort( component.find('.text') );
      // +++ 以下3行
      component.find('.text').each(function (i) {
        H5ComponentPie.reSort( component.find('.text').slice(i) )
      })
      component.find('.text').css('transition','all 1s');
      component.find('.text').css('opacity',1);
      ctx.clearRect(0,0,w,h);
    }
  }
  draw(0);

Answer 1

苏菲刀客 2016-07-20 11:10:22

我看这个怎么改，排版都会有问题。不如在饼图旁边新增一个div来专门解释各区占比，配以和各区相同的颜色。

• 提问者 Lyn #1

  非常棒的解决方案！

• 提问者 Lyn #2

  的确是有问题，因为这个重排的策略是一圈一圈的往外排，最不理想的情况下：文案太多、重叠率太高。重排之后估计都显示到界面外面去了。
  
  如果实际做这种，其实可以和 【视觉、交互】 商量下，用一个更为【合理】的方式去实现差不多的功能。
  
  课程中这种功能，可以变更为， HOVER 到某个 饼上来显示对应的文本标签，同时，加上你的方案有个专门的区域来显示文本标签对应的色块。

Answer 2

提问者 Lyn 2016-07-20 08:54:58

      // --- H5ComponentPie.reSort( component.find('.text') );
      
      // +++ 以下3行
      component.find('.text').each(function (i) {
        H5ComponentPie.reSort( component.find('.text').slice(i) )
      })

Answer 3

提问者 Lyn 2016-07-20 08:53:27

非常抱歉在代码中留了个BUG。