WeChat 애플릿 그리기 원형 차트 구현

WeChat 미니 프로그램의 출시는 의심할 여지 없이 모바일 인터넷 업계에 다시 한 번 큰 파장을 일으킬 것입니다. 어떤 사람들은 미니 프로그램이 인기가 있을지 의문을 가질 것입니다. 위챗의 사용자 수를 보면 모든 것이 이해될 것입니다. 여기에서는 먼저 WeChat 애플릿의 그리기 기능을 구현하는 방법을 배웁니다.

공식 문서: http://www.php.cn/

아이디어는 첫 번째 호를 먼저 그린 다음 선을 다시 연결하는 것입니다. 원의 중심을 지정하고 Path를 닫으면 선을 시작점에 연결할 필요가 없습니다. 채우기()를 사용하여 Photoshop의 경로 선택 방법을 비교하면 이해하는 데 도움이 됩니다. 두 번째 호는 이전 호의 시작 각도이고 그 다음 반환됩니다. 원의 중심은 마지막으로 경로를 닫습니다. 세 번째 호는 이전 두 호의 합을 시작 각도로 하여 해당 비율의 호를 스윕합니다. 그래서 완전한 원을 완성합니다.

레이아웃 파일

33b6b65e50217e89c5a5c8eaffa79210c2caaf3fc160dd2513ce82f021917f8b

Javascript 파일

Page({
 onReady:function(){
  // 页面渲染完成
  // 创建上下文
  var context = wx.createContext();
// 画饼图
//  数据源
  var array = [20, 30, 40, 40];
  var colors = ["#ff0000", "#ffff00", "#0000ff", "#00ff00"];
  var total = 0;
//  计算问题
  for (index = 0; index < array.length; index++) {
    total += array[index];
  }
//  定义圆心坐标
  var point = {x: 100, y: 100};
//  定义半径大小
  var radius = 60;

/*  循环遍历所有的pie */
  for (i = 0; i < array.length; i++) {
    context.beginPath();
//    起点弧度
    var start = 0;
    if (i > 0) {
//      计算开始弧度是前几项的总和，即从之前的基础的上继续作画
      for (j = 0; j < i; j++) {
        start += array[j] / total * 2 * Math.PI; 
      }
    }
    console.log("i:" + i);
    console.log("start:" + start);
//   1.先做第一个pie
//    2.画一条弧，并填充成三角饼pie，前2个参数确定圆心，第3参数为半径，第4参数起始旋转弧度数，第5参数本次扫过的弧度数，第6个参数为时针方向-false为顺时针
   context.arc(point.x, point.y, radius, start, array[i] / total * 2 * Math.PI, false);
//   3.连线回圆心
   context.lineTo(point.x, point.y);
//   4.填充样式
   context.setFillStyle(colors[i]);
//   5.填充动作
   context.fill();
   context.closePath();
  }

  wx.drawCanvas({
    canvasId: &#39;canvas2&#39;,
    actions: context.getActions()
  });
 }
})

읽어주셔서 감사합니다. 모두에게 도움이 되기를 바랍니다. 이 사이트를 지원해 주신 모든 분들께 감사드립니다!

WeChat 애플릿 그리기 원형 차트 구현과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!