Ruler's unit cannot be defined

[ststeiger]

I need such a ruler to design a print document. Your uses pixels, which is "worthless".

It should have a "unit"-switch, e.g. cm/mm/inches: https://codepen.io/j4n/pen/wBVVVN

[chnabeel002]

I need a "Unit Functionality in cm" Please add this functionality / If you have an idea, how to implement in this library please share us .Thanks in advance.

[MrFrankel]

It sounds like a good idea but I simply don't have the time to add it.

[ststeiger]

Yea, neither have I ;)

[julientype]

its a wast of time..... here..... 1in = 96dpi what happens is everything must lay out to a pixel so like when you get a return value of 2.23456 the ruler needs to round it out for you...... now you have a blur setup...... let say you want to run a cnc the output is a blur output.... and you need crazy calibration yet the errors are from rounding numbers off.... so to build things without errors use PX and your dpi per inch.... no joke.... use a draw program start with mm or inches then convert it to px...... if you get 100.234593px you have a blur drawing that cant convert to px correctly....

conversion is useless..... start with px and end with px..... like cnc bit ... we get mm or inches router bits not px bits so you convert the inch bit to px value and if its off like 100.12345 then you cant use the bit..... it simply creates a distorted output... move a motor 100px is simple but not 100.12345 and when you give and take 100 steps in missing px to round off it ends with a blur......

[graphics-et-al]

Hi guys, I had this problem too. I hacked a little solution that only works in mm but it gives an idea on how to proceed: 2 steps needed: At 96dpi you set the scale at 0.3741, e.g.

    myRuler = new ruler({
        container: document.querySelector('#the_container'),// reference to DOM element to apply rulers on
        enableMouseTracking: false,
        enableToolTip: true
    });
    myRuler.api.setScale(0.3741);

In ruler.js, replace the function drawPoints like so:

const drawPoints = () =>{
        let pointLength = 0,
            label = '',
            delta = 0,
            draw = false,
            lineLengthMax = 0,
            lineLengthMed = rulThickness / 2,
            lineLengthMin = rulThickness / 2;
        // keep track of the current scaled position- this is in mm when the rulScale is 0.3741
        let currentScaledPos = 0;
        // we need to keep track of the old scaled position
        let oldcurrentScaledPos = -1;
        for (let pos = 0; pos <= rulLength; pos += 1) {
            draw = false;
            label = '';
            delta = ((rulLength / 2) - pos);
            // get the current scaled position
            currentScaledPos = Math.round(Math.abs(delta) * rulScale);
            // we make a tick every 20mm
            // because the currentScaledPosition can be the same for some pos's we have to make sure the currentScaledPos != oldcurrentScaledPos
            // else we get 2 ticks very close to each other
            if ((currentScaledPos % 20 === 0) && (currentScaledPos != oldcurrentScaledPos)) {
                oldcurrentScaledPos = currentScaledPos;pointLength = lineLengthMax;
                label = currentScaledPos;
                draw = true;
            } else if ((currentScaledPos % 2 === 0) && (currentScaledPos != oldcurrentScaledPos)) {
                oldcurrentScaledPos = currentScaledPos;
                pointLength = lineLengthMin;
                draw = true;
            }
            // draw the tick (and label)
            if (draw) {
                context.moveTo(pos + 0.5, rulThickness + 0.5);
                context.lineTo(pos + 0.5, pointLength + 0.5);
                context.fillText(label, pos + 1.5, (rulThickness / 2) + 1);
            }
        }
    };

Again, very specific for my needs but it might help?