Comments (9)
danmarshall
commented on June 26, 2024
Hello, can you provide just the json that is retrieved ?
from maker.js.
kamildul
commented on June 26, 2024
Yes, this is my json response:
{
"valid": "true",
"routePath": {
"models": {
"points": {
"paths": {
"point_0": {
"type": "circle",
"origin": [
"2150.4739",
"2203.4505"
],
"radius": 0.1
},
"point_1": {
"type": "circle",
"origin": [
"2152.4739",
"2203.4505"
],
"radius": 0.1
},
"point_2": {
"type": "circle",
"origin": [
"2152.4739",
"2201.4505"
],
"radius": 0.1
},
"point_3": {
"type": "circle",
"origin": [
"2150.4739",
"2201.4505"
],
"radius": 0.1
},
"point_4": {
"type": "circle",
"origin": [
"2150.4739",
"2203.4505"
],
"radius": 0.1
}
}
},
"lines": {
"paths": {
"line_0": {
"type": "line",
"origin": [
"2150.4739",
"2203.4505"
],
"end": [
"2152.4739",
"2203.4505"
]
},
"line_1": {
"type": "line",
"origin": [
"2152.4739",
"2203.4505"
],
"end": [
"2152.4739",
"2201.4505"
]
},
"line_2": {
"type": "line",
"origin": [
"2152.4739",
"2201.4505"
],
"end": [
"2150.4739",
"2201.4505"
]
},
"line_3": {
"type": "line",
"origin": [
"2150.4739",
"2201.4505"
],
"end": [
"2150.4739",
"2203.4505"
]
}
}
},
"texts": {
"paths": {
"text_0": {
"type": "text",
"value": "Hello0",
"fontSize": 500
},
"text_1": {
"type": "text",
"value": "Hello1",
"fontSize": 500
},
"text_2": {
"type": "text",
"value": "Hello2",
"fontSize": 500
},
"text_3": {
"type": "text",
"value": "Hello3",
"fontSize": 500
},
"text_4": {
"type": "text",
"value": "Hello4",
"fontSize": 500
}
}
}
}
}
}
from maker.js.
danmarshall
commented on June 26, 2024
Here's a couple of things which you need to correct:
- Use numbers instead of strings. Your example:
{
"type": "circle",
"origin": ["2150.4739", "2203.4505"],
"radius": 0.1
}Should be changed to:
{
"type": "circle",
"origin": [2150.4739, 2203.4505],
"radius": 0.1
}- There is no
texttype of path. By passing these tomakerjs.exporter.toSVGPathData, it is causing aNaNto be present in your boundary calculation (causing the actual rendering to be very small). You can keep these as data in your JSON if you like, but move them out of themodelssubtree that is passed to the exporter function.
{
"type": "text",
"value": "Hello0",
"fontSize": 500
}You may want to look at captions for annotating with text. Or loading a font to render letterform outlines.
After correcting these, I was able to get this rendering:
from maker.js.
kamildul
commented on June 26, 2024
Hello Dan!
thank you for your help. I don't have a problem with circle and line - it works but i have problem with add text to canvas with other elementes. I do not know how write texts in there. Example i have
But i want have:
I would like to generate these texts via json as well as other elements in my canvas
from maker.js.
danmarshall
commented on June 26, 2024
First you will need to decide to use either captions or font-based Text outline models.
If you decide to use captions, remember that you get only one caption per model. So, for multiple captions, just add more models. If you want to generate them on the server side, here's an example of the serialized JSON for a caption property on a model object:
"caption": {
"text": "a square",
"anchor": {
"type": "line",
"origin": [
0,
50
],
"end": [
100,
50
]
}
},Also note that captions currently do not allow a font size to be specified. This is to reduce complexity, and to ensure that captions remain visible at any zoom level or scaling with unit type conversions.
If you need to specify the exact font and size (and are willing to have text converted to a bunch of raw lines & arcs), you'll need to load a font and then use the built-in Text model. Also note that you will get only outlines of letters, not filled as in your example. This is not something that you'll be able to do on the server side (unless you rewrite opentype.js and Maker.js in PHP 🤐 ). So, I would recommend passing your text specifications in a property that is a sibling to the model object, then modifying the model object on the client side JavaScript and creating Text models then.
from maker.js.
kamildul
commented on June 26, 2024
Hello Dan,
i tried for captions but it not working :-(
My Json response
{
"models": {
"caption": {
"paths": {
"text": "a square",
"anchor": {
"type": "line",
"origin": [
0,
50
],
"end": [
100,
50
]
}
}
}
}
}
My result:
from maker.js.
danmarshall
commented on June 26, 2024
You have a model named “caption” with a “paths” property. You can name your model anything you like, but to avoid confusion for the moment, do not name it “caption”. Then you need a “caption” property on that model.
Your json will work if you change “paths” to “caption”.
from maker.js.
kamildul
commented on June 26, 2024
Hello Dan,
it not working :-(
My JS:
var height = $('.page-footer').offset().top - $('.frame-wrap').offset().top - $('.frame-wrap').outerHeight();
const sbp = require("svg-blueprint");
sbp.settings.axisColor = "red";
const makerjs = require('makerjs');
const blueprint = new sbp.Blueprint({
parentSelector: "#canvas-makerjs",
width: '100%',
height: height+'px'
});
const path = makerjs.exporter.toSVGPathData(data.routePath, { origin: [0, 0] });
blueprint.append('path', { d: path });
blueprint.fit();
My Json response:
{
"models": {
"test": {
"caption": {
"text": "a square",
"anchor": {
"type": "line",
"origin": [
0,
50
],
"end": [
100,
50
]
}
}
}
}
}
Result:
I check what give me "path = makerjs.exporter.toSVGPathData(data.routePath, { origin: [0, 0] });" , result in console.log or alert is "undefined"
from maker.js.
danmarshall
commented on June 26, 2024
Captions are only exported as SVG, they are output as SVG elements:
<text alignment-baseline="middle" text-anchor="middle" transform="rotate(0,50,50)" x="50" y="50">a square</text>So you may try makerjs.exporter.toSVG. If you want your text as SVG path data, you'll need to use fonts and the Text model.
from maker.js.
Related Issues (20)
- This repo is missing important files
- model outline not working with some values. HOT 3
- Adding custom attributes or class to path element HOT 7
- childrenOnChain Issue with cloneToRow HOT 16
- childrenOnPath giving Nan HOT 3
- draw model on center of line at any angle HOT 4
- captions are not displayed in browser HOT 5
- Module placement not showing correct angle HOT 10
- The byLayers option is not working properly in findChains HOT 3
- Is there any way to use reference element HOT 9
- Exception While getting outline for the font model HOT 4
- Not Indexing full svg path while making model fromSVGPathData HOT 4
- Arcs that are degenerate cause a crash on import fromSVGPathData HOT 1
- How to export DXF file by canvas info HOT 2
- How can the relative coordinates of all the text paths in the rectangles be obtained in makerjs? HOT 2
- exports svg path data breaking when fill color HOT 5
- Invalid text path while creating Text model using ttf file HOT 1
- How to get updated endpoint of small Arcs in Elliptic Arc after changing origin HOT 2
- Need help with design HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from maker.js.