CODEWITHSUNDEEP
pythonpython-3.xcanvastkintertk-toolkit
Tweakforce_LG
Tweakforce_LG

Reputation: 117

TKinter canvas X,Y Plotting

Im wondering if there is a program online or downloadable that allows you to set a desired window size, draw lines to make a drawing and then it prints the origin (x,y) valuses and end (x,y) values for all drawn lines. This would really speed up my line drawing on Tkinter as i dont have to keep doing trial and error to get my lines to match up and join. If there isn't such a program, are there any ways of drawing on a canvas much more quickly than (x,y) trial and error.Thanks :)

Upvotes: 1

Views: 392

Answers (1)

Robert I
Robert I

Reputation: 1527

I made you a little something :)

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <meta charset="utf-8">
  <title>Example</title>
  <style>
    body {
      height: 3000px;
    }
    
    .dot {
      width: 2px;
      height: 2px;
      background-color: black;
      position: absolute;
    }
  </style>
</head>

<body>
  <div>Click mouse to start then click again to pause or click clear</div>
  <button id="clear">Mouse over to clear</button>
  <textarea id="results"></textarea>
  <script>
    (function() {
      "use strict";

      var draw = false;

      function clear() {
        $(".dot").remove();
        $("#results").html("");
      }

      function stop() {
        draw = false;
      }

      function start() {
        draw = true;
      }
      $("#clear").mouseover(clear);
      document.onmousedown = start;
      document.onmouseup = stop;
      document.onmousemove = handleMouseMove;

      function handleMouseMove(event) {
        if (draw == false) return;
        var dot, eventDoc, doc, body, pageX, pageY;

        event = event || window.event; // IE-ism

        // If pageX/Y aren't available and clientX/Y
        // are, calculate pageX/Y - logic taken from jQuery
        // Calculate pageX/Y if missing and clientX/Y available
        if (event.pageX == null && event.clientX != null) {
          eventDoc = (event.target && event.target.ownerDocument) || document;
          doc = eventDoc.documentElement;
          body = eventDoc.body;

          event.pageX = event.clientX +
            (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
            (doc && doc.clientLeft || body && body.clientLeft || 0);
          event.pageY = event.clientY +
            (doc && doc.scrollTop || body && body.scrollTop || 0) -
            (doc && doc.clientTop || body && body.clientTop || 0);
        }

        // Add a dot to follow the cursor
        dot = document.createElement('div');
        dot.className = "dot";
        dot.style.left = event.pageX + "px";
        dot.style.top = event.pageY + "px";
        dot.style.position = "absolute";
        document.body.appendChild(dot);
        var result = event.pageX + "," + event.pageY + "\n";
        $("#results").append(result);
      }
    })();
  </script>
</body>

</html>

Just click the mouse and draw on the output and then you can copy the textbox output.

Upvotes: 1

Related Questions