Git Product home page Git Product logo

Comments (3)

danmarshall avatar danmarshall commented on June 9, 2024

Hi @noobd3v would you mind pasting the entire code? Thanks!

from maker.js.

noobd3v avatar noobd3v commented on June 9, 2024

Hi @danmarshall,
I was using the playground code for the text on path with some tweaks. I was using the playground code to reproduce the issue I was getting on my local. And it seems its not working for small arcs.

var makerjs = require('makerjs');

function TextOnPath(font, fontSize, topText, topSpan, bottomText, bottomSpan, baseline, contain, rotate, showPath) {

    var topTextModel = new makerjs.models.Text(font, topText, fontSize);
    var bottomTextModel = new makerjs.models.Text(font, bottomText, fontSize);

    var topArc = new makerjs.paths.Arc([0, 0], 100, 90 - topSpan / 2, 90 + topSpan / 2);
    var bottomArc = new makerjs.paths.Arc([0, 0], 100, 270 - bottomSpan / 2, 270 + bottomSpan / 2);

     var rect = new makerjs.models.Rectangle(1, 1);
    var arc = new makerjs.paths.Arc([13.331144128254737, 3.140174147778744], 7.0420346849616, 103.3236939533026, 104.25739656359501);
	var row = makerjs.layout.cloneToRow(rect, 1);
    makerjs.layout.childrenOnPath(row, arc, 0.5, false, false, true);

    this.models = {
        topText: row
    };
}

TextOnPath.metaParameters = [
    { title: "font", type: "font", value: '*' },
    { title: "font size", type: "range", min: 1, max: 200, value: 24 },
    { title: "top text", type: "text", value: 'This is on top' },
    { title: "top span", type: "range", min: 10, max: 270, value: 150 },
    { title: "bottom text", type: "text", value: 'This is on bottom' },
    { title: "bottom span", type: "range", min: 10, max: 270, value: 150 },
    { title: "baseline", type: "range", min: -1, max: 2, step: 0.1, value: 0.5 },
    { title: "contain", type: "bool", value: true },
    { title: "rotate text", type: "bool", value: true },
    { title: "show path", type: "bool", value: true }
];

module.exports = TextOnPath;

from maker.js.

danmarshall avatar danmarshall commented on June 9, 2024

Thank you very much for the code sample, it was helpful for the repro.
Looks like there is a guard missing for division by zero:

https://github.com/microsoft/maker.js/blob/master/packages/maker.js/src/core/layout.ts#L64-L66

This happens in a degenerate case when calling layout.cloneTo... with 1 as the count. Also, the core code should have a guard for the special case when count is <= 1.

As a workaround for now, can you ensure your calling code only calls layout with a count > 1?
One more thing, probably good to pass a margin too:

var row = makerjs.layout.cloneToRow(rect, 1);  //count is 1, no margin

from maker.js.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.