Ribbon.js 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. var graphic = require("../../util/graphic");
  2. var sin = Math.sin;
  3. var cos = Math.cos;
  4. var _default = graphic.extendShape({
  5. type: 'ec-ribbon',
  6. shape: {
  7. cx: 0,
  8. cy: 0,
  9. r: 0,
  10. s0: 0,
  11. s1: 0,
  12. t0: 0,
  13. t1: 0
  14. },
  15. style: {
  16. fill: '#000'
  17. },
  18. buildPath: function (ctx, shape) {
  19. var clockwise = shape.clockwise || false;
  20. var cx = shape.cx;
  21. var cy = shape.cy;
  22. var r = shape.r;
  23. var s0 = shape.s0;
  24. var s1 = shape.s1;
  25. var t0 = shape.t0;
  26. var t1 = shape.t1;
  27. var sx0 = cx + cos(s0) * r;
  28. var sy0 = cy + sin(s0) * r;
  29. var sx1 = cx + cos(s1) * r;
  30. var sy1 = cy + sin(s1) * r;
  31. var tx0 = cx + cos(t0) * r;
  32. var ty0 = cy + sin(t0) * r;
  33. var tx1 = cx + cos(t1) * r;
  34. var ty1 = cy + sin(t1) * r;
  35. ctx.moveTo(sx0, sy0);
  36. ctx.arc(cx, cy, shape.r, s0, s1, !clockwise);
  37. ctx.bezierCurveTo((cx - sx1) * 0.70 + sx1, (cy - sy1) * 0.70 + sy1, (cx - tx0) * 0.70 + tx0, (cy - ty0) * 0.70 + ty0, tx0, ty0); // Chord to self
  38. if (shape.s0 === shape.t0 && shape.s1 === shape.t1) {
  39. return;
  40. }
  41. ctx.arc(cx, cy, shape.r, t0, t1, !clockwise);
  42. ctx.bezierCurveTo((cx - tx1) * 0.70 + tx1, (cy - ty1) * 0.70 + ty1, (cx - sx0) * 0.70 + sx0, (cy - sy0) * 0.70 + sy0, sx0, sy0);
  43. }
  44. });
  45. module.exports = _default;