index.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var component_1 = require('../common/component');
  4. var utils_1 = require('../common/utils');
  5. var color_1 = require('../common/color');
  6. var canvas_1 = require('./canvas');
  7. function format(rate) {
  8. return Math.min(Math.max(rate, 0), 100);
  9. }
  10. var PERIMETER = 2 * Math.PI;
  11. var BEGIN_ANGLE = -Math.PI / 2;
  12. var STEP = 1;
  13. component_1.VantComponent({
  14. props: {
  15. text: String,
  16. lineCap: {
  17. type: String,
  18. value: 'round',
  19. },
  20. value: {
  21. type: Number,
  22. value: 0,
  23. observer: 'reRender',
  24. },
  25. speed: {
  26. type: Number,
  27. value: 50,
  28. },
  29. size: {
  30. type: Number,
  31. value: 100,
  32. observer: function () {
  33. this.drawCircle(this.currentValue);
  34. },
  35. },
  36. fill: String,
  37. layerColor: {
  38. type: String,
  39. value: color_1.WHITE,
  40. },
  41. color: {
  42. type: [String, Object],
  43. value: color_1.BLUE,
  44. observer: function () {
  45. var _this = this;
  46. this.setHoverColor().then(function () {
  47. _this.drawCircle(_this.currentValue);
  48. });
  49. },
  50. },
  51. type: {
  52. type: String,
  53. value: '',
  54. },
  55. strokeWidth: {
  56. type: Number,
  57. value: 4,
  58. },
  59. clockwise: {
  60. type: Boolean,
  61. value: true,
  62. },
  63. },
  64. data: {
  65. hoverColor: color_1.BLUE,
  66. },
  67. methods: {
  68. getContext: function () {
  69. var _this = this;
  70. var _a = this.data,
  71. type = _a.type,
  72. size = _a.size;
  73. if (type === '') {
  74. var ctx = wx.createCanvasContext('van-circle', this);
  75. return Promise.resolve(ctx);
  76. }
  77. var dpr = wx.getSystemInfoSync().pixelRatio;
  78. return new Promise(function (resolve) {
  79. wx.createSelectorQuery()
  80. .in(_this)
  81. .select('#van-circle')
  82. .node()
  83. .exec(function (res) {
  84. var canvas = res[0].node;
  85. var ctx = canvas.getContext(type);
  86. if (!_this.inited) {
  87. _this.inited = true;
  88. canvas.width = size * dpr;
  89. canvas.height = size * dpr;
  90. ctx.scale(dpr, dpr);
  91. }
  92. resolve(canvas_1.adaptor(ctx));
  93. });
  94. });
  95. },
  96. setHoverColor: function () {
  97. var _this = this;
  98. var _a = this.data,
  99. color = _a.color,
  100. size = _a.size;
  101. if (utils_1.isObj(color)) {
  102. return this.getContext().then(function (context) {
  103. var LinearColor = context.createLinearGradient(size, 0, 0, 0);
  104. Object.keys(color)
  105. .sort(function (a, b) {
  106. return parseFloat(a) - parseFloat(b);
  107. })
  108. .map(function (key) {
  109. return LinearColor.addColorStop(
  110. parseFloat(key) / 100,
  111. color[key]
  112. );
  113. });
  114. _this.hoverColor = LinearColor;
  115. });
  116. }
  117. this.hoverColor = color;
  118. return Promise.resolve();
  119. },
  120. presetCanvas: function (context, strokeStyle, beginAngle, endAngle, fill) {
  121. var _a = this.data,
  122. strokeWidth = _a.strokeWidth,
  123. lineCap = _a.lineCap,
  124. clockwise = _a.clockwise,
  125. size = _a.size;
  126. var position = size / 2;
  127. var radius = position - strokeWidth / 2;
  128. context.setStrokeStyle(strokeStyle);
  129. context.setLineWidth(strokeWidth);
  130. context.setLineCap(lineCap);
  131. context.beginPath();
  132. context.arc(position, position, radius, beginAngle, endAngle, !clockwise);
  133. context.stroke();
  134. if (fill) {
  135. context.setFillStyle(fill);
  136. context.fill();
  137. }
  138. },
  139. renderLayerCircle: function (context) {
  140. var _a = this.data,
  141. layerColor = _a.layerColor,
  142. fill = _a.fill;
  143. this.presetCanvas(context, layerColor, 0, PERIMETER, fill);
  144. },
  145. renderHoverCircle: function (context, formatValue) {
  146. var clockwise = this.data.clockwise;
  147. // 结束角度
  148. var progress = PERIMETER * (formatValue / 100);
  149. var endAngle = clockwise
  150. ? BEGIN_ANGLE + progress
  151. : 3 * Math.PI - (BEGIN_ANGLE + progress);
  152. this.presetCanvas(context, this.hoverColor, BEGIN_ANGLE, endAngle);
  153. },
  154. drawCircle: function (currentValue) {
  155. var _this = this;
  156. var size = this.data.size;
  157. this.getContext().then(function (context) {
  158. context.clearRect(0, 0, size, size);
  159. _this.renderLayerCircle(context);
  160. var formatValue = format(currentValue);
  161. if (formatValue !== 0) {
  162. _this.renderHoverCircle(context, formatValue);
  163. }
  164. context.draw();
  165. });
  166. },
  167. reRender: function () {
  168. var _this = this;
  169. // tofector 动画暂时没有想到好的解决方案
  170. var _a = this.data,
  171. value = _a.value,
  172. speed = _a.speed;
  173. if (speed <= 0 || speed > 1000) {
  174. this.drawCircle(value);
  175. return;
  176. }
  177. this.clearInterval();
  178. this.currentValue = this.currentValue || 0;
  179. this.interval = setInterval(function () {
  180. if (_this.currentValue !== value) {
  181. if (_this.currentValue < value) {
  182. _this.currentValue += STEP;
  183. } else {
  184. _this.currentValue -= STEP;
  185. }
  186. _this.drawCircle(_this.currentValue);
  187. } else {
  188. _this.clearInterval();
  189. }
  190. }, 1000 / speed);
  191. },
  192. clearInterval: function () {
  193. if (this.interval) {
  194. clearInterval(this.interval);
  195. this.interval = null;
  196. }
  197. },
  198. },
  199. mounted: function () {
  200. var _this = this;
  201. this.currentValue = this.data.value;
  202. this.setHoverColor().then(function () {
  203. _this.drawCircle(_this.currentValue);
  204. });
  205. },
  206. destroyed: function () {
  207. this.clearInterval();
  208. },
  209. });