Last active
March 27, 2022 15:57
-
-
Save mosherbrian/df42fed801f5749d7affb75ea2eb5c20 to your computer and use it in GitHub Desktop.
TamperMonkey script to help find vertices of CSS clip-path: polygon() function for CSS drawing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==UserScript== | |
// @name vertexFinder | |
// @namespace http://tampermonkey.net/ | |
// @version 0.1 | |
// @description logs clicked vertex coordinates in parent element percentages to console for CSS polygon clip-path | |
// @author Brian Mosher | |
// @match https://mosherbrian.github.io/* | |
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== | |
// @grant none | |
// ==/UserScript== | |
function roundToTwo(num) { | |
return +(Math.round(num + "e+2") + "e-2"); | |
} | |
function vertexFinder(e) | |
{ | |
//console.log(e.target); | |
const { offsetWidth: parentWidth, offsetHeight: parentHeight, offsetLeft: parentLeft, offsetTop: parentTop } = e.target; | |
const { offsetX: mouseX, offsetY: mouseY } = e; | |
//console.table( { parentWidth, parentHeight, parentLeft, parentTop, mouseX, mouseY } ); | |
console.log(`${roundToTwo((mouseX/parentWidth)*100)}% ${roundToTwo((mouseY/parentHeight)*100)}%`); | |
} | |
(function () { | |
'use strict'; | |
console.log('vertexFinder started!'); | |
document.addEventListener('click', vertexFinder ); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment