From 4e4f4e34ac7102e2e755b4067b334e8092e681ae Mon Sep 17 00:00:00 2001
From: "fles@qq.com" <snrc@8899>
Date: Wed, 3 Jan 2024 08:55:15 +0800
Subject: [PATCH] add draw traj tool

---
 tools/draw.html | 219 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 219 insertions(+)
 create mode 100644 tools/draw.html

diff --git a/tools/draw.html b/tools/draw.html
new file mode 100644
index 0000000..d75ceef
--- /dev/null
+++ b/tools/draw.html
@@ -0,0 +1,219 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <title>HTML5 Canvas Drawing</title>
+</head>
+
+<body>
+  Click on canvas to draw traj<br/>
+  <canvas id="canvas" height="256" width="256" style="border:1px dotted gray;"></canvas>
+  <br/>
+  Results:<br/>
+  <textarea id="traj" style="width:256px;height:128px;" placeholder="points"></textarea>
+  <script>
+		// Variables for referencing the canvas and 2dcanvas context
+		var canvas,ctx;
+
+		// Variables to keep track of the mouse position and left-button status
+		var mouseX,mouseY,moving, mouseDown=0;
+
+		// Variables to keep track of the touch position
+		var touchX,touchY;
+
+		var userDrawnPixels = [];
+
+		// Get the touch position relative to the top-left of the canvas
+		// When we get the raw values of pageX and pageY below, they take into account the scrolling on the page
+		// but not the position relative to our target div. We'll adjust them using "target.offsetLeft" and
+		// "target.offsetTop" to get the correct values in relation to the top left of the canvas.
+		function getTouchPos(e) {
+				if (!e)
+				    var e = event;
+
+				if(e.touches) {
+				    if (e.touches.length == 1) { // Only deal with one finger
+				        var touch = e.touches[0]; // Get the information for finger #1
+				        touchX=touch.pageX-touch.target.offsetLeft;
+				        touchY=touch.pageY-touch.target.offsetTop;
+				    }
+				}
+		}
+
+		// Set-up the canvas and add our event handlers after the page has loaded
+		function init() {
+				// Get the specific canvas element from the HTML document
+				canvas = document.getElementById('canvas');
+
+				canvas.focus();
+
+				canvas.width  = (window.innerWidth > 256) ? 256 : window.innerWidth;
+				canvas.height = (window.innerHeight > 256) ? 256 : window.innerHeight;
+
+				// If the browser supports the canvas tag, get the 2d drawing context for this canvas
+				if (canvas.getContext)
+				    ctx = canvas.getContext('2d');
+
+				// Check that we have a valid context to draw on/with before adding event handlers
+				if (ctx) {
+				    // React to mouse events on the canvas, and mouseup on the entire document
+				    canvas.addEventListener('mousedown', sketchpad_mouseDown, false);
+				    canvas.addEventListener('mousemove', sketchpad_mouseMove, false);
+				    canvas.addEventListener('mouseup', mouseOrTouchUp, false);
+
+				    // React to touch events on the canvas
+				    canvas.addEventListener('touchstart', sketchpad_touchStart, false);
+				    canvas.addEventListener('touchmove', sketchpad_touchMove, false);
+				    canvas.addEventListener('touchend', mouseOrTouchUp, false);
+				}
+		}
+
+		// Draws a dot at a specific position on the supplied canvas name
+		// Parameters are: A canvas context, the x position, the y position, the size of the dot
+		function drawLine(ctx, x, y, size) {
+				ctx.fillStyle = "lightgrey";
+				ctx.beginPath();
+
+				var n = userDrawnPixels.length;
+				var point = userDrawnPixels[n-1];
+
+				if ((n>1)) {// && moving
+				    var prevPoint = userDrawnPixels[n-2];
+				    ctx.moveTo(prevPoint[0],prevPoint[1]);
+				    ctx.lineTo(point[0], point[1]);
+				} else {
+				    //ctx.moveTo(point[0],point[0]);
+				    //ctx.lineTo(point[0], point[1]);
+				}
+
+				ctx.lineCap = "round";
+				ctx.lineJoin = "round";
+				ctx.lineWidth = size;
+				ctx.stroke();
+				ctx.closePath();
+				//ctx.fill();
+		}
+
+
+		function drawDot(ctx, x, y, size) {
+				ctx.fillStyle = "lightgrey";
+
+				// Draw a filled circle
+				ctx.arc(x, y, size, 0, Math.PI*2, true);
+				ctx.closePath();
+				ctx.fill();
+		}
+
+				// Keep track of the mouse button being pressed and draw a dot at current location
+		function sketchpad_mouseDown(e) {
+                /*getMousePos(e);
+                
+				userDrawnPixelsPush([mouseX, mouseY]);
+				drawLine(ctx,mouseX,mouseY,6);
+
+				mouseDown=1;*/
+		}
+
+
+		function mouseOrTouchUp(e) {
+				//mouseDown=0;
+				//moving=0;
+                // Update the mouse co-ordinates when moved
+
+                if(!mouseX){
+                    getMousePos(e);
+                    ctx.beginPath();
+				    drawDot(ctx,mouseX,mouseY,6);
+                    
+                    userDrawnPixelsPush([mouseX, mouseY]);
+				    moving=1;
+                }else{
+                    getMousePos(e);
+				// Draw a dot if the mouse button is currently being pressed
+				//if (mouseDown==1) {
+				    userDrawnPixelsPush([mouseX, mouseY]);
+                    //drawDot(ctx,mouseX,mouseY,6);
+				    drawLine(ctx,mouseX,mouseY,6);
+				    moving=1;
+				//}
+                }
+		}
+
+		function sketchpad_mouseMove(e) {
+				/*// Update the mouse co-ordinates when moved
+				getMousePos(e);
+
+				// Draw a dot if the mouse button is currently being pressed
+				if (mouseDown==1) {
+				    drawLine(ctx,mouseX,mouseY,6);
+				    userDrawnPixelsPush([mouseX, mouseY]);
+				    moving=1;
+				}*/
+		}
+
+		// Get the current mouse position relative to the top-left of the canvas
+		function getMousePos(e) {
+				if (!e)
+				    var e = event;
+
+				if (e.offsetX) {
+				    mouseX = e.offsetX;
+				    mouseY = e.offsetY;
+				}
+				else if (e.layerX) {
+				    mouseX = e.layerX;
+				    mouseY = e.layerY;
+				}
+		}
+
+		// Draw something when a touch start is detected
+		function sketchpad_touchStart() {
+				//getTouchPos();
+				/*userDrawnPixelsPush([touchX, touchY]);
+				
+
+				// Prevent a scrolling action as a result of this touchmove triggering.
+				event.preventDefault();
+
+				moving=1;*/
+                /*userDrawnPixelsPush([touchX, touchY]);
+				drawLine(ctx,touchX,touchY,6);
+
+				mouseDown=1;*/
+                
+		}
+
+		function sketchpad_touchMove(e) {
+				/*getTouchPos(e);
+				userDrawnPixelsPush([touchX, touchY]);
+				drawLine(ctx,touchX,touchY,6);
+
+				// Prevent a scrolling action as a result of this touchmove triggering.
+				event.preventDefault();*/
+		}
+        
+        function SaveTraj(){
+            alert(JSON.stringify(userDrawnPixels));
+        }
+        
+        var userDrawnPixels1024=[];
+        function userDrawnPixelsPush(point){
+            if(userDrawnPixels.length==0&&point[0]!=null){
+                userDrawnPixels.push(point);
+                userDrawnPixels1024.push([point[0]*4,point[1]*4]);
+            }else{
+                if(point[0]!=null&&(userDrawnPixels[userDrawnPixels.length-1][0]!=point[0]||userDrawnPixels[userDrawnPixels.length-1][1]!=point[1])){
+                    userDrawnPixels.push(point);
+                    userDrawnPixels1024.push([point[0]*4,point[1]*4]);
+                }
+            }
+            
+            document.getElementById('traj').value=JSON.stringify(userDrawnPixels1024);
+        }
+
+		init();
+	</script>
+</body>
+</html>
\ No newline at end of file