Comments (5)
PPDEMOone
commented on June 9, 2024
1
There are some broken paths in the SVG that has been generated.
from maker.js.
PPDEMOone
commented on June 9, 2024
1
Also, I call the scale method and export the svgPathData, some points are not connected
makerJs.model.zero(guitarKnife);
makerJs.model.originate(guitarKnife);
makerJs.model.scale(guitarLineTextModel, 0.3, false);
makerJs.model.addModel(guitarKnife, guitarLineTextModel, "guitarLineTextModel");
console.log(makerJs.exporter.toSVGPathData(guitarKnife));
The right side is normal and the left side is not connected, maybe need the 'Z' command close the path here ?
I read scale and distort methods in the source code.
I believe that the issue is being caused by the export rules for the SVG file format, I am currently still working on that.
from maker.js.
danmarshall
commented on June 9, 2024
Hello, cool app! Something in the while loop seems to cause it to error. When I removed your code:
while (
targetMeasureRect.width >= CARVED_MAX_WIDTH ||
targetMeasureRect.height >= CARVED_MAX_HEIGHT ||
!isContain(collisionRegionRect, targetMeasureRect.low, targetMeasureRect.high)
) {
if (times) {
scale = Number((scale - SCALE_RATIO_STEP).toFixed(2));
}
if (scale <= 0) {
break;
}
lineTextModel = lineTextContent.models!["lineTextModel"] =
makerJs.model.distort(lineTextModel, scale, scale);
targetMeasureRect = makerJs.measure.modelExtents(lineTextModel);
// console.log(targetMeasureRect);
makerJs.model.moveRelative(lineTextModel, [
(CARVED_MAX_WIDTH - targetMeasureRect.width) / 2,
(CARVED_MAX_HEIGHT - targetMeasureRect.height) / 2,
]);
const { low, high } = targetMeasureRect;
const overflowBottom = makerJs.measure.isPointInsideModel(
low,
collisionRegionRect
);
const overflowTop = makerJs.measure.isPointInsideModel(
high,
collisionRegionRect
);
if (overflowBottom && overflowTop) {
break;
} else if (!overflowTop) {
makerJs.model.moveRelative(lineTextModel, [0, -Math.abs(high[1])]);
} else if (!overflowBottom) {
makerJs.model.moveRelative(lineTextModel, [0, Math.abs(low[1])]);
} else {
continue;
}
targetMeasureRect = makerJs.measure.modelExtents(lineTextModel);
times++;
console.log(scale);
}I was able to get a better export:
Looking at this code, I'm guessing the distort function call is where the bug might be occurring. Perhaps some unit tests on distorting a font/text might help encapsulate the condition.
from maker.js.
PPDEMOone
commented on June 9, 2024
As in the above case, the makerjs.model.scale function happens, too 🤔
from maker.js.
PPDEMOone
commented on June 9, 2024
The problem occurs in while, when I give a default distort value, it‘s normally working
lineTextModel = lineTextContent.models!['lineTextModel'] = makerJs.model.distort(
lineTextModel,
0.9,
0.9,
);
targetMeasureRect = makerJs.measure.modelExtents(lineTextModel);
makerJs.model.moveRelative(lineTextModel, [
(CARVED_MAX_WIDTH - targetMeasureRect.width) / 2,
(CARVED_MAX_HEIGHT - targetMeasureRect.height) / 2,
]);
There's no break in this path 🧐
When I repeatedly calling the distort method, like this
lineTextModel = makerJs.model.distort(lineTextModel, 1, 1);
lineTextModel = makerJs.model.distort(lineTextModel, 0.99, 0.99);
lineTextModel = makerJs.model.distort(lineTextModel, 0.98, 0.98);
lineTextModel = makerJs.model.distort(lineTextModel, 0.97, 0.97);
lineTextModel = makerJs.model.distort(lineTextModel, 0.96, 0.96);
lineTextModel = makerJs.model.distort(lineTextModel, 0.95, 0.95);
lineTextModel = makerJs.model.distort(lineTextModel, 0.94, 0.94);
lineTextModel = makerJs.model.distort(lineTextModel, 0.93, 0.93);
targetMeasureRect = makerJs.measure.modelExtents(lineTextModel);
// console.log(targetMeasureRect);
makerJs.model.moveRelative(lineTextModel, [
(CARVED_MAX_WIDTH - targetMeasureRect.width) / 2,
(CARVED_MAX_HEIGHT - targetMeasureRect.height) / 2,
]);On the last time distorted basis, the paths will be broken 🧐
from maker.js.
Related Issues (20)
- Create Text with JSON model path HOT 9
- 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
- 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 2
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.