文本重排完整解决方案

Question

H5ComponentPie.js: 113 行

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

//  生长动画   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

1 2 3 4 5 6

// --- 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。