Pinjasaur
5/12/2017 - 6:41 PM

Ability to draw a ruler on a page to measure distances between things. Source: https://stackoverflow.com/questions/37954379/how-can-i-measu

Ability to draw a ruler on a page to measure distances between things.

Source: https://stackoverflow.com/questions/37954379/how-can-i-measure-pixels-in-chrome-without-an-extension#answer-37967198

ruler.min.js
content_copyfile_download
javascript:!function(){var a,b,c=document.createElementNS("http://www.w3.org/2000/svg","svg");c.setAttribute("style","position: absolute; top:0;left:0;height: "+document.body.clientHeight+"px;width: 100%;z-index: 2147483647");var d=document.createElementNS("http://www.w3.org/2000/svg","line");d.setAttribute("style","stroke-width: 4; stroke: red"),c.appendChild(d),document.body.appendChild(c),document.body.addEventListener("mousedown",function(c){a=c.pageX,b=c.pageY}),document.body.addEventListener("mousemove",function(c){void 0!==a&&(d.setAttribute("x1",a),d.setAttribute("x2",c.pageX),d.setAttribute("y1",b),d.setAttribute("y2",c.pageY),console.log([a,b]," to ",[c.pageX,c.pageY],"Distance:",Math.sqrt(Math.pow(a-c.pageX,2)+Math.pow(b-c.pageY,2))))}),document.body.addEventListener("mouseup",function(c){a=void 0,b=void 0})}();
ruler.js
content_copyfile_download
javascript:(function() {
  var fromX, fromY;
  var svg = document.createElementNS ('http://www.w3.org/2000/svg',"svg");
  svg.setAttribute("style", "position: absolute; top:0;left:0;height: " + document.body.clientHeight + "px;width: 100%;z-index: 2147483647");
  var line = document.createElementNS('http://www.w3.org/2000/svg','line');
  line.setAttribute("style", "stroke-width: 4; stroke: red");

  svg.appendChild(line);
  document.body.appendChild(svg);

  document.body.addEventListener("mousedown", function (e) {
    fromX = e.pageX;
    fromY = e.pageY;
  });

  document.body.addEventListener("mousemove", function (e) {
    if (fromX === undefined) {
      return;
    }

    line.setAttribute("x1", fromX);
    line.setAttribute("x2", e.pageX);
    line.setAttribute("y1", fromY);
    line.setAttribute("y2", e.pageY);

    console.log(
      [fromX, fromY], " to ", [e.pageX, e.pageY], "Distance:",
      Math.sqrt(Math.pow(fromX - e.pageX, 2) + Math.pow(fromY - e.pageY, 2))
    );
  });

  document.body.addEventListener("mouseup", function (e) {
    fromX = undefined;
    fromY = undefined;
  });
})();