☰

Line Drawing Tool

Press Space to snap to right angles

目前为 2020-08-06 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name        Line Drawing Tool
  3. // @namespace   https://greasyfork.org/users/281093
  4. // @match       https://sketchful.io/
  5. // @grant       none
  6. // @version     1.0
  7. // @license		MIT
  8. // @author      Bell
  9. // @description Press Space to snap to right angles
  10. // ==/UserScript==
  11. /* jshint esversion: 6 */
  12. /* eslint-disable no-undef */
  13.  
  14. const canvas = document.querySelector("#canvas");
  15. const ctx = canvas.getContext("2d");
  16.  
  17. const lineCanvas = document.createElement("canvas");
  18. const lineCtx = lineCanvas.getContext("2d");
  19. lineCanvas.style.position = "absolute";
  20. lineCanvas.style.cursor = "crosshair";
  21. lineCanvas.style.width = "100%";
  22. lineCanvas.style.display = "none";
  23. lineCanvas.style.userSelect = "none";
  24. lineCanvas.oncontextmenu = () => { return false; };
  25. [lineCanvas.width, lineCanvas.height] = [canvas.width, canvas.height];
  26. canvas.parentElement.insertBefore(lineCanvas, canvas);
  27.  
  28. lineCanvas.clear = () => {
  29. 	lineCtx.clearRect(0, 0, lineCanvas.width, lineCanvas.height);
  30. }
  31.  
  32. let origin = {};
  33. let realOrigin = {};
  34. let previewPos = {};
  35. let realPos = {};
  36. let canvasHidden = true;
  37. let drawingLine = false;
  38. let snap = false;
  39.  
  40. document.addEventListener('keydown', (e) => {
  41. 	if (e.code === "ShiftLeft" && canvasHidden) {
  42. 		lineCanvas.style.display = "";
  43. 		canvasHidden = false;
  44. 	}
  45. 	else if (e.code === "Space") {
  46. 		snap = true;
  47. 	}
  48. });
  49.  
  50. document.addEventListener('pointermove', (e) => {
  51. 	previewPos = getPos(e);
  52. 	realPos = getRealPos(e);
  53. 	
  54. 	if (canvasHidden || !drawingLine) return;
  55. 	lineCanvas.clear();
  56. 	drawPreviewLine(previewPos);
  57. });
  58.  
  59. document.addEventListener('keyup', (e) => {
  60. 	if (e.code === "ShiftLeft" && !canvasHidden) {
  61. 		lineCanvas.style.display = "none";
  62. 		canvasHidden = true;
  63. 		resetLineCanvas();
  64. 	}
  65. 	else if (e.code === "Space") {
  66. 		snap = false;
  67. 	}
  68. });
  69.  
  70. lineCanvas.addEventListener('pointerdown', (e) => {
  71. 	origin = getPos(e);
  72. 	realOrigin = getRealPos(e);
  73. 	drawingLine = true;
  74. });
  75.  
  76. document.addEventListener('pointerup', (e) => {
  77. 	if (!drawingLine) return;
  78. 	
  79. 	lineCanvas.style.pointerEvents = "all";
  80. 	drawLine(realOrigin.x, realOrigin.y, realPos.x, realPos.y);
  81. 	resetLineCanvas();
  82. });
  83.  
  84. function resetLineCanvas() {
  85. 	drawingLine = false;
  86. 	lineCanvas.clear();
  87. }
  88.  
  89. function getPos(event) {
  90. 	const canvasRect = canvas.getBoundingClientRect();
  91. 	const canvasScale = canvas.width / canvasRect.width;
  92. 	return {
  93. 		x: (event.clientX - canvasRect.left) * canvasScale,
  94. 		y: (event.clientY - canvasRect.top) * canvasScale,
  95. 	};
  96. }
  97.  
  98. function getRealPos(event) {
  99.     return {
  100.         x: event.clientX,
  101.         y: event.clientY
  102.     };
  103. }
  104.  
  105. function drawPreviewLine(pos) {
  106. 	lineCtx.beginPath();
  107. 	lineCtx.moveTo(origin.x, origin.y);
  108. 	
  109. 	if (snap) {
  110. 		if (Math.abs(pos.x - origin.x) < Math.abs(pos.y - origin.y)) {
  111. 			lineCtx.lineTo(origin.x, pos.y);
  112. 		} else {
  113. 			lineCtx.lineTo(pos.x, origin.y);
  114. 		}
  115. 	} else {
  116. 		lineCtx.lineTo(pos.x, pos.y);
  117. 	}
  118. 	
  119. 	lineCtx.stroke();
  120. }
  121.  
  122. function drawLine(x1, y1, x2, y2) {
  123. 	let coords = { x: x1, y: y1 };
  124. 	let newCoords = { x: x2, y: y2 };
  125. 	
  126. 	if (snap) {
  127. 		if (Math.abs(x2 - x1) < Math.abs(y2 - y1)) {
  128. 			newCoords.x = x1;
  129. 		} else {
  130. 			newCoords.y = y1;
  131. 		}
  132. 	}
  133. 	
  134.     canvas.dispatchEvent(createMouseEvent("pointerdown", coords));
  135.     canvas.dispatchEvent(createMouseEvent("pointermove", newCoords));
  136.     canvas.dispatchEvent(createMouseEvent("pointerup", newCoords));
  137. }
  138.  
  139. function createMouseEvent(name, pos) {
  140.     return new MouseEvent(name, {
  141.         bubbles: false,
  142.         clientX: pos.x,
  143.         clientY: pos.y,
  144.         button: 0
  145.     });
  146. }