文本重排完整解决方案

来源：10-6 饼图文本重排（重排）

Lyn

2016-07-20

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);

写回答

3回答

苏菲刀客

2016-07-20

已采纳

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

Lyn

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

2016-07-21

共2条回复

Lyn

提问者

2016-07-20

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