JSCAD User Group

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups

    Designing with text

    Design Discussions
    3
    12
    1381
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • gilboonet
      gilboonet @hrgdavor last edited by

      @hrgdavor That would be great. For the moment I'm certainly going to try to do the same thing using svg into vanilla js.

      1 Reply Last reply Reply Quote 0
      • hrgdavor
        hrgdavor @gilboonet last edited by hrgdavor

        @gilboonet I have on my list adding better support for ttf fonts, google fonts, but it will be some time until I get to it. There is also a bug in JSCAD bezier svg handling, that caused some of fonts to display differently than originally designed.

        gilboonet 1 Reply Last reply Reply Quote 0
        • gilboonet
          gilboonet last edited by

          I didn't take care that text vectors are only line segments, so they won't produce nice designs when curves will be needed. So I will try at one moment of this project to use curves for my text output, but it's still early for that.

          hrgdavor 1 Reply Last reply Reply Quote 0
          • gilboonet
            gilboonet @z3dev last edited by

            @z3dev Thank you for the link to the project, looks promising.

            1 Reply Last reply Reply Quote 0
            • z3dev
              z3dev @gilboonet last edited by

              For those looking for support for fonts, there's a little library that can be used in projects.

              https://github.com/jscad-community/jscad-text

              gilboonet 1 Reply Last reply Reply Quote 0
              • gilboonet
                gilboonet @hrgdavor last edited by gilboonet

                @hrgdavor I'm trying to create small scripts to easily create design from text, just like those you can do with Inkscape using path effects, or the very old WordArt from MS Word. The main weakness of using JSCAD for that is that for the moment it is not possible to choose a font that is installed into the pc as .ttf, I'm starting to look at this file format to see it I can use it directly to use its vectors.

                z3dev 1 Reply Last reply Reply Quote 0
                • hrgdavor
                  hrgdavor @gilboonet last edited by

                  @gilboonet VectorChar seems to work better, so you have a solution 🙂 Please share results of what you are aiming to create.

                  gilboonet 1 Reply Last reply Reply Quote 0
                  • gilboonet
                    gilboonet @hrgdavor last edited by

                    @hrgdavor I think I understand your statement, first rotate then translate, but for this example I didn't start from a curve, so I didn't have translation coordinates.

                    hrgdavor 1 Reply Last reply Reply Quote 0
                    • gilboonet
                      gilboonet last edited by gilboonet

                      Here is the result using VectorChar instead of VectorText

                      function main() {
                        const jscad = require('@jscad/modeling')
                        const { vectorText, vectorChar } = jscad.text
                        const { geom2, path2 } = jscad.geometries
                        const { align, translateX, rotateZ, center } = jscad.transforms
                        const { arc } = jscad.primitives
                        const { colorize } = jscad.colors
                        const { measureAggregateBoundingBox } = jscad.measurements
                        //const { union } = jscad.booleans
                       
                        function lettre (ch) {
                          const outlines = vectorChar(ch);
                          const segmentToPath = (segment) => {
                            return path2.fromPoints({close: false}, segment)
                          }
                          const paths = outlines.segments.map((segment) => segmentToPath(segment))
                          return paths
                        }
                        
                        let t = "MAKE IT REAL";
                        let t1 = t.split("");
                        let t2 = [];
                      
                        let x = 0;
                        let nbL = 0;
                        t1.forEach((l, index) => {
                          if (l == ' ') {
                            x += 10;
                          }
                          else {
                            nbL++;
                            let L = lettre(l);
                            let b = measureAggregateBoundingBox(L);
                      
                            if (index == 0) {
                              t2.push(L);
                              x = b[0][1];
                            }
                            else {
                              let b = measureAggregateBoundingBox(t2);
                              x+= b[1][1]
                              t2.push(translateX(x, L));
                            }
                          }
                        });
                        
                        let t3 = [];
                        t2.forEach((p, index) => {
                          t3.push(rotateZ(Math.PI*index/(nbL-1), p));
                        });
                        
                        return [
                          t2
                          , colorize([0,1,0], t3)
                        ];
                      }
                      
                      module.exports = { main }
                        
                      

                      Capture d’écran du 2023-02-27 16-39-18.png

                      Now I can start using control curves.

                      1 Reply Last reply Reply Quote 0
                      • gilboonet
                        gilboonet @hrgdavor last edited by

                        @hrgdavor Thank you, the only problem seems to be the fact that a character can have more than one segment and there is no way to know it with VectorText, so I'm doing it with VectorChar, almost done. About bezier, I hope that bezierAt() and tangentAt() could give the data I need, I prefer to avoid using librairies whenever possible.

                        1 Reply Last reply Reply Quote 0
                        • hrgdavor
                          hrgdavor @gilboonet last edited by

                          @gilboonet taking a quick glance at the screenshot, you would not have issues with "4" if the sequence of transformations is rotation first, then translation. Using bezier is ok, but I am not sure there is anything to directly get value you need from bezier control points. But there are few bezier libs in JS that you could use to do whatever you might need.

                          like https://pomax.github.io/bezierjs/

                          gilboonet 2 Replies Last reply Reply Quote 0
                          • First post
                            Last post
                          Powered by NodeBB | Contributors