chaojie-ComfyUI-MotionCtrl/tools/draw.html

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>TRAJ MOTION DESIGNER</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><br/>
  <a href="draw.html">Traj tool</a> | <a href="index.html">Camera tool</a>
  <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>