maker.js icon indicating copy to clipboard operation
maker.js copied to clipboard

How can I get the angle of the text created by model.Text()?

Open doox911-opensource opened this issue 1 year ago • 4 comments

export function getTextModel(font, caption, font_size) {
  const model = new makerjs.models.Text(font, caption, font_size);

  model.layer = DrawLayerNames.Caption;

  const model_extents = makerjs.measure.modelExtents(model);

  return [model, model_extents];
}

const [caption, caption_extents] = getTextModel(font, `H: ${H}`, render_options.font_size);

  caption.origin = [
  // some origin
  ];

  makerjs.model.rotate(caption, /* some angle*/, caption.origin);

How can I find out how rotated the text is in another part of the program?

doox911-opensource avatar Aug 20 '24 18:08 doox911-opensource

Hello, one thing to note is that your drawing is a plain object to which you can add your own properties:

caption.rememberMyRotation = 55;

Properties not used by Maker.js will remain untouched. Hope that helps.

danmarshall avatar Aug 20 '24 20:08 danmarshall

Hello, one thing to note is that your drawing is a plain object to which you can add your own properties:

caption.rememberMyRotation = 55;

Properties not used by Maker.js will remain untouched. Hope that helps.

Ohhhh(

This decision was one of the first in my head) But I thought that maybe someone solved the problem in a different way.

My attempt to solve the problem without adding my own properties:

export function getCircumscribedRectangleAngle(model) {
  const { center, width, height, high } = makerjs.measure.modelExtents(model);

  if (width >= height) {
    const rightMiddle = [high[0], center[1]];

    return makerjs.angle.ofPointInDegrees(center, rightMiddle);
  } else {
    const topMiddle = [center[0], high[1]];

    return makerjs.angle.ofPointInDegrees(center, topMiddle);
  }
}

Has the development of the library stopped? A similar method would be very useful)

doox911-opensource avatar Aug 22 '24 06:08 doox911-opensource

That's a cool solution! There are probably corner cases where, with a font that has ascenders and descenders, the bounding rectangle will not correlate with the font baseline. But if all characters are the same height, it should do the job :)

I have learned a lot (about computational geometry) while developing this library, and the JavaScript ecosystem has changed rapidly since I started. I'm always thinking of what I would do differently for the next version. So, I'm waiting for the right time to get leverage without as much work.

Back to your issue, another idea: perhaps you can add a baseline Line path to your Text model prior to rotating?

danmarshall avatar Aug 22 '24 17:08 danmarshall

image image

I figured out why it doesn't work with slanted lines) Since the makers.measure.model Extends method returns the described rectangle, there are only 4 possible angles.

doox911-opensource avatar Sep 03 '24 18:09 doox911-opensource