Используя Maker.js, вы можете рисовать, используя геометрию и черчение. Первоначально предназначенный для станков с ЧПУ и лазерных станков, Maker.js также может помочь вам программно рисовать фигуры для любых целей. Он работает как на Node.js, так и в веб-браузерах.
Основные функции Maker.js
- пути — примитивными элементами рисунка являются линии, дуги и окружности.
- models — Группы контуров для составления фигуры.
- layers — Организация моделей, например, по цвету или типу инструмента.
- цепи — ряд линий и дуг, соединяющихся встык непрерывно.
В Node.js или React вы можете установить Maker.js, используя этот код.
npm install makerjs --save
// Include it on our program.var makerjs = require('makerjs');
В Paths вы можете нарисовать линию, окружность, дугу, используя эти коды, которые требуют от нас передачи некоторых параметров по умолчанию. Например, при рисовании линии есть начальная и конечная точки; для рисования круга должен быть радиус или диаметр и начало круга. Точно так же при рисовании дуги есть начальная точка и конечная точка дуги, радиус. Дуга по часовой стрелке, а большая дуга против часовой стрелки.
Давайте посмотрим код для этого.
Для рисования линии
var line = {
type: 'line',
origin: [0, 0],
end: [1, 1]
};
Для рисования круга
var circle = {
type: 'circle',
origin: [0, 0],
radius: 1
};
Для рисования дуги
var arc = {
type: 'arc',
origin: [0, 0],
radius: 1,
startAngle: 0,
endAngle: 45
};
Для получения дополнительной информации: https://maker.js.org/docs/basic-drawing/#content
С помощью этого кода мы также можем нарисовать пунктирный круг.
const div = 360/50; // 50 is total dashed lines in circle const span = div * 0.70; // distance b/w dashed line const paths=[]; for(var i = 1; i < 51;i++){ const start = i * div; paths.push(new makerjs.paths.Arc(origin,radius,start,start+span)); } return paths;
Для пунктирной линии можно использовать следующий код.
const count = 30; //Total count of lines const ratio = 0.6; //Distance b/w 2 lines const paths = []; const line = new makerjs.paths.Line(startPoint,endPoint); const length = makerjs.measure.pathLength(line); const totalDashLength = length * ratio; const totalGapLength = length — totalDashLength; const dashLength = totalDashLength / count; const gapLength = totalGapLength / (count — 1); const normal = makerjs.point.subtract(line.end, line.origin); const dash = new makerjs.paths.Line([0, 0], makerjs.point.scale(normal, dashLength / length)); const gap = makerjs.point.scale(normal, gapLength / length); var origin = line.origin; for (var i = 0; i < count; i++) { const d = makerjs.$(dash) .clone() .move(origin) .addTo(line,i) .$result; origin = makerjs.point.add(d.end, gap); paths.push(d); } return paths;
В моделях мы можем нарисовать круг болта, звезду, кривую Безье, эллипс, круглый прямоугольник и т. д.
Пример кольца и круга болта в моделях
var makerjs = require('makerjs');
var model = {
models: {
ring1: new makerjs.models.Ring(40, 100),
bc1: new makerjs.models.BoltCircle(90, 4, 10),
bc2: new makerjs.models.BoltCircle(55, 7, 6, 30)
}
};
var svg = makerjs.exporter.toSVG(model);
document.write(svg);
Подробнее:https://maker.js.org/docs/basic-drawing/#Models
Мы также можем найти точку пересечения путей,
var makerjs = require('makerjs'); var model = { paths: { line1: new makerjs.paths.Line([0, 0], [20, 10]), line2: new makerjs.paths.Line([2, 10], [50, 2]) } }; var int = makerjs.path.intersection(model.paths.line1, model.paths.line2);
console.log(int); var svg = makerjs.exporter.toSVG(model); document.write(svg);
Вы также можете нарисовать маленькую или большую линию или круг
Давайте посмотрим на код для маленькой и большой пунктирной линии,
var paths5=[] var k=-800; for(var s = 0; s < 800/37; s++){ if(s%2 === 0){ k = k+90 paths.push(new makerjs.paths.Line([k+40,0],[k,0])) } else{ k=k+60 paths.push(new makerjs.paths.Line([k+80,0],[k,0])) } } return paths5;
Код для маленьких и больших пунктирных дуг в круге:
const div = 360/30; const paths = []; for(var i = 1; i < 31; i++){ if(i % 2 === 1){ const span = div * 0.7; const start = i * div; paths.push(new makerjs.paths.Arc(origin,radius,start,start+span)); } else{ const span = div * 0.55; const start = i * div; paths.push(new makerjs.paths.Arc(origin,radius,start,start+span)); } } return paths;
Для экспорта.
Maker.js предоставляет формат SVG, DXF, OpenCad для экспорта в наш рисунок на холсте.
Для SVG
Позвоните makerjs.exporter.toSVG(model)
, чтобы передать свою модель. Эта функция возвращает строку SVG.
Для DXF
Позвоните makerjs.exporter.toDXF(model)
, чтобы передать свою модель. Эта функция возвращает строку DXF.
Если в вашем рисунке есть слои с именами, которые соответствуют следующим зарезервированным именам цветов, контуры на этом слое будут автоматически иметь следующий цвет обводки:
цвет морской волны, черный, синий, фуксия, зеленый, серый, салатовый, темно-бордовый, темно-синий, оливковый. , оранжевый, фиолетовый, красный, серебристый, бирюзовый, белый, желтый.
Для получения дополнительной информации: https://maker.js.org/docs/exporting/#content
Дополнительная документация: https://maker.js.org/