daybrush / guides

A Guides component that can draw ruler and manage guidelines.
https://daybrush.com/guides/
MIT License
336 stars 43 forks source link

using other measurement unit #26

Open jimmywarting opened 3 years ago

jimmywarting commented 3 years ago

I wish to use cm instead of px and i found it quite hard to figure out how to solve it. could you help me?

here is my relevant InfiniteViewer + Guides

    const horizontalGuides = new Guides($("#horizontal"), {
      unit: 'cm', ??? // don't work
      snaps: [0, ???],
    }).on("changeGuides", ({ guides }) => {
      moveable.horizontalGuidelines = guides
    });
    const verticalGuides = new Guides($("#vertical"), {
      type: "vertical",
      unit: 'cm', ??? // don't work
      snaps: [0, ???],
    }).on("changeGuides", ({ guides }) => {
      moveable.verticalGuidelines = guides
    });

    const viewer = new InfiniteViewer(
      viewer,
      viewport,
      {}
    )
    .on('scroll', evt => {
      horizontalGuides.scroll(evt.scrollLeft)
      horizontalGuides.scrollGuides(evt.scrollTop)
      verticalGuides.scroll(evt.scrollTop)
      verticalGuides.scrollGuides(evt.scrollLeft)
    })

my viewport is:

    #viewport {
      width: 8.56cm;
      height: 5.398cm;
    }

if it helps here is the result of viewport.getClientRect of the div height: 204.015625 === 5.398cm width: 323.515625 === 8.56cm my dpi is 96 if that is to any use.

is there some formel to tweak the zoom or anything like that? or some method to change the guides to use another unit other then px?

daybrush commented 3 years ago

@jimmywarting

zoom is default 1 unit is default 50(50px)

if you cm unit, set zoom={37.7952755}