2d9efd83e2944389f725d00fffdbf3d27bf2b8dd681371c091e9a03e0552e91e952fc4d331c16ef1217815e80a6a61bc677aa06c515546e7c5adf701924b3e 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. /*jslint browser: true */
  2. const CircleDrawer = function (canvasId, undoManager) {
  3. 'use strict';
  4. const CANVAS_WIDTH = document.getElementById(canvasId).width;
  5. const CANVAS_HEIGHT = document.getElementById(canvasId).height;
  6. const MIN_CIRCLE_RADIUS = 10;
  7. const MAX_CIRCLE_RADIUS = 40;
  8. const circles = [];
  9. const circleId = 0;
  10. const drawingCanvas = window.document.getElementById(canvasId);
  11. let groupId;
  12. if (drawingCanvas.getContext === undefined) {
  13. return;
  14. }
  15. const drawingContext = drawingCanvas.getContext('2d');
  16. function clear() {
  17. drawingContext.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  18. }
  19. function clearAll() {
  20. clear();
  21. circles.length = 0;
  22. }
  23. function drawCircle(x, y, radius, color) {
  24. drawingContext.fillStyle = color;
  25. drawingContext.beginPath();
  26. drawingContext.arc(x, y, radius, 0, Math.PI * 2, true);
  27. drawingContext.closePath();
  28. drawingContext.fill();
  29. }
  30. function draw() {
  31. clear();
  32. var i, circle;
  33. for (i = 0; i < circles.length; i = i + 1) {
  34. circle = circles[i];
  35. drawCircle(circle.x, circle.y, circle.radius, circle.color);
  36. }
  37. }
  38. function removeCircle(id) {
  39. var i = 0,
  40. index = -1;
  41. for (i = 0; i < circles.length; i += 1) {
  42. if (circles[i].id === id) {
  43. index = i;
  44. }
  45. }
  46. if (index !== -1) {
  47. circles.splice(index, 1);
  48. }
  49. draw();
  50. }
  51. function createCircle(attrs) {
  52. circles.push(attrs);
  53. draw();
  54. undoManager.add({
  55. groupId,
  56. undo: function () {
  57. removeCircle(attrs.id);
  58. },
  59. redo: function () {
  60. createCircle(attrs);
  61. },
  62. });
  63. }
  64. function setGroupId(id) {
  65. groupId = id;
  66. }
  67. function clearGroupId() {
  68. groupId = undefined;
  69. }
  70. drawingCanvas.addEventListener(
  71. 'click',
  72. function (e) {
  73. var mouseX = 0,
  74. mouseY = 0,
  75. intColor,
  76. hexColor,
  77. color,
  78. id = circleId,
  79. radius;
  80. if (!e) {
  81. e = window.event;
  82. }
  83. if (e.pageX || e.pageY) {
  84. mouseX = e.pageX;
  85. mouseY = e.pageY;
  86. } else if (e.clientX || e.clientY) {
  87. mouseX =
  88. e.clientX +
  89. document.body.scrollLeft +
  90. document.documentElement.scrollLeft;
  91. mouseY =
  92. e.clientY +
  93. document.body.scrollTop +
  94. document.documentElement.scrollTop;
  95. }
  96. mouseX -= drawingCanvas.offsetLeft;
  97. mouseY -= drawingCanvas.offsetTop;
  98. intColor = Math.floor(Math.random() * (256 * 256 * 256));
  99. hexColor = parseInt(intColor, 10).toString(16);
  100. color = '#' + (hexColor.length < 2 ? '0' + hexColor : hexColor);
  101. id = id + 1;
  102. radius =
  103. MIN_CIRCLE_RADIUS +
  104. Math.random() * (MAX_CIRCLE_RADIUS - MIN_CIRCLE_RADIUS);
  105. createCircle({
  106. id: id,
  107. x: mouseX,
  108. y: mouseY,
  109. radius: radius,
  110. color: color,
  111. });
  112. },
  113. false,
  114. );
  115. return {
  116. clearAll,
  117. setGroupId,
  118. clearGroupId,
  119. };
  120. };