A Guides component that can draw ruler and manage guidelines.

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="description" content="A Guides component that can draw ruler and manage guidelines." /> <meta property="og:title" content="A Guides component that can draw ruler and manage guidelines."> <meta property="og:url" content="https://daybrush.com/guides"> <meta property="og:image" content="https://daybrush.com/guides/images/guides1920x1080.png"> <meta property="og:description" content="A Guides component that can draw ruler and manage guidelines."> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="A Guides component that can draw ruler and manage guidelines."> <meta name="twitter:url" content="https://daybrush.com/guides"> <meta name="twitter:image" content="https://daybrush.com/guides/images/guides1920x1080.png"> <meta name="twitter:description" content="A Guides component that can draw ruler and manage guidelines."> <meta name="theme-color" content="#f5f5f5"> <title>A Guides component that can draw ruler and manage guidelines.</title> <link rel="stylesheet" type="text/css" href="./index.css" /> </head> <body> <div class="box"></div> <div class="ruler horizontal"> </div> <div class="ruler vertical"> </div> <div class="container"> <img src="https://daybrush.com/guides/images/guides.png" width="200" alt="guides" /> <p class="dragit">Drag Screen & Rulers!</p> <p class="badges"> <a href="https://www.npmjs.com/package/@scena/guides" target="_blank"> <img src="https://img.shields.io/npm/v/@scena/guides.svg?style=flat-square&color=007acc&label=version" alt="npm version" /></a> <a href="https://github.com/daybrush/guides" target="_blank"> <img src="https://img.shields.io/github/stars/daybrush/guides.svg?color=42b883&style=flat-square" /></a> <a href="https://github.com/daybrush/guides" target="_blank"> <img src="https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square" /> </a> <a href="https://github.com/daybrush/guides/blob/master/LICENSE" target="_blank"> <img src="https://img.shields.io/github/license/daybrush/guides.svg?style=flat-square&label=license&color=08CE5D" /> </a> <a href="https://github.com/daybrush/guides/tree/master/packages/react-guides" target="_blank"><img alt="React" src="https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&color=61daeb"></a> <a href="https://github.com/daybrush/guides/tree/master/packages/preact-guides" target="_blank"><img alt="Preact" src="https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&color=673ab8"></a> <a href="https://github.com/daybrush/guides/tree/master/packages/ngx-guides" target="_blank"><img alt="Angular" src="https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&color=C82B38"></a> <a href="https://github.com/daybrush/guides/tree/master/packages/vue-guides" target="_blank"><img alt="Vue" src="https://img.shields.io/static/v1.svg?label=&message=Vue&style=flat-square&color=3fb984"></a> <a href="https://github.com/daybrush/guides/tree/master/packages/svelte-guides" target="_blank"><img alt="Svelte" src="https://img.shields.io/static/v1.svg?label=&message=Svelte&style=flat-square&color=C82B38"></a> </p> <p class="description">A Guides component that can draw ruler and manage guidelines.</p> <div class="buttons"> <a href="https://github.com/daybrush/guides" target="_blank">Download</a>  </div> </div> <script src="https://daybrush.com/gesto/release/latest/dist/gesto.js"></script> <script src="./release/latest/dist/guides.js"></script> <script> const guides1 = new Guides(document.querySelector(".ruler.horizontal"), { type: "horizontal", displayDragPos: true, rulerStyle: { left: "30px", width: "calc(100% - 30px)", height: "100%" }, useResizeObserver: true, }); const guides2 = new Guides(document.querySelector(".ruler.vertical"), { type: "vertical", displayDragPos: true, rulerStyle: { top: "30px", height: "calc(100% - 30px)", width: "100%" }, useResizeObserver: true, }); let scrollX = 0; let scrollY = 0; const box = document.querySelector(".box"); new Gesto(document.body).on("dragStart", e => { if (e.inputEvent.target === box || e.inputEvent.target.nodeName === "A") { return false; } }).on("drag", e => { scrollX -= e.deltaX; scrollY -= e.deltaY; guides1.scroll(scrollX); guides1.scrollGuides(scrollY); guides2.scroll(scrollY); guides2.scrollGuides(scrollX); }); box.addEventListener("click", () => { scrollX = 0; scrollY = 0; guides1.scroll(0); guides1.scrollGuides(0); guides2.scroll(0); guides2.scrollGuides(0); }); </script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-TRBNXHQ0ZF"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-TRBNXHQ0ZF'); </script> </body> </html>

CINXE.COM

A Guides component that can draw ruler and manage guidelines.