Используя 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/