奇技指南

本文作者奇舞团前端开发工程师李喆明

本文转载自奇舞周刊

前言

SVG 如何画任意角度的圆弧线

M Xo, Yo-r A r r 0 [1|0]** 0 Xo-r*sinα, Yo-r*cosα
注: ** 当弧角度 小于180° 时使用小角度弧线，当弧角度 大于180° 时使用大角度弧线

我们可以将其化作一个 JS 函数以便动态创建：

如何处理弧线标注位置

如何处理渐变色

function gradientColor(len, color) { color = color || [147, 112, 219];  const delta = 0.8 / len;   const colorTransfer = (c, o) => '#' + c.map(t => parseInt((1 - o) * 255 + o * t).toString(16)).join(''); return new Array(len).fill(0).map((o, i) => colorTransfer(color, 1 - i * delta));
}

function gradientColor(len, color) {  color = color || [260, 59.8, 64.9];    const delta = 28 / len;    return new Array(len).fill(0).map((_, i) => {   const c = [...color];  c[2] += i * delta;    c[1] += '%';    c[2] += '%';    return `hsl(${c.join()})`;    });
}

最终效果

class SVG {    constructor(width, height) {    this.width = width;    this.height = height;  this.s = SVG.createSVG(width, height); }   appendCircleArc(    circle = { cx: 100, cy: 100, r: 100 }, angel = { start: 0, end: 90 }, attrs = { fill: "none" } ) { const largeArcFlag = Number(angel > 180);   this.appendItem(SVG.arc({   largeArcFlag: largeArcFlag, rx: circle.r,   ry: circle.r,   startX: circle.cx - circle.r * Math.sin(angel.start / 180 * Math.PI),   startY: circle.cy - circle.r * Math.cos(angel.start / 180 * Math.PI),   endX: circle.cx - circle.r * Math.sin(angel.end / 180 * Math.PI),   endY: circle.cy - circle.r * Math.cos(angel.end / 180 * Math.PI)    }, attrs)); return this;    }   appendCircleArcText(    text,   circle = { cx: 100, cy: 100, r: 100 }, angel = { start: 0, end: 90 }, width = 16,    attrs = {} ) { angel = angel.start + (angel.end - angel.start) / 2;  const posX = circle.cx - circle.r * Math.sin(angel / 180 * Math.PI);   const posY = circle.cx - circle.r * Math.cos(angel / 180 * Math.PI);   const circleArcText = SVG.text(text, { ...attrs,   x: posX,    y: posY,    fontSize: width,    transform: "rotate( -" + angel + " " + posX + " " + posY + ")"    }); this.appendItem(circleArcText); return this;    }   render() {  return this.s;  }   renderTo(DOM = document.body) {    DOM.innerHTML = this.s.outerHTML;  const texts = Array.from(DOM.querySelectorAll('text'));  texts.forEach(text => { const transform = text.getAttribute('transform');    transform && text.removeAttribute('transform');   const { width, height } = text.getBoundingClientRect();    [   ['x', text.getAttribute('x') / 1 - width / 2],  ['y', text.getAttribute('y') / 1 + height / 2],    ['transform', transform || '']  ].forEach(([name, value]) => text.setAttribute(name, value));   })  return this;    }   appendItem(item) {  this.s.appendChild(item);   return this;    }   static arc({    rx = 50,   ry = 50,   xAxisRotation = 0, largeArcFlag = 0,  sweepFlag = 0, startX = 0,    startY = 0,    endX = 0,  endY = 0   }, attrs = {}) {   attrs.d = `M ${startX},${startY} A ${rx} ${ry} ${xAxisRotation} ${largeArcFlag} ${sweepFlag} ${endX},${endY}`;   const path = document.createElement('path'); for (var i in attrs) {  path.setAttribute(i.replace(/[A-Z]/g, o => `-${o}`), attrs[i]);   }   return path;    }   static text(text = '', attrs = {}) {    const t = document.createElement('text');    t.innerHTML = text;    for (var i in attrs) {  t.setAttribute(i.replace(/[A-Z]/g, o => `-${o}`), attrs[i]);  }   return t;   }   static g = class extends SVG { constructor(attrs = {}) {  super();    this.s = document.createElement("g");    for (var i in attrs) {  this.s.setAttribute(i.replace(/[A-Z]/g, o => `-${o}`), attrs[i]); }   }   };  static createSVG(width, height) {   const s = document.createElement('svg'); s.setAttribute("xmlns", "http://www.w3.org/2000/svg");  s.setAttribute("width", width);   s.setAttribute("height", height); s.setAttribute("viewBox", "0 0 " + width + " " + height);  return s;   }
}   function gradientColor(len, color) {    color = color || [147, 112, 219];  const delta = 0.8 / len;   const colorTransfer = (c, o) => '#' + c.map(t => parseInt((1 - o) * 255 + o * t).toString(16)).join(''); return new Array(len).fill(0).map((o, i) => colorTransfer(color, 1 - i * delta));
}   function createCircle(svg, items, circle, width, attrs) {   var colors = gradientColor(items.length);  colors.forEach(function (color, i) {    attrs.value = items[i];    var g = new SVG.g(attrs);  var angel = {  start: 360 / colors.length * i, end: 360 / colors.length * (i + 1) };  g.appendCircleArc(circle, angel, {  fill: "none", stroke: color,  strokeWidth: width  }); g.appendCircleArcText(items[i], circle, angel); svg.appendItem(g.render())  })
}   const s = new SVG(600, 600)
const width = 40;
const d = {    year: [2009, 2010, 2011, 2012], month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], week: ['Mon', 'Tue', 'Wes', 'Thu', 'Fri', 'Sat', 'Sun'],  day: [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, 27, 28, 29, 30, 31]
}
Object.keys(d).forEach(function (k, i) {    createCircle(s, d[k], { cx: 300, cy: 300, r: 300 - width * (i + 1) }, width, { category: k });
});
s.renderTo();   [].forEach.call(document.querySelectorAll("g"), function (g) {    g.onclick = function () {  var s = document.querySelector('svg')    s.setAttribute(this.getAttribute("category"), this.getAttribute("value"))   var u = {}, c = ['year', 'month', 'week', 'day']; for (var i = 0, l = c.length; i < l; i++) {  var o = c[i];  u[o] = s.getAttribute(o) || "";  if (u[o] === "") return false; }   alert(Object.keys(u).map(function (k) { return u[k] }).join(' '));    }
})

空·